ブログデザインを一部修正しました! | channelsland

ブログのデザインを一部修正しました!

construction

こんにちは、ダイクン(@channelsland)です。

昨日のプロフィールページに引き続き、今日はブログのデザインや機能について手を入れてみました。

今までのデザインや機能はブログ開設当初に設定したまま放置してあったので、記事もある程度蓄積されてきたこのタイミングで修正することで、ブログに来てもらった皆さんが少しでも見やすくなっていれば嬉しいですが、どうでしょうかね。

変更点1: タイトルロゴと全体の配色を変更

これまではすごくシンプルだったブログのロゴ。

今回、ロゴを新たに作成した上に背景画像も設定して、青を基調に明るい感じに変えてみました。ブログタイトルを「アイランド」としているので、「島」をイメージしています。

ロゴについては、Squarespaceというサイトのロゴメーカーを使いました。

Create a beautiful, professional logo for your business in seconds with Squarespace's free logo maker. Choose from thousands of logo design options.

このサイトでは透過png形式で画像を作成できますが、無料の場合は小さいサイズ(400x400px)までしかダウンロードできません。$10支払うことで、高解像度のファイルをダウンロードすることできます。

400pxだとさすがにタイトルロゴには小さかったので、今回は思い切って$10払って高解像度のファイルを使ってみました。

変更点2: サイドバーの項目を一部修正

サイドバーの項目についても、いくつか修正を加えました。

プロフィールを修正

以前はものすごくシンプルな内容しか記載していませんでしたが、記載内容を少し加筆して、さらに昨日を作ったプロフィールページへのリンクを追加しました。

ただ、スマホからブログを見ると、サイドバーって結局一番下にしか表示されないので意味がないんですよね。記事の一番上に固定で簡単なプロフィールを記載しようと思ったのですが、イマイチしっくりこなかったので今回は見送りました。

このブログも見に来てくれる人の2/3近くはモバイル経由のようなので、いかにスマホで見てもらえる人たちに見やすく、分かりやすくできるかが今後の課題ですね。

人気記事を表示

以前は記事数が少なかったので新着記事だけを表示していたのですが、ある程度記事数も増えて、閲覧数のデータも蓄積してきたので人気記事を表示するようにしてみました

表示にはWordPress Popular Postsのプラグインの機能を使っています。プラグイン自体はブログ開設してすぐに導入してデータ収集はしていたので、そのデータを使って表示させています。

設定に当たっては、こちらの記事を参考にさせてもらいました。

wordpress popular posts を使って WordPressのサイドバーに人気記事を表示する方法を解説しています。とても簡単なので誰でもすぐにできる方法です。

変更点3: カテゴリの説明を修正

ブログの記事カテゴリを整理してみた!」で紹介した通り、このブログのカテゴリも先日整理したのですが、カテゴリの説明が仮置きのまま公開されてしまっていたことにこのクロネさん(@kurone43)のツイートを見て、気が付きました、、、汗

各カテゴリページを開いてもらうと一番上に表示される説明書きなので、どんなカテゴリなのかを見てくれた人がイメージしやすいような内容に修正してみました。

変更点4: トップページでの記事の並び方を変更

これまでは縦に1列で記事を表示させていたのですが、記事数が増えてきたのに伴って2列のタイル形式で表示されるようにしてみました。ブログに来てくれた方に、より多くの記事タイトルを見てもらえるようにするためです。

また、記事下の関連記事についても同様に縦1列の表示から、タイル形式の表示にしてより多くの情報が俯瞰できるようにしています。

ただ、この形式にすると記事の「タイトル」と「メタディスクリプション」欄の文字列の長さによってタイルの高さが変わって、表示がズレてしまうのが気になるところ。

青矢印のメタディスクリプション部分の長さが違うので、タイルの長さが左右で違っています。そのせいで、その下に続くタイルの位置もズレてしまう。

inconsistent-height

これからは「タイトル」と「メタディスクリプション」欄の文字列をコントロールして、タイルがズレないようにトライしてみます。やっぱりこういうズレは見栄えがよくないので、、、汗

まとめ

他にも微妙に変えた箇所はあるんですが、大きな変更点はこんなところ。

今のタイミングで修正しようと思っていた部分の大部分は今回のデザイン変更で修正できました。まだまだやれることはあるんでしょうが、一気にすべては出来ないので今回はこんなところでしょう。

見に来てくれた人が少しでも楽しく見やすく記事を読めるようなブログにしていきたいと思うので、もし記事を見て何か気になる点などあれば、ブログのコメントでもTwitterでも構わないので伝えてもらえるとうれしいです!