晴れ晴れ生活のつくりかた研究室

プロカウンセラー歴15年以上のアラフォーパパのブログ。読者も私も前向きになれる記事を書きたい。純粋な気持ちです。

初心者ですが、「ヘッダー画像」「グローバルナビ」などをカスタマイズしました!【はてなブログ】【Brooklyn】

 

こんにちは。ハレバレです。

 

ブログを始めて、1ヶ月がたちました。あっという間ですね。

 

これまでブログを一度でも見てくれた皆さま、ありがとうございます。

また、読者になってくれた皆さま、1番の励みになっています。感謝です。(*^^*)

 

自分で記事を書くようになって、皆さんのサイトを以前よりもたくさん読むようになりました。

 

皆さんのサイトを見ていると、「綺麗」「個性が出てる」「読みやすい」など、凄いなぁと思います。

同じ文章でも、見せ方で全然違うし、素晴らしい記事であっても目に止まらなければ、勿体無いな…と、得心したわけです。

 

それで、私のサイトも自分がお気に入りのデザインにしたい!と思い、色々と調べて、少しずつカスタマイズを進めました。

 

ようやく、超初心者の私にとって、一旦満足できるところまで来ましたので、私が今日まで行った事を、ご紹介します。

 

初心者の方には参考になる部分があるかもしれません。

デザインテーマの設定

公式テーマには「これだっ!」というものがなかったので、ストアの中からテーマを選びました。

 

私はシンプルなものが好きで、何個か使ってみたのですが、今は「Brooklyn」に落ち着きました。見た目もカッコイイし、何というか、邪魔な装飾がなくて、一番しっくりきました。

 

Brooklynを初めて設定した時は、私のブログの見栄えが突然洗練されて、びっくりしました。目をキラキラさせて自分のブログを眺めていました。(^^ゞ

 

私が特に気に入っているのは、見出しです。吹き出しで文字を囲んでいるため、本文とのコントラストがはっきりしているからです。サイドバーの吹き出しもお気に入りです。

 

うん。人気のテーマなのも頷けますね!

 

後から、知ったのですが、デザインテーマは人気のものから選ぶ事が推奨されているんですね。理由は、カスタマイズの方法などを紹介しているサイトを見つけやすい事などです。

blog.hatena.ne.jp

レスポンシブデザインの設定

私はスマホをメインに使っていますので、絶対に、Brooklynをスマホにも反映させたいと思っていました。

 

その場合は、PCの管理場面の

「デザイン」→「スマートフォン」→「詳細設定」の「レスポンシブデザイン」にチェックを入れれば良いです。

※レスポンシブデザインとは「スマホでもPCと同じデザイン設定でブログが表示される」ものです。

 

幸いBrooklynはレスポンシブデザインに対応していたので、簡単に反映ができました。やっぱり人気のテーマから選んでよかったです。(^^♪

 グローバルナビの設置

「グローバルナビ」とはヘッダータイトルの下にあるメニューバーです。

 

先輩ブロガーの皆さんのページに設置されていたので、「これいいな~」と興味深々で、いつか設置したいと思っていました。皆さんに読んでもらいたい記事を、カテゴリー別に分りやすく表示したかったのです。

 

私のサイトでいうと、タイトル下の「コミュニケーション」「こころのケア」「からだのケア」などの部分です。

 

スマホは少し分かりにくいのですが、黒いバーの右メニューをクリックすると、表示されるものです。「スマホの画面サイズに合わせた絶妙なデザインだな~」とお気に入りです。(^^)/

 

 グローバルナビについては、Brooklynの開発者シロマティさんの記事をみて、そのとおりに設定をしました。

www.notitle-weblog.com

CSSコードをコピペするだけで良いのですが、リンク先やメニュー名などは自分で入力をする必要があります。

(私ができたくらいなので、多分誰でもできます!)

当サイトのスマホ画面

f:id:harebarepapa:20190317202255j:image

f:id:harebarepapa:20190317202303j:image

読者ボタンの設置

読者ボタンの設置も、上のシロマティさんの記事でコピペ用のCSSコードが紹介されています。

 

こちらもコピペの後に、ご自身のIDやURLを記入する必要があります。

 

その他、シェアボタンも視覚的なオシャレデザインにカスタマイズができるようになっています。私はSNSをあまり使わないので、今回は見送りましたが…(^^ゞ

ヘッダー画像の設定

最後にヘッダー画像です。これが一番やりたかったことです。

 

文字や背景の色、ヘッダーの上下のライン等の変更は、色々なサイトをみて設定することができたのですが、やっぱり、私自身がイメージするタイトル画面を作りたい!と思い、アラフォーの職業人のくせに、夜更かしをして色々と試しました。

 

そして、理系頭巾さんのサイトにたどり着き、さらに、無料で画像作成ができるCanvaの存在を知ることができました!

www.rikei-zukin.com

また、月城さんの記事も、とっても参考になりました。

www.tukishiro01.com

後はもう、Canvaで納得のいくデザインを何度も何度も何度も作り、晴れて、ヘッダー画像が完成しました。

今の私のスキルとブログに作成に費やせる時間を考えると、満足しています(*^-^*)

 

注意する点としては

  1. PCのヘッダー画像は 1000(width)×200(height) [px]のサイズで作成すること。
  2. 1のサイズにしても画像がヘッダーの画角にピッタリとはならず、余白ができてしまうこと。(※私が知らないだけで、ピッタリさせる方法がある可能性は高いですが…)。なので、ヘッダーの背景色と、作成した画像の背景色を同じにすること。
  3. スマホのヘッダー画像の作成時は350(width)×200(height) [px]が推奨されているので、別に作成すること。

です。

 

ただし、私は、レスポンシブデザインのため、スマホ用の画像を作ってもPCの画像が反映さてしまう…という事態に気づきました。かといって、レスポンシブを解除するとBrooklynまで解除されてしまう…というジレンマに頭を抱えました。

 

結果、「考えるよりも手を動かそう!」と、スマホにも上手く表示されるよう、文字やロゴの位置を微調整し、何度もトライをしながら今の形にたどり着きました。

 

ここが一番面倒でしたが、PCヘッダー用の画像の中心部がスマホに使われる用だったので、タイトル文字を中心部に集め、両サイドはロゴを使うというバランスにしました。

PCとスマホの両方から私のブログを見ていただけると、よくわかると思います。

おわりに

今日は超初心者の私がサイトをカスタマイズした状況をご紹介しました。

 

すでにご存じの方が殆どだと思いますので、あまり需要はないかもしれませんが、一人でも参考になる方がいれば幸いです。

 

本日もご覧くださって、ありがとうございました。