Cocoonブログのヘッダーロゴを最も簡単に設定！《Windowsペイントで文字入り画像を作るだけ》

PCにまともに向かったこともなかった私が、いつの間にかこうしてブログを開設できたのは、Cocoonという無料テーマのお陰です。

ブログってどこに何書くん？

から始めた超初心者でも、詳しいことはわからないままに、たぶん必要最低限の設定を見よう見まねで進めた結果・・・

あら！

なんかかっこいいノート(？)ができたわ

これがサイトってやつですか

ホーム画面の体裁作りから記事の作成方法まで、本当に驚きでした。

ここに書き込めばあそこに反映されて、ここをクリックするとあっちに飛んで、これとあれとは連動してて・・・

こんなこともできるの？　あんなこともしてくれるの？

もう、どなたか存じませんが、タダでここまでしていただいて、ホントにありがとうございます

と、頭の下がる思いでした。

たった一つ、たった一つだけ当初から少し気になって、「は？これは…どうするの　え？これは…できないの」と、不満に思ってしまったこと。

それが、ヘッダー画像上のブログタイトルの文字です。

もちろん、背景画像に適当な写真を設定できただけでも、これで初めて作るサイトのタイトル画面としては十分ではありました。

ただ、「できればもう少し大きな文字にしたいな。書体は変えられないかな。」と思ったものの、それがCocoonの設定画面ではできないと分かったので、超初心者の私にふさわしい、できるだけ簡単な方法を探してみました。

新たにCSSで変更したり別にアプリを見つけたりするわけでもなく、ただいつものPCを開いただけで、一番横着で手っ取り早く簡単に目的を果たす方法がコレじゃないかな、と思います。

ヘッダー画像に文字を入れる《Windows ペイントを使用》

背景に使う画像をペイントで開いて、サイズを決める

1. Windowsに標準でついているアプリ『ペイント』を起動させる
2. 『ファイル』→『開く』で、あらかじめデスクトップに保存しておいた画像を選択し、表示させる
3. 『イメージ』グループの『トリミング』や『サイズ変更』を使って、画像の大きさを整える

画像サイズは、出来上がりのヘッダー画面の大きさを考慮して、横×縦を1600×300pxくらいにしました。

文字を入れて、フォントやサイズを決める

1. 『ツール』グループの『A』(テキスト)をクリックする
2. ブログタイトルを入れたい部分をクリックするとテキストボックスが現れるので、そこに文字を入力する
3. 入力した文字をドラッグすると、フォントの種類やサイズ、色などを変更することができる
4. テキストボックスの枠線をクリックすると、ボックスのサイズ変更や移動ができる

出来上がった画像を保存してCocoonのメディアライブラリに入れておく

画像をヘッダーロゴに設定する

1. 『Cocoon設定』→『ヘッダー』タブを開く
2. 『ヘッダーロゴ』の『選択』をクリックして、メディアライブラリから『画像を選択』する
3. 『ヘッダーロゴサイズ』は、幅：1600 × 高さ：300 にしました
4. 画面上または下にある『変更をまとめて保存』をクリックして完了！
5. プレビューを確認しましょう

まとめ

今回は、とにかく手数を少なくできるだけ簡単に、ヘッダー画像を自分好みに変えてみました。

Windows標準搭載のアプリを使ってブログタイトル文字のフォントやサイズを自由に決め、あらかじめ画像の中に書き込むことで、それをヘッダーロゴ画像として挿入するだけという手順でした。

作る画像のサイズと、背景画像として挿入しないことには注意が必要ですが、プレビューを確認しながら難なくできる方法だと思います。

ただ、ヘッダーの背景画像ではなくあくまでもロゴ画像なので、画像幅が最大1600pxとなり、周りに若干の余白ができてしまいました。

これはもちろん、ヘッダー背景画像とヘッダーロゴを別々に選択・挿入することで解決できると思われますので、次回はぜひ、その方法を紹介したいと思います。