記事作りを優先してサイトの見た目は後回しにしていました。多分それがあるべき姿なんだと思います。サイトの良し悪しは見た目ではなくコンテンツです。例えば私のAndroidスマホのホーム画面を右にスワイプすると左から出てくるGoogle Discoverによく出てくるブログサイトが以下なんですが、多分株主優待ブログでは有名なサイトなんだと思います。
![](https://careerproto.com/wp-content/uploads/cocoon-resources/blog-card-cache/2bf9110d9cb1a64290612d1dc850346c.jpg)
これって私が今まさに使っているテーマCocoonとスキン「COLORS (ブルー)」のほぼデフォルトそのまま使用しているのでは。。やっぱりブログは見た目ではなくコンテンツだと思います。
と言いながらも、サイト設定3日目にCanvaで私がやっつけで作ったホームイメージと、現在のサイトデザインがあまりにも離れているのもどうかと思い、
LINEスタンプ作りで得たInkscapeスキルも活用して、
ヘッダー背景画像・ヘッダーロゴ・ホームイメージを時間かけずに一気に作っておきました。
Gimpでヘッダー背景画像を作る
LINEスタンプ作りでは結局使いませんでしたが、使うつもりでGimpをインストールしていたので折角なので今回は使ってみます。
![](https://careerproto.com/wp-content/uploads/cocoon-resources/blog-card-cache/a3328d8cc55209fd883d30bdcc25ec90.png)
Googleフォトからダウンロードしたそのままの画像では大きすぎるので横を1200pxに縮小します。
![](https://careerproto.com/wp-content/uploads/2022/02/image-53.png)
ヘッダー背景画像やホームイメージとしては縦もこんなにいらないので、縦は630pxにします。矩形選択で必要な領域を選択し、「選択範囲で切り抜き」を実行すると画像が矩形選択領域で切り抜かれます。
![](https://careerproto.com/wp-content/uploads/2022/02/image-54-1024x612.png)
あとはフィルタなどを好みでかけていきます。私の場合はロゴが目立つように画像をもう少し明るく(白っぽく)したかったので「明るさ-コントラスト」を調整しました。
![](https://careerproto.com/wp-content/uploads/2022/02/image-55.png)
明るさとコントラストの値を大きく(右側にドラッグ)すると、明るく(白っぽく)なります。
![](https://careerproto.com/wp-content/uploads/2022/02/image-56.png)
これでjpegとしてエクスポートするとヘッダー背景画像は完成です。この画像はホームイメージにもそのまま流用します。
Inkscapeでヘッダーロゴを作る
Inkscapeの使い方は以下のLINEスタンプの作り方でも紹介しています。
文字を入力して好みのフォントを選択し、「フィル/ストローク」で色を付けます。ポイントは、ストロークの塗りの色は白、ストロークのスタイルの幅を設定して、背景画像に同化して読みにくくなるのを防ぎます。もう1つのポイントは、順番は上段真ん中の「ストローク、フィル、マーカー」にするとストロークの幅を広く取っても文字が潰れません。
![](https://careerproto.com/wp-content/uploads/2022/02/image-57-1024x356.png)
最後にロゴをすべて選択して「PNG画像にエクスポート」で選択範囲だけをエクスポートしたら完成です。
![](https://careerproto.com/wp-content/uploads/2022/02/image-58.png)
次のホームイメージにも使用するので、svg形式でも保存しておきましょう。
Inkscapeでホームイメージを作る
ヘッダー背景画像とヘッダーロゴを組み合わせてホームイメージを作ります。まずはInkscapeでヘッダー背景画像のjpegファイルを開きます。Inkscapeをもう1つ開いてヘッダーロゴのsvgファイルも開いておきます。ヘッダー背景画像を開いてあるInkscapeへ、ヘッダーロゴのInkscapeからコピー&ペーストして中央に配置し、サイズも調整します。
![](https://careerproto.com/wp-content/uploads/2022/02/image-59-1024x477.png)
「PNG画像にエクスポート」でページをエクスポートしたら完成です。
Cocoonで設定する
公式サイトの以下を参考にさせていただきました。ロゴジェネレーター使えばよかったかな。。次回リニューアル時に参考にします。。おすすめされていた通りTinyPNGでのサイズ圧縮はやっておきました。
![](https://careerproto.com/wp-content/uploads/cocoon-resources/blog-card-cache/e79e084e5b8db7508913e404f2f1a874.jpg)
![](https://careerproto.com/wp-content/uploads/cocoon-resources/blog-card-cache/366778a9c6799668cebb0ff8c1856fca.jpg)
![](https://careerproto.com/wp-content/uploads/cocoon-resources/blog-card-cache/88eac1568a2385283b4f2bc38f70b888.jpg)
WordPressのダッシュボードから、「Cocoon設定」の中の「ヘッダー」タブを選択します。
![](https://careerproto.com/wp-content/uploads/2022/02/image-60.png)
必要箇所を設定していきます。「高さ」と「高さ(モバイル)」は保存して見てみて微調整しました。背景で見にくくなったのでキャッチフレーズは表示しないようにしました。
![](https://careerproto.com/wp-content/uploads/2022/02/image-61.png)
![](https://careerproto.com/wp-content/uploads/2022/02/image-62.png)
「OGP」タブの「ホームイメージ」も設定したら完了です!
![](https://careerproto.com/wp-content/uploads/2022/02/image-63-1024x569.png)
![](https://careerproto.com/wp-content/uploads/2022/02/image-64.png)
改めて前と比較すると、同じスキンとは思えないくらい雰囲気変わりましたね。
これでサイトのヘッダーとホームイメージがほぼ同じになりました。しばらくはこのままでいけそうです。今はロゴも手作り感があって味があっていいと思っていますが、気が向いたらロゴジェネレーターで作り直すかもしれませんが。。いやいや、それよりも記事の充実を優先しなければ。