こんばんみ！
初めましての方は初めまして。
初めましてじゃない人は、こんばんは。
カスタマイズに慣れてきた人は……いらっしゃいますか？
ということでライオンです。こんばんみ。
毎度お馴染みの画像です。
意味もいつも通りありません。
━─━─━─━─━─
さてさて。
SWK（サルでも分かるカスタマイズ）
第4回目です。
今回ですね。
やんわりと、ゆったりと解説していこうと思います。
前回は背景画像の設定をしましたね。
きっとオリジナルの背景画像がブログについたのではないでしょうか？
今回はブログのヘッダー画像について、解説を進めていきます。
ヘッダー画像のカスタマイズは割と簡単に出来て
初心者の方もたくさんやってらっしゃるのですが
僕個人の意見としては、ヘッダー画像は
ブログカスタマイズの中で一番大事なことだと思います！
ブログを開いたときに、一番最初に目に入るのがヘッダー画像ですからね。
読者の方は「そのブログを読むか否か」というのを3秒で判断するらしいですから。
ヘッダー画像を見て、ブログを見るかどうか判断される。
と言っても、過言ではありません(｀･ω･´)
逆に言えば、ヘッダー画像が上手いこといけばブログの雰囲気が
ガラッと変わること間違いなしです。
頑張ってカスタマイズしていきましょう(｀･ω･´)
注意事項 今回、背景をCSSを使って設定しますが
その際、使用するコードについて
『CSS勉強中スタッフのブログ』様のものを紹介させて頂きます。
著作権の問題がありますので
CSS勉強中スタッフ様のコードをそのまま載せることは出来ません。
一度CSS勉強中スタッフ様のブログに飛んで
コードを入手する行程が発生します。
ご理解の程をお願いします。
━─━─━─━─━─
さて、まずはヘッダーとはなんなのか？
ヘッダー画像とはブログの一番上部にある画像のことです。
今ご覧の僕のブログのヘッダー画像は
こんなん使ってます。
背景が透明で、文字と吹き出しだけを張り付けてる感じですね。
水玉模様の背景画像が、透明のヘッダーとマッチしてくれてると信じてます。
形式がPNGでサイズが横幅980×320ですね。
このヘッダー画像を用意して頂きます(｀･ω･´)
背景画像と同じように形式は
PNG
JPG
JIF
この３つのどれかでないといけません。
おススメはPNG形式がおススメです！
サイズとしては
横幅が980pxで、横幅ピッタリになります。
必ず980pxでないといけないわけではありません。
縦幅は200～350pxくらいでいいと思います。
僕のヘッダーで320pxなので参考にしてみてください。
今回、カスタマイズ解説用に適当にヘッダー画像を作りました。
サイズは980×300ですね。
凄いクオリティですね、しょぼ過ぎる(´・ω・｀)
解説用なので15分程度でささっと作成しました。
まあ、こんな感じでヘッダー画像を作成してみてください。
割と簡単に出来ると思います。
僕が頻繁に使ってる画像加工編集サイトを使用してもらったらいいかと思います。
初心者にも優しく、基本的な画像加工なら簡単に出来ます。おススメです。
どうやら、代わりにヘッダー画像を作ったりしてくれる方もいらっしゃるみたいなのですが
僕はヘッダー画像を代行して作ったりは致しません。ご了承ください。
基本的にはしません！
でも、普段からよくして頂いてる
アメンバーさんや読者さん、ピグ友さんの依頼なら
無下にも出来ないので、お引き受けするかもしれませんね！(｀･ω･´)
とにかく。
ヘッダー画像が用意出来た、というスタンスで話を進めていきます。
━─━─━─━─━─
では、実際CSSを使ってヘッダー画像を設定してみましょう。
まずはマイページ。
そして、マイページから『デザインの変更』を押してください。
前回、前々回と同じことをしてるので、もう場所は分かりますよね。
そして、デザイン変更画面。
CSS編集用デザインが適用されてますね？
では前回と同様『CSSの編集』をクリックしてください。
この画面になってくれたでしょうか？
前回の背景画像がアップロードされてますね。
では、今回も用意したヘッダー画像を、アップロードしてみましょう。
やり方としては、前回と一緒です。
参照を押して、画像を選択して、アップロードを押して頂くだけですね。
すると、このように背景画像の隣に、今回アップロードされたヘッダー画像が表示されると思います。
表示されたヘッダー画像の下に
『画像のパス』があるのは確認できますよね？
このパスも前回同様、あとで使うことになります。
では、CSSをイジりましょう。
今回編集するのはこちら。
（3－2）ブログヘッダー
と書かれた場所を編集していきます。
前回編集した（3－1）の一つ下の項目ですね。
この場所にコードをコピペします。
では、前回同様
CSS勉強中スタッフのブログ様、からコードをコピーして頂きます。
CSS勉強中スタッフのブログ（ブログのヘッダーに背景画像を敷きたい）
こちらの記事の半ばにある
番号
CSSを書くという箇所にあるコードをコピーしてきてください。
.skinHeaderArea……から始まるコードです。
コピーしてこれたでしょうか？
では、コピーしてきたコードをペースト（貼り付け）します。
もともと『ブログヘッダーに背景画像を敷きたいとき』と書かれた横にある
.skinHeaderArea{}は消してください。
そしてコピーしてきたコードをペースト（貼り付け）します。
上の画像と同じ様な形になれば、合ってます。
さらにコピーしてきたコードの中に
『画像の高さのpxをここに書く』
と
『画像のパスをここに書く』
と書かれた部分があるのが分かりますでしょうか？
『画像の高さのpxをここに書く』とある部分には
ヘッダー画像となる画像の高さのpxを入力します。
今回、僕の場合ですと、画像の高さは300pxなので、ここには300と入力します。
みなさんは、自分のヘッダー画像の高さを入力してくださいね。
『画像のパスをここに書く』の部分には
背景画像の時と同様、アップロードした画像のパスをコピペしてきます。
入力してみると、このような形になりました。
同じようになって頂ければ、いいと思います。
これでCSS編集は終了。
『表示を確認する』をクリックして、ちゃんと表示されてるかを確認した後
『保存』をクリックしてあげてください。
僕の場合、こんな感じになりました。
前回設定した竹林の背景画像の上に、緑のヘッダー画像がついてますね。
この画像サイズで980×300です。
980×200にすると、もう少し画像が細長い感じになります。逆もしかりです。
━─━─━─━─━─
少し応用編。ここからは少し応用的なことを進めていきます。
応用と言っても、手順としては同じようなことなので、気負いせずに
ゆっくりまったり、説明していきます。
ヘッダー画像をつけることに成功出来ましたね。
しかし、ヘッダー画像をよく見てください。
画像の左上側に
『山田のブログ
ブログの説明を入力します』
なんて表示されてるのが見えますでしょうか？
これは、ブログタイトルと、説明文がそのまま残ってる状態です。
別に残ってても問題ないんですが、ちょっと見栄えが悪いですよね。不格好。
なので、応用として、この文章を消してヘッダー画像をボタンのように押せるようにカスタマイズしようと思います。
さて、CSS編集をしていきましょう。
今回編集する部分はここ。
（4）その他、拡張
という部分です。
場所としては、一番下ですね。とにかく一番下。
『その他、拡張があれば記述』
と書かれた、下の部分にコードを記述していきます。
今回も
CSS勉強中スタッフのブログ様、からコードをコピーしてきて頂きます。
CSS勉強中スタッフのブログ（ブログのヘッダーに背景画像を敷きたい）
こちらの記事の応用編。
CSSの一番下にこのCSSを張り付けますと書かれた部分にあるコードをコピーしてきてください。
コピー出来ましたでしょうか？
そのコードを一番下の部分にペースト（貼り付け）してください。
今回は特に一部分を消したりする行程はありません。
そのままポーンと張り付けてあげてください。
そして
『画像の高さのpxをここに書く』
『画像のパスをここに書く』
を両方、先ほどと同じように入力してください。
聡明な読者様のことですから、同じ説明は省いてもきっと分かってくださいますよね。
そして、上の画像のようになれば、完成です。
『表示を確認する』を押して、確認した後。
『保存』を押して頂ければ、ブログに適用されます。
このような感じになりました。
左上にあった文章が消えて、画像そのものがボタンとして押せるようになりました。
画像をクリックして頂くと、ブログのトップページに飛べるように設定されてます。
こっちの方が見栄えもいいし、利便性も上がります。
ぜひぜひ、チャレンジしてみてください。
━─━─━─━─━─
さて、今回はヘッダー画像の設定を大きく2行程に分けて、説明してきました。
僕としては分かりやすく解説したつもりなんですが、どうでしょうか。
上手くできましたかね？
もし何か、不明な点があった場合はお気軽にコメントやメッセージでお尋ねください。
早急に返信・記事の改定などで対処致します。
背景画像、ヘッダー画像が付くと
結構、なんでしょうサマになってきてませんか？
さらに色々な場所をカスタマイズできます。
「ちょっと慣れてきたなぁ」という方はご自分でいろいろ調べて
カスタマイズしてみるのもいいかもしれません(｀･ω･´)
ここでご紹介してる
CSS勉強中スタッフのブログ様にも、その他いろいろなカスタマイズが解説されてます。
そちらの方も、ご覧になってみるといいかもしれません。
━─━─━─━─━─
どうでしょうか。
全4回になりました、サルでも分かるカスタマイズ。
少しでもアメブロカスタマイズに興味を持っていただければ、幸いです。
背景画像とヘッダー画像の解説だけ、やってみました。
まだまだカスタマイズは色々ありますが、全て解説してると膨大な時間を要するので
一旦、ここで終了と致します。
今後はご自分で、カスタマイズにご挑戦なさってください(｀･ω･´)
参考として、僕が普段利用させて頂いてるサイト様をいくつかご紹介します。
CSS勉強中スタッフのブログこのブログでも度々紹介してきました。
本当に基礎的なことを解説してくださってます。
初歩的なカスタマイズはここで勉強するといいと思います。
ただし、本当に初歩的なことばかりなので、物足りなさを感じる方がいるかもしれません。
★あもブログ★ クエスト締切が一目でわかる！カレンダー&カウントダウン僕も何度もお世話になりました。
あも様のブログです。とても可愛らしいデザインなので、一見の価値アリです！
様々なカスタマイズを丁寧に解説してくださってます。
カスタマイズ以外にも様々なコンテンツがあるようなので、おすすめのブログです(｀･ω･´)
アメブロカスタマイズで成功するブログを作ろう有名なわざめーばさんのブログです。
『アメブロ カスタマイズ』と検索すると一番上に表示される程の有名なブログですね。
豊富な量のカスタマイズを解説されております。
わざめーばさんのカスタマイズを色々使っていけば、素敵なブログに近づけると思いますよ！
ただ、解説がかなりさっぱりしてると言いますか
「ある程度、基礎が分かってる人用」みたいな雰囲気だと思います。
イチから十まで、説明してくれるわけではありませんので、
「ん？これどういうことなんだろう」みたいなことが多々あるかもしれません。
慣れてきた人におススメします。
リアナのカスタマイズ日記（CSS編集用デザイン）リアナさんのブログです。
こちらも多種多様なカスタマイズを解説されてるブログです。
他にないカスタマイズなんかを解説なさってます。
ある程度、カスタマイズが進んで
「もっと、なんか変えたいなぁ」と考えてらっしゃる方におススメします。
以前僕が設定した『記事のコピペ禁止』も、こちらのブログで解説されてますよ。
━─━─━─━─━─
こんなもんでしょうか。
紹介したブログ以外にも、たくさんの方がブログで解説されてます。
もっと！という方は是非、調べてみてください(｀･ω･´)
あと
「このカスタマイズをしたいんだけど、よく分からない」
みたいなものがあれば、連絡下されば、追加記事で解説することがあるかもしれません。
難しい場合は、どうぞご連絡下さい。
僕の分かる範囲でご返答します。
では。
お疲れ様でした。
ライオンでした。
thank you bye