このブログをマイナーチェンジしました。デザインは以前とほぼ変わっていないので気付いてもらえない程度の地味な変更です。しかし、アメブロが提供しているCSSの範囲で修正していかなければいけないので、作業はCSSコードとにらめっこするところから始まる、根気が必要な作業でした。
カスタマイズの方法はいろんなブログで手順を丁寧に教えてくれているので大変助かります。
今回、こちらのブログでは“カスタマイズの手順の解説”ではなく、”どうしてここを変更しようと思ったか”というデザインの視点を中心にご説明していきたいと思います。
修正したところ
1.トップ画像をクリックするとトップページに戻る
2.トップ画像の下にグローバルナビゲーションを設置
3.リンク・訪問済みリンクの色替え
4.「次へ」「前へ」ボタンの色替え
5.行間と文字サイズの調整
今回はこの5つを変更しました。ぱっと見あまり変更がみられない、作業量の割には変化が少ないカスタマイズですが、こういった細かい部分を修正していくことで、読みやすいブログになっていくのかなと思います。
1.トップ画像をクリックするとトップページに戻る
修正したワケ→いつでもトップページに戻れるように。
「いろいろページをみたけどとりあえずトップページに戻りたい！」と思った時に、すぐに戻れないと、サイト内で迷子になってしまうことがあります。
CSS変更前は、ブログのタイトルのテキスト部分だけにリンクが貼ってある状態でした。今回変更してクリック範囲を画像全体になるように設定しました。
▼今はこの範囲を押すと、トップページに戻る設定になっています。
2.トップ画像の下にグローバルナビゲーションを設置
修正したワケ→知りたい情報に早くたどり着いてもらうため
記事数が増えてきたことと、新規の訪問者さんの為にナビゲーションバーを設置することにしました。頻繁にこのブログに訪問してくれている方にとっては、「更新記事」だけの情報でOKですが、初めて訪問してくれた人にとって、最新記事一回分のみというのはサイトの作りとして少し不親切です。ナビゲーションボタンがあると、「このブログがどんなものなのか」の概要を短時間でざっと見てもらう事ができます。
(※実は現段階ではナビゲーションの装飾はゼロ。リンク先も編集中です。できるだけ早く整えていきたいと思います。）
3.リンク・訪問済みリンクの色替え
修正したワケ→視認性の改善
元のデザインはアメブロテンプレートをそのまま利用していましたが、“訪問済みのリンクの色”がとても薄く、とてもみにくいものでした。淡い色でとてもきれいな配色だったのですが、ブログ訪問者が実際にクリックする時のことを考えると“見にくい”というのは好ましくないので調整しました。
4.「次へ」「前へ」ボタンの色替え
修正したワケ→閲覧の流れを作るため
こちらも前のテンプレートの配色の修正なのですが、「次へ」と「前へ」のボタンの色がとても薄かったので修正しました。とても上品だったのですが、"使いやすさ"を一番に考えると、やはり薄すぎたと思います。ひとつの記事を読んでもらった後は、続いて前の記事も読んでもらいたいですよね。「最新記事」→「前の記事」の流れをつくるため、ボタンを少し見やすくしました。
5.行間の調整
修正したワケ→読む時のストレスを軽減するため
読みやすい行間、というものを意識しました。とてもおもしろいブログがあってもとても読みにくかったら途中で読むのをやめてしまいます。とくに長い文章になると、この行間が重要になってきます。文字サイズは、「すこし小さめがおしゃれに見える」という傾向があったのですが、最近少し大きめの文字サイズのブログがはやりはじめているような気がしています。おそらく「読みやすさ」を意識したサイトが増えてきたからではないでしょうか。本ブログでは、ほどよい大きさ、に設定してみました。とても細かいところなのですが、できるだけ読みやすい記事にするためには必要な変更かと思います。
まとめ
まだカスタマイズの途中ではありますが、現段階の修正点をご紹介しました。読んでもらう側にたって“読みやすい、使いやすいデザイン”を意識すると、変更点が見つかるかもしれません。ぜひお試しください。