エンジニアが学んだことをお伝えします

2017-09-18 Blog, Less is More

シンプルなサイトを目指して。WordPressでオリジナルテーマ作成にトライ その3 ついに完成

シンプルなサイトを作りたいと思い立ったのは、約2週間前の9月3日。

他の方が作ってくれているテーマも素晴らしいものが多いのだけど、ちょっとしたところでカスタマイズができなかったり、使いこなせないほど多機能すぎて逆にサイトが重くなってしまったり、といったことが理由。

 

それからphpファイルとはなんぞや、cssとはなんぞや、を勉強しながらコツコツとブログをWordPressでオリジナルテーマを構築してきた。

今回概ねブログのテーマが完成したので、設計思想をまとめておきたいと思う。今回の記事は主にインデックスページ(トップページ)について。

当ブログテーマ設計思想

とにかくシンプルに

がテーマ。ミニマルなデザインを追い求める。

ヘッダーエリア

考慮したポイントは以下の通り

記事一覧エリア

 

フッターエリア

レスポンシブ設計

 

カテゴリーリスト表示

カテゴリーリストは横に並べて画面端で単純に折り返す設計にしている。したがってデバイス毎にcssコードを書き分けるようなことはしていない。画面サイズに応じて適切に表示される。

記事一覧表示

各記事ブロックの並びについては、デバイス画面の大きさに応じて端で折り返すだけの設計にしている。すなわち、スマートフォンではほぼ縦一列に勝手にならぶし、タブレット以上なら縦2列もしくは3列になる。デバイスサイズ毎にcssコードを変更するような設計にはしていない。

その他フッター関連表示

どのパーツもデバイス画面サイズにかかわらず全く同じcssコードが適用される。

ブログタイトル

実はブログタイトルの表示が一番苦労した。

単純な文字列なのだけど、スマートフォンのように画面サイズが小さいと折り返されてタイトルが2行になってしまう。

ここは色々試行錯誤した結果、画面サイズ毎にフォントサイズを変更して概ね1行で収まるようにした。

悩んでいること

Googleアドセンスをトップページに載せるかどうか迷う。

シンプル志向でいくなら載せるべきではない。コンテンツに関係ないからだ。

そうはいっても載せたらどうなるのか、試してみたいという思いもある。まぁ、気が向いたら考えてみよう。必ずしもミニマリスト志向に縛られる必要はないし、と言い聞かせて。。。

オリジナルテーマ作成のメリット・デメリット

メリット

デメリット

おわりに

ここまで基礎を学んだ本や本当に多くのサイトにお世話になった。

本当にありがとうございます、そしてこれからもよろしくお願いいたします。

 

オリジナルテーマ作成シリーズ:
シンプルなサイトを目指して。WordPressでオリジナルテーマ作成にトライ その1
シンプルなサイトを目指して。WordPressでオリジナルテーマ作成にトライ その2
シンプルなサイトを目指して。WordPressでオリジナルテーマ作成にトライ その4 記事ページ設計 (single.php)
シンプルなサイト設計を目指して。WordPressでオリジナルテーマ作成にトライ その5 “関連記事”

HOME

RELATED POST

   

NEW POSTS

CATEGORY



Yo
30代エンジニア。日々の生活や読書、仕事や海外での経験から学んだことをまとめるブログ。
好きなものはApple製品、コーヒー、革製品、デニム。旅とカメラも。Less is More.な生活に憧れる。
Profile詳細

© Yo 2017