(け) テーマ自作から1年を迎えてのブログリニューアル!記事の読みやすさにギリギリまでこだわった新ブログテーマ!

最終更新日:
Screenshot 2013 02 10 15 37 12

初めてWordPressでゼロからブログテーマを自作したのが昨年の2月。
その時から現在で1年を迎えています。思えばモバイルテーマを作ったりTwitter Bootstrapフレームワークを使ったりいろいろありました。

それを記念してということではありませんが、この度ブログテーマを一新させました。
先週辺りからそのテーマを使っていましたが、慣らし運転もそろそろいいかということで、きっちりと報告させていただきます。

ブログテーマ自作したヨ!「私がWordPressブログテーマをゼロから自作した理由と自作してみてわかったこと」

SPONSORED LINK

記事ページに1カラム、すべては読みやすさのために

今回は記事ページで記事本文にまるまる1カラムを割きました。以前から「次にテーマを変えるなら記事は1カラムだな」と決めていたのです。

目指すはRSSリーダー並みの読みやすさ

当ブログでは今までもRSSの素晴らしさについてしつこく語ってきました。
RSSリーダーが素晴らしいと考える最も大きな理由は「記事本文以外に目に入るものがまったくないこと」でしょう。これ以上ないくらいに記事を読むことに集中できます。
ブロガーとして大半の人よりもたくさんのブログ見る者として、RSSリーダー以上に読みやすいブログは数えるほどしか知りません。

じゃあ作ればいいじゃないかということで今回はRSSリーダーにも匹敵するくらいの読みやすさを目指してみました。

結果的にRSS登録数が減るかもしれないな(それは困った

1カラムだからこそできる大胆なレイアウト

記事本文で1カラムまるまる。全体の横幅も以前より増やしているため本文だけで1060ピクセルあります。これだけ広いスペースがあると大胆にレイアウトを組むことができます。

横マージンも以前に比べてかなりのスペース空けることができましたし、行間にもかなりのスペースをとることができました。そしてこれだけスペースを空けているにも関わらず空け過ぎに見えないところがスペースが広く使えるという1カラムの魅力だろうと思います。

更なる読みやすさへの追求

RSSリーダー以上の読みやすさを実現するために今回特に文字周りのデザインにこだわっています。

黒を貴重とする文字デザイン

これまで<h2><h3>といったハイライト系には文字の色を変えたり飾りをつけたりしてきました。
しかし他ブログとも見比べる中で、突然色が変わるのが読みやすさを妨げているのではないかと最近は考えるようになっています。

そこで今回、ハイライト系の文字色をすべて黒系で統一してみました。文字サイズはハイライトごとに変えており、行間などもしっかりさせておけばハイライトが目立たないということもありません。
また同色で統一したことにより見た目にも文章が締まったかのような錯覚を覚えることもできます。

メイリオフォントの導入

Screenshot 2013 02 10 14 24 24

今回初導入のメイリオフォント。とりわけ好きなフォントでもありませんでしたが、なんといっても見やすい。日本語・英語問わず文字の縦横比がほぼ1:1であることが見やすさアップにつながっているようです。

見やすいフォントの中でも上位にきている、Windowsでもメジャーであることなどから導入を決定しました。
フォントを変えると文章のイメージが変わった気がします。

“マルチカラム”レイアウト

今回使っているマルチカラムというのは複数カラムを持つということだけではありません。
これまでのテーマはすべてのページに対して同じ段組を使って作ってきました。たいてい左半分強に記事本文のスペースがあって余った部分がサイドバーなど、金太郎アメのように同じ型にすべてはめ込んできたように思います。

しかし、ページによって必要なスペースは異なるはず。特に今回は記事本文に1カラムという広いスペースを確保する必要がありました。

ということでページの種類ごとに段組を変えてレイアウトを組んでみました。
記事ページでは記事本文に1カラムを割いて、サイドバーはコメント部分など本文以外のパーツと合わせてその下に表示。
トップページや記事インデックスなどそれほど記事本文にスペースが必要ないページについては今までのサイドバーのような表示にしています。

Screenshot 2013 02 10 13 08 22

あるときは1カラム。

Screenshot 2013 02 10 13 09 08

またあるときは2カラム。(最大18記事まで関連系の記事を表示)

Screenshot 2013 02 10 13 11 38

またまたあるときは3カラム。

と、ページによって必要なパーツに必要なスペースを確保させることができるようになっています。

ページを移動することなく次ページを読み込むページナビ

いままで使っていたページナビ。プラグインを使わずに導入していたものですがどうも使用頻度が低いようです。
そこで、モバイルテーマで使っていた自動ロードでページ移動せずに次ページの記事群を読み込むようにしました。

参考: jQueryを使ってWordpressの追加記事をページ遷移無しで読み込む | ごりゅご.com

ボタンを押さずに自動ロードもできますが、それだと無駄に手の込んだフッターを用意する意味が無いのでボタンを押してのロードにしています。

ヘッダに代わって最新記事サムネイルを使ってページトップを彩る

[K] frasmの@shintarowfreshさんに当ブログのヘッダを”Reフレッシュ!”してもらった

@shintarowfreshさんにデザインしていただいたページヘッダーは末代までの宝とするところですが、ページの顔となるヘッダーには致命的に問題がありました。

記事本文までの距離が遠い

ヘッダ画像導入にあたって考えなければいけなかったのが「如何に記事本文までの距離を減らせるか」ということ。

モバイルテーマの役割は「限られたスペースで如何に記事を読みやすくするか」ということだと考えています。
via: (K) 脱TwitterBootstrapを目指して。当ブログスマートフォン用モバイルテーマをバージョンアップさせました!

かつてモバイルテーマを作ったときも同じ問題に直面していました。少なくとも記事のタイトルはページを表示したとき視界に入っていなければ。
本文までの距離を減らすため、断腸の思いでヘッダー撤去を決定。

そしてヘッダーの代わりに最新記事をショーケースのような具合でトップに配置することにしました。

最新記事のサムネイルをブログの顔にする

WordPressでの記事表示は通常同じスタイルでしか表示できませんが、少し工夫してインデックスの最初の記事のみスタイルを変えた上でトップに配置するようにしています。

カテゴリやタグでの区分けでもそのインデックスでの最新が頭にくるようになっています。その他のアーカイブは対応させるかどうか悩みどころ。(現在はまだ対応していない。)

Syntax Highlighter復活

Google Code Prettyの見た目に誘われてSyntax Highlighterを外していましたが、コードのコピーはSHのほうが便利なのでGCPを外してSHを復元。

スタイルはCSSで何とでもなるのでGoogle Code Prettyの見た目も取り入れつつ、

Screenshot 2013 02 10 14 00 27

こんな感じ。バージョンはWPプラグインも含め他ブログの導入状況を参考にした上で2.1のバージョンを使用。

WordPressプラグイン「Syntax Highlighter」も外せそうなので外してみた
こちらはバージョン3の導入になります

ロゴはやっつけ

Screenshot 2013 02 10 14 17 17

(K)から(け)へと変わるロゴ。
@shintarowfreshさんにデザインしていただいたロゴを踏襲した新ロゴをやっつけで作ってみました。作ってみたもののブログタイトルとの兼ね合いの部分は未完成といったところ。

Pixelmator 2.1.4
価格: ¥1,300 (記事執筆時)
カテゴリ: グラフィック&デザイン

AppStoreで見る

おわりに

他にもWebフォントの導入や、付箋みたいにタグを貼ったりタブパネルのデザインを見直したりなど特徴がないことはないですが、上記のものと比べると特徴というほどではないでしょう。
他にも地味過ぎて忘れてしまっている改良部分もあるかもしれません。

今回は構想には時間をかけてじっくり作ることができました。
細かな部分については今後も変えていくものの、このスタイルは長く使えそうな気がします。

一週越しではありましたがとりまの報告でございました。ぜひWEBページでご覧になって下さいませ 🙂

参考: [CSS]シンプルなHTMLに付箋紙のデザインを適用するスタイルシート | コリス

WordPressテーマ自作を初めて行った私がお送りするWordPressテーマ自作戦記 第一回: 下準備篇
Categories:
記事が気に入ったらシェアお願いします!