先日導入した、はてなブログのオシャレなテーマ「Thumnail2」
結論から言いますと、大変気に入っております。
rokuzeudonさん作です。
サムネイル画像が大きい＆２カラムなテーマ「 Thumbnail2 」をつくった - LOGzeudon
rokuzeudonさんのブログもとてもオシャレなので、是非参考にしたい。
Thumnail2を自分の色に染めるため、この３日間で施したカスタマイズを紹介します。
Thumnail2 カスタマイズ方法を紹介
ヘッダー画像の削除
ヘッダー画像は思い切って削除しました。どうしようかちょっと迷いましたが、目指していたコンセプトが「シンプルでオシャレ」なものだったので、不要なものは一切排除することにしました。
不思議なことに、ブログも続けていると、だんだんシンプル化したくなってくるんですよね。個人の好みに依るかもしれませんが。
ヘッダー画像を削除した結果、あくまでも記事などがメインになった気がしています。ユーザビリティの点からも、ヘッダー画像で読者が気を削がれることもあるので、おもいきって削除して正解でした。
サイドバーを英語に変更
サイドバーの各モジュールのタイトルを英語にしました。
すべて英語にして大丈夫だろうか？読者が分かるだろうか？と悩みましたが、当ブログの読者は英語が分かる方も多いでしょうし、サイドバーにある程度の英語くらいなら、ほとんどの方が理解して頂けると判断しました。
サイドバーのモジュールのタイトルを英語にする場合の例を紹介します。大文字・小文字は、ご自身でお好きなようにアレンジしてください。
プロフィール
ABOUT
Meet 〇〇〇（例：Meet Mrs. G）
About Me
About the author
お問合せ
Contact
Contact Me
Contact Us
Inquiries
フォローする
Follow Me
最新記事
Recent Posts
Recent Articles
Latest Posts
What's New
Recent from（ブログ名） 例： Recent from Mrs G's Blog
人気記事・話題の記事
Popular Posts
Popular Articles
Most Popular
Now Buzzing
What's Popular Now?
What's Hot
Trending
Pouplar from（ブログ名） 例： Popular from Mrs. G's Blog
関連記事・おススメ記事
Related Posts
Related Articles
You may also like
Recommended Posts
Recommended for you
More from（ブログ名） 例： More from Mrs. G's Blog
注意すべきことは、ワードの体裁を統一させることです。たとえば、最新記事を Recent Posts としたら、人気記事は Popular Posts にする。ここで Popular Articles と Posts ではなく Articles を使ってしまうと整合性が取れません。この点だけ注意しましょう。
サイドバーのモジュールの順序を変更
サイドバーに置いてあるモジュールの順番を入れ替えました。
これまでは、著者のプロフィール欄が一番上でしたが、読者のユーザビリティを考えて、プロフィール欄は下の方に移動しました。一番上に「検索（Search）」、その下にSNSフォローボタン、その下に問い合わせフォームです。
自分が他のサイトを利用したときに、検索はなるべく上の方にあった方が分かりやすかったので、一番上に配置しました。読者が検索しやすいように、検索ボックスはページを開いたときに出てくる位置がベストだと思います。
問い合わせフォームもない方がスッキリするので、トップのナビゲーションメニューのABOUTの子カテゴリに設置することも検討しています。
トップページ＆アーカイブページのはてなスターを消す
トップページとアーカイブページのはてなスターを消します。
BEFORE
はてなスターを消すコードはこちらです。デザインcssに書き込んでください。
AFTER
消えてスッキリしました。
記事下のパンくずリストを消す
記事下にある「パンくずリスト」も消します。
BEFORE
パンくずリストを消すコードはこちらです。
AFTER
検索ボックス内のテキストを消す
デフォルトでは検索ボックス内に「記事を検索」という文字が入っています。これも消します。これがけっこう苦労しましたが、なんとかcssをいじっているうちに消すことができました。
また、検索ボックスに丸みをつけました。さらに、私のブログは背景色をつけているので、検索ボックスの中を逆に白に戻します。この辺はお好みで。ブログの背景色が白のままなら、検索ボックス内に薄い色を入れてあげるとコントラストができて利用者が使いやすいと思います。
BEFORE
これもcssに書き込みます。
AFTER
また、検索ボックス内のテキストのフォントも以下のcssコードで変更できます。私の使っているフォントですけど。検索ボックス内だけフォントが違うのがどうしても気になってしまったので。
以上、デザイン上でカスタマイズしたものです。少しでも参考になれば。
その他、リンクの色や、見出しなども変更しました。SNSボタンはモノトーンにしたかったのですが、モノトーンはなかなか見つからず、サルワカくんのデザインを参考に自作しました。
