しあわせ情報室

日々の子育てや生活を楽しんで、明日がもっとしあわせであるように、中年男子が考えることを書いています。

はてなブログのデザインテーマを再検討。巡り巡って、「Smooth」+「タイトル画像の変更」になりました。

スポンサーリンク

はてなブログのデザインテーマを「Smooth」にしてから3ヶ月たち、少し個性を出したいなといろいろやり、結局、「Smooth」+「タイトル画像の変更」に落ち着きました。


レスポンシブデザインに対応している公式テーマの中で、シンプルな2カラム

まずは、テーマはスマホやタブレットでもPCと同様な見え方になるレスポンシブデザインに対応していてほしいところです。

レスポンシブデザインに対応している公式テーマは、「はてなブログ開発ブログ」によると、2016年3月9日現在で、

* Journal-Pink
* Block Memo
* Navy Blue
* B!KUMA
* Reach
* Terminal
* Evergreen
* Arrow
* 寿司ゆき

staff.hatenablog.com

加えて、これ以降に追加された

* Life
* Push-up
* Smooth

といったところでしょう。

このうち、シンプルな2カラムのテーマは「Reach」「Smooth」のみのようです。本文の読みやすさとサイドバーの見えやすさを比べて、やっぱり、「Smooth」の方がいいな、となりました。

 

※いろいろ試す中で、公式テーマでない「Sentence」もインストールしてみました。あの勝間和代さんが使っているので、まぁ安心だろうと。しかし、ヘッダにタイトル画像を設定すると、一発ではブログ全体の幅にぴったり合いません。調整すればできるのでしょうが・・・。こういう点が公式テーマを選ぶ理由のひとつです。


ヘッダにタイトル画像を設定

「Smooth」はデフォルトのデザインテーマなので、手っ取り早く個性を出すには、ヘッダのタイトル画像を変更することかと思います。

「管理画面>デザイン>カスタマイズ>ヘッダ>タイトル画像」から画像をアップロードすると、いとも簡単に設定完了です。あれこれ考えずとも、ブログの幅にぴったりで、タイトルのフォント色も自動で変わりました。

写真は、過去に3度も行ったお気に入りのリゾート、マレーシアのランカウイ島のタンジュンルービーチです。


現在の設定のまとめ

・デザインテーマ「Smooth」
・背景色は白
・ヘッダのタイトル画像を変更
・サイドバーのカテゴリー表示は変更せず(今後見直すかも)
・記事のフォントサイズを18pxに設定
(「管理画面>デザイン>カスタマイズ>デザインCSS」に以下を追記)

/*文字のサイズ*/
.entry-content {
font-size:18px;

 ・記事下にコピーライトを設定
(「管理画面>デザイン>カスタマイズ>デザインCSS」に以下を追記)

/*コピーライト*/
#copyright {
padding: 20px;
text-align: center;
font-size: 14px;

 (「管理画面>デザイン>カスタマイズ>フッタ」に以下を追記)

<!-- コピーライト -->
<div id="copyright">©2019 しあわせ情報室 All rights reserved.</div>

 

ついでに、プロフィールの写真も変更

旧ブログからペンギンの写真を使っていましたが、せっかく息子が幼稚園時代に書いてくれたイラストがあるので、設定してみました。


まとめ

デフォルトのテーマでも、タイトル画像とブロフィールの写真を変えただけで、ずいぶんと違う印象になったかと思います。手をかけるのは一旦これくらいにして、あとは、取り上げる話題や書く内容で、個性が出るように励みます!


▼ブログ整備関連記事

 

▼参考図書

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook