ご報告！ブログのデザイン改良しました。あと、サブブログ始めました。

一般的に、ブログにおいてデザインは後回しにした方がいいといわれます。「デザインを軽視しろ」ということではなく、「デザインに時間をとられた結果として、更新が疎かになるくらいなら、一記事でも多く投稿した方がいい」という話らしいです。

しかし、一方でデザインがブログの重要な要素であることも事実です。何故なら、デザイン＝ページの見やすさは、ユーザビリティに直結するからです。

というわけで、最近、ブログをちょこちょこいじっていました。これからもちょこちょこいじると思いますが、ある程度満足したので、この段階に記事にしたいと思います。

記事部分のデザイン変更

当ブログは、ブログテーマとしてSTINGER5のテンプレートをベースにカスタマイズしています。STINGER5は、右にサイドバー、左に記事部分がくるいわゆる2ペイン型のテンプレートです。

ここでは、その左側、記事部分にくわえた変更点をご説明します。

記事部分の幅を広くした

STINGER5は、wordpressの中でも、ブログテーマとしては若干記事幅が狭めです。なので、これを広くしました。デフォルトが660pxで、今が730pxくらいです。

文字のフォントサイズを大きくした

STINGER5の文字サイズは14pxですが、これを16pxにしました。少し大きくなって読みやすくなったかと思います。

ブログにとって可読性は生命線ですので、文字を大きくする効果は馬鹿にできません。あと、管理人である僕自身が小さい文字を読むのが苦手な人なので、その意味でもうれしい変更点です。

はてなブックマークの色を変えた

もともと当ブログでは、各記事下に、その記事へのはてなブックマークコメントを表示していました。この記事の下にもあるかと思います。

けれど、以前は、はてなブックマーク標準の青デザインをそのまま使っていたため、緑+オレンジ基調の当ブログのカラーパターンとマッチしていませんでした。この機に、ちょっと浮いているかんじを軽減するべく、色をCSSで上書きし、オレンジ基調にしてみました。

記事下の関連記事を二列にした

多分、これが一番大きい変更点だと思います。

記事下に表示する関連記事の改良です。

自作ソースを更に改良した

当ブログの関連記事欄はwordpress popular postsをベースにした自作ソースで表示しています(「記事下に関連記事を表示したい！WordPress popular postsをカスタマイズした自作コードを公開」参照)。

このオリジナル関連記事機能は、STINGER5標準の関連記事表示よりだいぶ機能的に強力なものになったので、おおむね満足していたのですが、今回更にコードを改良し、二列表示に対応してみました。これで、より多くの記事を表示することができます。

レスポンシブデザインにしてみた

この二列表示はレスポンシブなデザインにしてみました。なので、スマートフォンからの閲覧では、今までどおり関連記事を一列で表示されているはずです。

リード文の表示は割愛した

関連記事ひとつひとつのスペースが小さくなった分、リード文(ブログの冒頭部分)の表示は割愛しました。当ブログは、そんなにリード文にこだわっていないので、そんなに遮二無二表示する必然性はないだろうと判断しました。

右枠が空く場合は、とりあえず広告を表示させてみる

二段表示になった関係で、関連記事の右枠が空いてしまう可能性が生まれるようになりました。たとえばあるカテゴリに記事が一記事/三記事しかない場合などがそうです。

せっかくの関連記事スペースを空欄にするのももったいないので、現状、とりあえずamazonリンクを表示させています。この点は、将来的に変更するかもしれません。

自分自身の記事を除外するようにした

小さな変更点ですが、以前は関連記事に「今開いているこのページ」自体が並んでしまう場合がありました。なので、自分自身のページは除外した関連記事を表示するよう、変更しました。

記事下のtwitterボタンをなくした

今までRSS欄と関連記事欄の間に「@nai_nariさんをフォロー」というボタンを設置していたのですが、デザイン上浮いてしまっているし、あんまりよい設置場所ではありませんでした。なので、サイドバー右上のプロフィール欄にまとめることにしました。

サイドバー部分のデザイン変更

記事部分の変更点は改良がメインでしたが、サイドバーの方はウィジェットの撤去などが多かったです。もともと、ごちゃごちゃと色々なツールをつけるのが好きなので、結構無法地帯になっていました。

今回、ざっと全て見直し、あまりうまく活かせていなかった要素を削りました。以前に比べて、ずっとシンプルなサイドバーになったかと思います。

twitterウィジェットを消した

サイドバー下部にtwtterウィジェットを削りました。

今まで設置してはいたものの、あまりtwitterで呟かないので、ウィジェットスペースが定期ツイートばかりで埋まっている状態になっていました。これではウィジェットを設定する意味も半減だろうと思い、今回、削除に踏みきまりました。

ブログ村ウィジェットを消した

記事の画像一覧を表示するブログ村ウィジェットを使っていたのですが、古い記事の画像が表示できず、ウィジェットの半分くらいが空欄になっていました(おそらくブログ村の画像キャッシュの持ち方の問題)。

ブログ村ウィジェットは、設置していると、サイトのPVを集計してくれます。なので、このパーツを外す外さないは、PVランキングの順位に影響してくることになります。

結構迷いましたが、最終的には外すことにしました。このブログパーツを外しても、僕がメインとしているブログ村のミニマリストPVランキング上は、とりあえず一ページ内(50位以内)には食い込めるだろうという読みがあったからです。

一ページ目に表示さえされれば、後は順位が多少上がろうが下がろうが、outに対して影響はありません。問題ない範囲だろうと判断しました。

最近のコメント一覧を消した

サイドバーから「最近のコメント」欄を消してみました。

そんなにコメントのやり取りが活発なブログではないので、なくても支障ないかなと思いました。

ありがたいことに、当ブログは、時々コメントをいただく機会に恵まれます。なので、まったく「最近のコメント」欄が機能していないというわけでもなかったのですが、一方で、常に表示しておかなければ流れが把握できないほど活発なわけでもありませんでした。

記事へコメントがあったか、そのコメントに返信があったか否かは、コメントした当人と管理人の僕が把握していれば、ひとまず充分です。なので、わざわざサイドバーに表示しなくても、なんとかなるだろうと判断しました。

でも、これはあくまで僕だけの思惑です。読者あってのブログですから、もしかして最終的にやっぱりコメント欄は復活させるかもしれません。その場合は、記事下のコメント欄付近に「最近のコメント」も併設させる形にしようかなぁと考えています。

サイドバー下にamazonリンクを貼って追尾させてみた

amazonリンクの掲載自体は、今回が初めてのわけではありません。今までもサイドバー下にはamazonリンクを設置していました。

けれど、これまで貼っていたのは、ページ内容を解析して広告表示を自動的に変える、いわゆるおまかせ系のリンクツールでした(要は、googleアドセンスと同じ動的広告です)。自動で表示を変えてくれるので便利なのですが、amazonの動的広告は、アドセンスと比べるとそこまで精度が高くない気がしていて、当ブログの読者層と表示される広告の間にかい離を感じていました。

なので、一手間かかりますが、自分のおすすめの品だけを集めたamazonウィジェットを作ってみました。読み手の皆さんにとってうれしいラインナップになっているか否かの確証はありませんが、このリストなら少なくとも僕は満足できます。貼っている僕自身の満足は大事なことです。

時々メンテして、紹介する商品を入れ替えようかなーと思っています。

サイドバーの各ヘッダにアンダーラインを引いてみた

サイドバーの各ヘッダに、二重線のアンダーラインを引いてみました。「プロフィール」とか「最近の投稿記事(more)」みたいな表記部分です。

今までなんとなくサイドバーのまとまりが悪い気がしていたのですが、考えるに、多分このヘッダ部分の印象が弱いからではないかという仮説を立ててみました。アンダーラインを引くことで、各欄ごとのゾーニングが強調され、だいぶ見た目のまとまり感がよくなった気がします。

人気記事一覧にアクセス数を表示してみた

以前から人気記事の表示はしていたのですが(ちなみに、これもwordpress popular postプラグイン利用)、今回、新たにアクセス数を表示してみることにしました。なんというか、どのくらい人気記事なのか指標が見えた方が、ユーザにとって親切かなーと思ったからです。

他ブログですと、こういう人気記事の指標値としては、たとえばはてブ数を表示しているブログなどをよく見ます。ただ、当ブログは、ソーシャルバズではなくオーガニックサーチ主体で導線を組み立てているブログなので、はてブ数よりアクセス数を表示した方が正解だろうと判断しました。

まとめ

いかがでしょうか。デザイン改良の結果、少しはミニマリスト系ブログっぽいテイストになったでしょうか。

僕は、ミニマリストを目指していますが、同時にごちゃごちゃしたものも大好きなので、こういうブログのデザイン改修みたいなことをしていると、常に楽しいジレンマに襲われます。今回は、全体的にシンプル志向でまとめましたが、またデザイン的な寂しさを感じたら、色々足すかもしれません。

余談 : サブブログ始めました

このたび、はてなブログデビューしました。位置づけとしては、当ブログに不足しがちな写真成分を補うためのサブブログです。(経緯については、「サブブログ開設しました。今回は画像投稿ブログにしたいです。」参照)

webリテラシーがないなりに、写真やイラストを貼る。

物を捨てきれないなりにミニマリスト目指す。(https://seminimalist.info/)の管理人ないなりが、webリテラシーがないなりに、写真やイラストを貼るブログです。

nai-nari.hateblo.jp

当ブログともども、よろしくお願いいたします。