【ブログの装飾】ヘッダー部分にタイトル画像を設定する方法
2016/04/08
たのちんのブログデザインの考え方をベースにブログの装飾をしていくことにした、たのちん管理人なむ。
たのちんでは、背景やヘッダー画像の設定、ロゴやアイコンなど【デザイン】に関する設定は、テーマと子テーマの設定後に行っています。デザイン性の高いテーマや子テーマを使用する場合は、先にそちらの設定をしてしまってからの方が雰囲気が合わせやすくなると思います。
＊【テーマ】WordPressテーマ「STINGER5」のインストール方法
＊【子テーマ】STINGERの子テーマ「SIMPLESTER」のインストール方法
＊【子テーマ】エックスサーバーで子テーマのテーマフォルダを作成する
スポンサーリンク
Contents
まずは雰囲気を決める画像を用意する
基本的なレイアウトや構成はWordPressのテーマを導入することで整いますので、大幅に変更することはないのですが、画像を用意することで簡単に印象を変えることができる部分をカスタマイズしてみます。
|
１．ブログの背景に壁紙画像を設定する方法 ２．ヘッダー部分にタイトル画像を設定する方法 ←コレを設定します ３．目を引くタイトルロゴ画像を設定する方法 ４．ブログの目印！アイコンやファビコンの作り方 ５．アバターの作成とコメントアイコンの設定方法 |
ヘッダーの画像を設定してみる
ヘッダー画像とはどの部分でしょうか？
実は今のたのちんは、ヘッダー画像の設定をしていません。
してみると…
このようになります↓
すなわち、この部分がヘッダー画像ということになります。
ヘッダー画像の真下にあるカテゴリーごとのリンク（グローバルナビ）までは、ブログ内のどこのページに移動しても常に固定で表示される、ブログの顔の部分になります。
ヘッダー画像があると、ブログに来られた方はどのページからアクセスしても必ずその画像を目にしますから「このブログといえばこの画」というようなブランディングにとても有効だと思います。
たのちんも開設当初はヘッダー画像を設定していました。
しかし、今は外しました。理由は３つです。
１．ブランディングに役立つほどの画像がなかった
これ見たらたのちんだよね！というほど推したい画がなかったんですね。
当初は適当にそれっぽい画像を使用していましたが、なんだかしっくりきませんでした。
オーダーメイド賃貸住宅が形になって、たのちんのエンブレムでも創ったらそのとき考えようと思いました。笑
２．思いのほか幅をとる
上の画像を見てもらったらわかると思いますが、ヘッダー画像を含めたグローバルナビの下部分まではページ移動のたびに必ず表示される部分になります。
少し広くないですか？
大して見せたくもない画像に押されて、本当に見てもらいたい記事の部分をだいぶスクロールしてもらわなくてはいけません。
３．画像が多すぎて少しうるさく感じた
たのちんは記事にもサイドバーにも割と画像を多く使っています。
文字のみよりも視覚に訴える画像がある方がわかりやすいかな？と思ってそうしているのですが、必要な画像はともかくヘッダーの目立つところにそれほど重要でない画像はいらないかな…。と思うようになりました。
そういう3点の理由でたのちんでは今 ヘッダー画像を設定していませんが、ブログの顔になる画像がある場合、本文やサイドバーなどに画像をあまり使わない場合やブログが殺風景でさみしいというような場合にはヘッダー画像の設置は有効だと思います。
ヘッダー画像の設定方法
① 素材を準備する
ヘッダーに使う画像を準備します。
自分で撮影したブログ専用の画像があればそれが一番いいと思いますが、適当な画像がない場合はフリーで使える写真素材を活用させていただくのがいいかな？と思います。
ヘッダー画像だけ制作してくれるようなデザイン会社さんもあるみたいですので、オリジナルでブログの顔を作りたい方は活用してみるのもいいかもしれません。
ブログで使う画像を自分で用意できないときには、たのちんでは以下のようなフリー素材サイトを利用させていただいています。
＊参考：ぱくたそ
＊参考：写真AC
どちらも、商用利用可能・クレジット表記不要の写真素材サイトです。
高クオリティの写真素材が無料で利用できますから、よく利用させていただいています。
写真素材には著作権が存在しています。加工や使用に制限がある場合もあります。
素材サイトの利用規約などをよく確認して利用することが必要です。
＊参考：ぱくたそのご利用規約 写真ACの利用規約
② 画像を加工する
ヘッダー用の画像はサイズが決まってます。
使用しているテーマによって違うと思いますので、確認してサイズを調整する必要があります。
たのちんで利用しているテーマ「STINGER5」の場合は、980px×250pxが推奨サイズです。
子テーマ「SIMPLESTER」の場合は、1116px×270pxです。
画像のサイズ変更はWordPressの機能を使って行うことが可能です。
トリミングやサイズ変更はペイントでも簡単にできます。
文字を入れたりぼかしなどのエフェクトを入れたい場合は、「バナー工房」などの画像加工サイトを利用させていただいています。
他にも画像を加工するツールはたくさんあります。
いろいろ試して使いやすいものを利用していただければいいと思います。
③ ヘッダー画像を設定する
画像の用意ができたら、ブログに実装します。
まずはWordPressにログインして、サイドバーの外観＞カスタマイズをクリックしましょう。
カスタマイズ画面が出ますので（STINGERの場合）、「ヘッダー画像」をクリック。
新規画像を追加します。
用意したヘッダー用の画像をアップロードします。
アップロードされているヘッダー用の画像を選択します。
プレビューの画面を確認してOKなら保存して完了です。
無事設定完了しました。
おつかれさまでした(*´ω｀)
その他の装飾はこちらです
＊【ブログの装飾】ブログの背景に壁紙画像を設定する方法
＊【ブログの装飾】目を引くタイトルロゴ画像を設定する方法
＊【ブログの装飾】ブログの目印！アイコンやファビコンの作り方
＊【ブログの装飾】アバターの作成とコメントアイコンの設定方法
機能面の拡張はプラグインやテーマのカスタマイズで
＊３．プラグインをインストールしてブログの機能を強化
＊４．プラグインを使わずにブログの機能を強化