Blogのヘッド画像を作る
Blogヘッド画像の作成講座です。
さえらのBlogのように
自分の好きなピグ風景を使ってもOKですし
ピグ画像を合成してコラージュにしても
楽しいと思います。
まず、基本を覚えましょう。
横幅は最大で800ピクセル
縦は小さくても構わないですが
ピグ風景を入れるなら
300～400ピクセルが妥当かと思われます。
横幅はアメーバのほうで固定されてますので
これ以上は大きくならないようです。
次に、ピグの撮影です。
ラブリーアベニューを参考にしています。
エリア標準
エリア拡大2回
エリア拡大4回
エリア拡大6回
上記写真を見てもらうと判りやすいと思いますが、
どの大きさで自分のピグを看板にするのかを決めます。
さえらのPC画面では
横幅1300ピクセルほどで表示されています。
この大きさの中なら
ヘッド画像の800ピクセルは
簡単に切り出せます。
拡大6回の画像で切り出してみます。
横幅800はさえらの画面なら↑の幅です。
その中から縦400ピクセルで取り出すと
↑こんな画像が切り出せます。
（原寸大ですので、クリックして確認してみてね）
ここにレイヤー機能で
Blogタイトルやサブタイトルの
文字を入れていきます。
（オリジナルのタイトル文字にしないなら
ここで終了でOKです。）
↑このように出来上がりました。
(横幅600に縮小してあります)
次はこれをスタンダードスキン(緑・青・桃・灰)か
ベーシックスキンに
貼り付けるだけです。
ブログ→デザインの変更→スキンの選択
アメブロでもカスタマイズの方法をUPしてますので
合わせて確認してくださいね。
画像を挿入するには
スキンのカスタマイズのヘッダ画像部分に
今作った画像をUPするだけです。
あとは、Blogの背景やサブカラムの背景の色を
自分の好きな色にして保存します。
これでヘッド画像挿入が終了しました。
この状態まで来ると
ブログのタイトルや説明の文字が
挿入した画像に重ねて表示されてます。
これを消す場合は「CSSの編集」を開き、
一番最後に
/*ブログタイトル文字を非表示*/ #header h1{ display:none;/*タイトルを非表示*/ } #header h2{ display:none;/*概要を非表示*/ } |
↑これをコピーして貼り付けてください。
もしくはアメブロ向上企画書さんの
CSS編集をもとにヘッド画像に
自分のBlogトップへのリンクをつけて
消す方法を取り入れてください。
以上で完成です。