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

2017-10-01 Blog

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

シンプルなブログデザインを目指して、多くのサイトや参考書で勉強しながらオリジナルテーマを作成してきた。トップページについては以下の記事にまとめてある。

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

 

今回は投稿記事ページについて考え方をまとめておきたいと思う。

記事ページ(single.php)の考え方

基本的な考え方は変わらない。省けるものは省く、Simple is Best.

トップページ(indexページ)と同様にサイドバーはなし。シングルコラム式とし、メインコンテンツである記事が主役となるようにする。

それでは各エリアについて考慮した点を記載しておく。

ページ上部エリア

タイトルとアイキャッチ画像がまず最初に目に入るように調整。

header.phpで表示しているのはブログタイトルのみ。日付・カテゴリーからがsingle.phpの出力範囲である。

メインコンテンツエリア

記事の幅

色々と試してみた結果、650px前後が読みやすいと感じたので、シングルコラム式ブログではあるけれど横幅はあまり広くとっていない。

幅が広すぎると、目の横方向スライドが大きくなって読みにくくなってしまう。逆に狭すぎても無駄に記事が縦に長くなってしまうし、写真とのバランスも取りにくくなる。記事の幅については、最後は自分の感覚で調整し決めた。

見出しと小見出し

見出しは濃いグレー帯に白文字で中央寄せ、小見出しは黒文字にグレー下線で左寄せとした。デザインのベースを違うものにしているのは判りやすさを意識したもの。双方を簡単に見分けることができるようにしたほうが読者に優しいと考えたから。

(2017/12/30追記:グレー帯の見出しから黒線を上下配置+塗りつぶしなしに変更。こちらの方がシャープでスマートに見えるため。)

フォント

フォントは美しいものを選びたい。当ブログはVerdanaと游ゴシック体を使用している。

読みやすさや見た目のカッコよさは多分に個人の感覚によるので、自分で美しい・読みやすいと感じたフォントを選べばよい。

(2017/10/28追記:Noto Sans Japaneseというフォントを発見。とても美しいのでこれもいつか使ってみようと思う。また、英文字はArialのほうが気に入ったので、将来変更するかも)

(2018/4/30追記:現在はArialと游ゴシック体を使用している。Webフォントは重いというデメリットがあるとのことで現在は避けている)

Footerエリア

ページネーション(ページャー)は設けていない。僕は色々なテーマについて記事を書くので、前後の投稿と当該記事ページのテーマ・内容が異なることが多い。前後のページへのリンクは不要と考えた。

投稿記事の最後には関連記事を表示しているし、カテゴリーリストを一番下のフッターに表示している。また、検索ボックスも設けているので、それらを利用してもらう設計だ。

ちなみに、一番下のcopyrightのところにブログタイトルを記載して、そこからTop pageへのリンクも設けている。これはちょっとわかりにくいかと思うけど、、、一応一番下までスクロールしてからでもトップページへ戻れるリンクは用意した

(2018/4/22 一番下のブログタイトルとリンクは削除しました:フッターに記載のブログ名とトップページへのリンクを断捨離)

広告について

コンテンツに関係ない広告が記事の途中に何度も挟まるのは、読み手に優しくないと思う。

一方で、読者&広告主に役立つ広告なら積極的に載せるべきだとも思う。結果的にブログ運営者も収益を得ることができ、Win-Winの関係となる。

本当によい商品・サービスならそのリンクを載せたらいいし、Amazonなり楽天の広告だって悪くないと考える。

Google Adsenseは記事と関係のない広告が出てしまうこともあり、うーん、と思う今日このごろ。とりあえず記事の最後に載せてみているが、様子を見ていつか消すかも。

自らのブログに価値が発生して広告収入が入るというのは、良い仕組みだと思うしモチベーションにもつながる。一方でデザインへの悪影響があったり、読み手に優しくないのであれば配慮しなければならない。

例えばであるが、スポーツのスタジアムには沢山の広告が掲示されている。観客はいざ試合に集中すればそういった掲示物には気をとられないだろう。目の前で熱い試合が展開されていれば、そこだけを観る。だからメインコンテンツを邪魔する広告にはなっていないと思う。

ネーミングライツもそうだ。日産スタジアムという名前があるが、そこで行われるスポーツそのものには影響しない。本質は、何がメインコンテンツで、何を重視するか、だ。知恵をしぼって運営を考え続けるということが大事。

スタジアム運営にはお金がかかる。ネーミングライツで得られた資金で有用な投資やメンテナンスを行い、お客様にさらなる価値(いい芝をキープしスペクタルな試合につなげる、等)を提供すればよい。

日産スタジアムのある横浜市は随分前からこの取組を始めたと思うが、これはいい仕事をしていると言っていいのでは。

まぁ自分のブログの名を売ることは誰もしないだろうけれど。。。

その他

固定ページ(Page.php)も同じ考えに基づくものとした。基本デザインは同じである。なお当サイトの固定ページは現時点ではProfile紹介ページのみとなっている。

 

オリジナルテーマを作っていくにあたって、いろいろなことを考えるきっかけになった。新たな発見もあったし、答えが出ていないものもある。

ずっと同じデザインを使い続けるかどうかも判らないけど、日々学びながら、良いものを取り入れてシンプルで美しいデザインを目指したい。

そして人々に役立つコンテンツを生み出していきたい。発信力を鍛えることもでき、自らの成長にもつながるだろう。

 

オリジナルテーマ作成シリーズ:
シンプルなサイトを目指して。WordPressでオリジナルテーマ作成にトライ その1
シンプルなサイトを目指して。WordPressでオリジナルテーマ作成にトライ その2
シンプルなサイトを目指して。WordPressでオリジナルテーマ作成にトライ その3 ついに完成
シンプルなサイト設計を目指して。WordPressでオリジナルテーマ作成にトライ その5 “関連記事”

HOME

RELATED POST

   

NEW POSTS

CATEGORY



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

© Yo 2017