2016.05.24
2238文字 / 読了時間:2.8分程度
sozai

てことで、ホームページテンプレート(php版)を作ってみたり。

  • 「Ateh’s template(php)-B(backstrech)」→SAMPLE
  • 「Ateh’s template(php)-B(backstrech)」→README
  • 「Ateh’s template(php)-B(backstrech)」→DOWNLOAD

「Ateh’s template(php)-B(backstrech)」ができるまで

とりあえず、テンプレートの名前がぐちゃぐちゃしているのとかはおいといて。

最近WordPressのテンプレート(テーマ)をいじっていることの方が多かったけれど。
ただ、とった写真をとりあえずupする用途の場合、WordPressにはそれほどメリットなないような気もしてきたり。

てことで、久しぶりにWordPressじゃないテンプレート作ってみようかなということで、今回は初のphp仕様のホームページテンプレートを素材用として作ってみたり。

最初に使いたかったのは、jQueryの「backstrech」。

なので、そこから作りはじめたので、このテンプレートの根っこはここのデザインかも。

スマホ対応(レスポンシブ)を優先して、サイドメニューのマウスオーバーをやめて(PCだとこっちのが楽なんだけど)、はじめてハンバーガーメニューに挑戦してみたり。

このメニュー、使い勝手はあんまりよくないけれど、とりあえず手軽なレスポンシブ用メニューではあるし、まあ一応すっきりはしたからいいかなとか。

ただ、ハンバーガー置き場としては上がおちつくけど(下だと床においてあるみたい?)、上だと使い勝手が微妙ー。

特にpage upもそのメニューにいれたので(見た目すっきりを重視して)、使い勝手はもう少し考えなおしてもいいかもしれない。

phpで作るののいいところは、デザイン変更の柔軟性があがるところ。

この辺はWordPressと似たようなものだけれど、ヘッダ部分は共通でヘッダ用ファイルをincludeで読み込んだりとか、JavaScript一個追加するために全ページのヘッダをぺたぺた書換える手間が省けたり、デザイン変更でidやclassをいじる必要がでてきても、全ページ書き換えなくてすむし、この辺がphpを使ったサイト作成のいいところかな。

デメリットは、無料鯖ではほぼ無理なのと、うっかりミスでサイトが表示すらされなくなる(「”」を1箇所うっかりけずっただけとかで)可能性とかはあるけれど、それでも慣れれば便利だなーとは思ったり。

自分で使うのは、php仕様にカスタマイズしてるし。

画像表示用には、jQueryのbackstrechが好き

このjQueryかなり好き。
使いやすいし。機能は充分だし。

今回は、body全体ではなくdivに表示するようにしてスライドショーにしてみたり。デフォではランダム。

このスライドショーが楽に実装できるところが気に入ってたり。

スライドショーで表示させるファイル名が書かれた外部ファイルを用意することにしたので、ついでに画像へのリンクも表示するようにしてみたり。
この辺が、php使うと使い回しできて楽。

jQueryのtocも使ってみる

ただし、backstrechを使うと画像全体表示にはならない(当たり前)……。

てことで、画像メインサイト用だと、実用性なさそうってことで、普通に画像を並べるタイプも作ってみたり。

こっちはbackstrechも外部ファイルの関係ないので、tocで見出しから自動目次作成をさせてみたり。

あと、サンプル画像はunsplash(今回は普通に画像ファイル同梱した、そうじゃないとサンプルにならないし)を今回も使わせてもらったけれど。

画像表示はあんな感じいいなーと思ったので、(真似できる部分は)多少参考にさせてもらったり。

1カラムで画像大き目にサイズは揃えて並べるのと、白地でかなりすっきりしたデザインとか。

テキスト?

今回のテンプレートはそもそも画像を扱いたかったのでテキスト関連はおまけ程度気分ではあるけれど。

それでも、「外部ファイル読込(改行タグ自動変換)」「縦書」「文字数カウント」くらいの機能はもたせたし、逆に凝ってない分(デザイン指定まだしてないタグが多い)シンプルさだけは足りていると思うので、それはそれでいいかもしれないとも思っていたり。

スマホでの読みやすさも充分(当社比)だと思うし。

テキストサイトとしてのindexページサンプルは作ってないだけで、まああのままでもできなくはないし、テキストサイトとしても充分使えるかもしれない。

あと、個人サイトは文字小さめなのは昔から流行ってるし、そんな雰囲気もメニューとかで今回は取り入れてみたりー(本文は100%)。

テキストコンテンツ用のテンプレートはこんなかんじ(→テキスト表示用)。

まとめ

とりあえずベータ版な気分ではあるけれど。

それでも、配布用テンプレートならこれくらいで充分じゃないかなとも思ったり。
あんまりごてごてしてても、使いづらいだけな気もするし。

自分用カスタマイズは自分のサイトでやればいいと思うし。

WordPressに移植するかなあとも思うけれど。

ただ、特にreadmeとか、WordPress(ブログ)系じゃなくてサイトっぽい雰囲気がする気がする。

なので、これはこれでいいかなあとも。

とりあえずおわり。





sozai





Comment



CAPTCHA




Memo.Medamayaki

三国志他歴史、小説、ゲーム等に関するメモ用ブログ。

TEMPLATE:Ateh's theme

×

Status


苗字:
名前:
性別:
年齢:
通り名:
出身:
誕生月:
誕生日:
職業:
種族:
武器:
属性:
髪色:
目色:
口癖:

Setting

苗字:
名前:
性別:
年齢:
通り名:
出身地:
誕生月:
誕生日:
職業:
種族:
武器:
属性:
髪色:
目色:
口癖:





× 
×

Recent Posts

×

Custom Menu