【はてなブログ無料版導入３】はてなブログをカスタマイズ ヘッダー画像を作って設定しよう！
はてなブログでは、画像を用意して指定するだけで、簡単にブログのヘッダーとして設定することができるようになっています。
ヘッダー画像はブログの顔になりますから、こだわって作ってる人も多いみたいですね。プロのデザイナーに外注できたりもするみたいです。
私はさほどこだわりもなく、どちらかと言えばシンプルなほうがいいので、簡単に作れるやり方でやってみました。
以下解説していきます。
１.背景の素材を入手する
ありがたいことにネットにはフリーで使える画像素材を置いているサイトがたくさんありますので、その中から使えそうなものをダウンロードすればOKです。
２．加工する
画像編集ソフトを使い慣れている人ならいつも使ってるもので作業すればいいと思いますが、私はいいものを見つけてしまったのでこちらを使います。
インストールする必要もなくブラウザで使える画像加工サイトです。なんと便利な！
こちらから「簡単に遊べるPIXLR X」を選びましょう。
左の「画像を開く」から、保存した画像を呼び出します。
そして左のメニューから「切り抜き」選びましょう。
幅を1000、高さを200と入力します。
表示された枠をドラッグして、切り抜きたい部分に移動します。そして「適用」。
左から「テキスト」を選択し、テキストの挿入をクリック。
挿入する文字を入力し、色やサイズ、フォントなどを選び、位置を決めます。
「保存」を選び、「ダウンロード」。
はい、できました。
３．ヘッダに設定する
管理画面から「デザイン」＞「カスタマイズ」＞「ヘッダ」を選び、タイトル画像に設定します。
そして反映されました。
うーん、なんか余白があって微妙ですかね。
スマホでの表示も乱れた状態です。
ここはちょっと調整が必要みたいです。
４．調整する
余白の問題はこちらのコードで改善しそうです。
/* タイトル画像上下の余白 */
#blog-title {
margin: 0 auto;
padding: 0;
}
これを「デザイン」＞「カスタマイズ」＞「デザインCSS」に書き込みます。
そうすると
まだ余白が少しありますが、見栄えは十分かなと。
どうしても気になる人はこちらあたりを参考にしてください。
スマホ対応は、こちらあたりが参考になりそうです。
５.終わりに
いかがだったでしょうか。表示の調整はやったほうがよさそうですが、画像を作ってヘッダーにするのは難しくないですね。ただ今回一番の収穫はPIXLR Xに出会ったことかもしれません。こんな便利なツールがあったんですね。
さて、今回作ったヘッダー画像ですが、お気づきかもしれませんが、実はいまのところ使っていません。自分で作っといて難ですが、ちょっとカッコつけすぎました。
また改めて作るかもしれませんが、文字だけのシンプルなヘッダーもアリなのかなと・・・。
それでもこの記事が何かの参考になれば幸いです。それでは。
