これを見れば完璧!ブログのヘッダー画像の変更!

どうもよねすけデス。

ヘッダー画像の変更という事で今回は、ヘッダーの画像入手〜加工〜設定まで全てを網羅した内容になります。

一番大変なポイントは画像の加工ですかね。

ただ作業自体は結構楽しいので、大変だけど苦痛ではなかったです。

初心者にもわかりやすい内容にしたのでこれを見ればヘッダーの編集は完璧なはず!

ではどうぞ!

追記:ブログタイトル変更に伴い、現在は記事内容のヘッダーは使用しておりません。

スポンサーリンク

ヘッダー用画像入手

まずはヘッダーに使う為の画像を入手。

僕はぱくたそでゲットしました。フリーの素材なのでブログで使用しても問題ないので安心ですね。

サイトに行ったら自分の好きな画像を選びます。

最終的に帯状の横長画像になるので、その辺を考慮して選ぶのがいいかも。

選んだ画像がこれ。

サラリーマンがたくさんいて、1人だけ雨から抜け出してガッツポーズしている雰囲気がイメージ的に合っていたのでこちらにしました。

こちらを選んでダウンロード!

ダウンロードしたらデスクトップとかに置いておけばおkです。

画像加工

続いて画像の加工に移ります。

PhotoScapeというアプリが好評でしたので、僕もこちらを利用して編集しました。

確かに直感的に編集できて、初めての方でも簡単に操作できると思います。

まだまだ使いきれていない機能がたくさん有りそうなので、これからもっと使用頻度が増えそうなアプリですね。

では早速編集していきます。

ステップ1  画像のサイズ変更

まずはさっき選んだ画像をPhotoScapeの【写真編集】のトップにドロップ。

①サイズ変更の中の

②縦横比を固定のチェックボックスにチェックが入っているか確認する。チェックが入っていればおk

③幅を950にする。すると勝手に高さが決まるのでそこはいじらなくておk。

ステップ2  切り抜き

このままだとヘッダーのサイズに合わないので、横長の帯状にする為に画像を切り抜く。

①切り抜きを選んで

②高さが250になるまでグイーンと伸ばす。好きなところに位置を合わせて

③切り抜きする

ステップ3  画像に加工を加える

このままではちょっと味気ないので、自分なりに加工していきます。

僕はフレームに帯をいれたり、フイルムっぽく光らせてみたりしました。

ここではそれぞれやりたい事、出したい雰囲気に合わせて色々やってみるのがいいと思います。色々できて案外楽しいですよ。

ステップ4  ブログタイトルを挿入する

次はブログタイトルの挿入です。

テキストを選ぶと入力画面がサイドバーに出てくるのでそちらに入力。

こちらも文字サイズ・色等は自分の出したい雰囲気に合わせて加工してみましょう。

フォントも色々変えてみて好きな雰囲気の物を使用するのがいいでしょう。

フォントもたくさん合って選びきれないですけど決めている最中が一番楽しいですからねw

ステップ5  保存する

ブログタイトルの挿入まで終わったら完成した画像を保存するんですが、ここで注意していただきたいのが、必ず【別名で保存】するという事。

そうしないとオリジナルの画像に上書保存してしまう為、あとでまた新たに編集し直したいと思った時に画像のダウロードからやり直さないといけなくなります。

これがかなり面倒なので。

ヘッダー設定

では最後に、作成した画像をブログに貼り付けてみましょう。ちなみにWordPressでテーマはSimplicityを使用しています。

まずはダッシュボードの【外観】→【ヘッダー】から

ヘッダーの高さpx

これを僕の場合は320にしました。

プレビュー見ながら高さを微調整して、いい感じの高さを見つけていくといいですね。

画像を選択して「ロゴを画像にする」のチェックをいれておくと、実際のブログ内でもタイトルクリックでトップに移動できるようになります。

まとめ

これで、ブログのヘッダーの加工・設定は終了になります。

加工、設定共にまだまだ深く掘り進めればいろんなカスタムができると思います。

はっきり言って僕はそういうセンス皆無ですw

みなさんセンスをむき出しにしてセンス良いヘッダーを作りましょう!

スポンサーリンク
押すのじゃ!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

%d人のブロガーが「いいね」をつけました。