ブログデザインをリニューアルしました

ブログデザインをリニューアルしました
ブログデザインをリニューアルしました

このブログに何度か来たことがある方は気付いたと思いますが、ブログのデザインを11日の日曜日に新しくしました。基本のワンカラムはそのままで、使えるところは使いつつ改善したい部分に少し力を注ぎつつデザインしてみました。ここ2日ぐらいでグワッと作り変えたので、タイトル画像は何も思いつかず、とりあえず紅葉でも散らしてみました。秋だし。

えーと、ひとまず変更した点についてです。

まずテーマ色を変えました

前のブログデザインが基本モノクロトーンで質素な感じだったので、多少は色が欲しい。という事で安心感を与えるグリーンを中心に配色しました。グリーンって目にも優しいし、ブログ読むならちょうど良いんじゃないかと。サブとして、オレンジ系の暖色をフッターに持ってくることで、安定感を出しています。下の色が重めだとどっしりして見えますよね。

グローバルメニューの変更

グローバルメニュー(一番上のカテゴリ別メニュー一覧)がいまいち記事の分類に困った部分があったので、2つほどカテゴリを増やしてなおかつメニューのデザインも変えました。メニューは一番上にあるだけで目立つので、控えめで地味に配置しています。全体のイメージに合わせてcssで角丸にしました。まだ記事がひとつもないカテゴリがちらほらあるのはここだけの話…( ´_ゝ`)

ブログタイトルのフォント変更

前は細い明朝体を使ってましたけど、真面目すぎる雰囲気(ブログの内容は適当かもですが)を崩したかったので「Cooper Std」というフォントに変更しました。特にロゴとか決めてないので、その辺は自由にしてます。ちなみにブログタイトルにマウスホバーすると、ロゴがカラフルになるように作ってます。多少他の色を使って明るくしたかったのと、通常時は派手にならないようにするためにこうしてます。

トップページに広告は置かない

前のブログでもこれは守ってましたけど、最初にトップページを開いてチラチラと広告が目につくのが個人的に苦手なので、トップページには一切広告は置いていません。シングルページ(記事の個別ページ)には文中と一番最後に置いています。かといってあまり目立つのも嫌なので、気にならない程度に抑えています。広告よりもブログの内容を読んでほしいので、広告の配置は個人的に重要です。

ランダム記事の紹介

前は関連記事と週間ランキングを少し載せていましたが、「こんな記事もあるよー!」ということが伝えられれば良いのでまとめて表示できる方法はないかなーと思っていたところ、知り合いのyouさんのブログに載っていた記事を参考にしつつ実装してみました。

プラグインなしでWordPressの新着・ランダムなどをタブ切り替えする :ateitexe

これなら省スペースだし、見やすくなったかなという印象です。youさんありがとー!

※追記03/01/22 サムネイルつきの関連記事を表示するように変更しました。同じくyouさんの記事が役立ちました:)

プラグインを使わずに、WordPressのサムネイルつき関連記事を表示する

0122関連記事追記

記事一覧をもう少し見やすくしました

前の記事一覧が少し雑に見えたので、もう少し見栄えよくできないかと思い日付とカテゴリにアイコンを付けてみました。簡単なアイコンなので自作です。SNSボタンも一覧に付けることで、記事ごとのシェア率が分かりやすい&よりシェアされやすいという利点を考慮して表示させています。本当はさわりの文章だけでも記事一覧に入れようかと思ったんですけど、あれこれ詰め込むとワンカラムのため縦に長くなりすぎるデメリットがあるので省略しました。

というわけで自分なりに改善点を見つけてリニューアルしてみましたが、どうでしょうか?何かまた気になる点があったら改善していきたいと思っています。ということで、今後とも当ブログをよろしくお願いいたします:)

関連記事を読む

ブログデザインをリニューアルしました

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]