ミセスGのブログ

海外ドラマ&映画の感想、世の中のお話

はてなブログのオシャレなテーマ「Thumnail2」でWordpress風にするデザインカスタマイズ方法

f:id:oclife:20170901060820j:plain

先日導入した、はてなブログのオシャレなテーマ「Thumnail2」

結論から言いますと、大変気に入っております。

Thumbnail2 - テーマ ストア

rokuzeudonさん作です。

サムネイル画像が大きい&2カラムなテーマ「 Thumbnail2 」をつくった - LOGzeudon

rokuzeudonさんのブログもとてもオシャレなので、是非参考にしたい。

Thumnail2を自分の色に染めるため、この3日間で施したカスタマイズを紹介します。

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

f:id:oclife:20170901104836j:plain

はてなスターを消すコードはこちらです。デザインcssに書き込んでください。

 

AFTER

消えてスッキリしました。

f:id:oclife:20170901105023j:plain

 

記事下のパンくずリストを消す

記事下にある「パンくずリスト」も消します。

BEFORE

f:id:oclife:20170901110307j:plain

パンくずリストを消すコードはこちらです。

 

AFTER

f:id:oclife:20170901110907j:plain

 

検索ボックス内のテキストを消す

デフォルトでは検索ボックス内に「記事を検索」という文字が入っています。これも消します。これがけっこう苦労しましたが、なんとかcssをいじっているうちに消すことができました。

また、検索ボックスに丸みをつけました。さらに、私のブログは背景色をつけているので、検索ボックスの中を逆に白に戻します。この辺はお好みで。ブログの背景色が白のままなら、検索ボックス内に薄い色を入れてあげるとコントラストができて利用者が使いやすいと思います。

BEFORE

f:id:oclife:20170901111444j:plain

これもcssに書き込みます。

 

 AFTER

f:id:oclife:20170901112248j:plain

また、検索ボックス内のテキストのフォントも以下のcssコードで変更できます。私の使っているフォントですけど。検索ボックス内だけフォントが違うのがどうしても気になってしまったので。

 

以上、デザイン上でカスタマイズしたものです。少しでも参考になれば。

その他、リンクの色や、見出しなども変更しました。SNSボタンはモノトーンにしたかったのですが、モノトーンはなかなか見つからず、サルワカくんのデザインを参考に自作しました。

CSSで作る!押したくなるボタンデザイン100(Web用)