なんとなーく初心者な私が必死にブログ改造を行いました(´・ω・`)ノ
お友達にお手伝いはしてもらったけど、分かりやすいので自分のメモ用にと思って記事書きます！
んと、まずブログ入った瞬間
「わっ 可愛い！」って目に入るブログは個人的にヘッダー＆背景だと思っております！
まぁきっとほとんどそうですよね∑（´A｀ ）ｗ
デザインっていう部分が、私はどうもテンプレートっていうのが苦手で・・苦手というか個性がないなーって思っちゃって、それなら自分の好きなイラストとか写真をブログの顔にしたくないですか！
そんなアメブロガーさんに(´ ▽｀)
というか、もう凄く綺麗に作ってらっしゃるサイトがあるので、主にはそこを見てくださいｗ
アメーバスタッフさん？の
「CSS勉強中スタッフのブログ」私もここを見てから、アメブロのデザインっていうのに興味をもつようになりました！
元々web上のデザインとかそゆのが好きなんですが！知識は初心者下の下なのでｗ
あ、ちなみに根本のデザインはブログ管理画面から
「デザインの変更」そうすると下のほうに
「カスタム可能」っていう画像がおりますのでそこをクリック！
そこから一番左上の
「CSS編集用デザイン」っていうのがあるのでこれを選んでくださいねっ。
編集も同じ画面からいけまする。
ある程度、スタッフブログさんを見れば改造できるんですが
私は散々紹介しているイラスト！
せっかく描いて頂いたイラストを無駄にはしたくない！
ので、お友達にお手伝いしてもらいましたｗ
まずですね、最初ヘッダー部分を背景に敷くのにブログの通りやると、記事部分が最初っからヘッダー部分にかぶっちゃうんですよ！
↑こんな感じ！
最初、ヘッダー画像描いてもらってルンルンで敷いてみたら・・
オーマイガッ(´；д；｀)これはあかん！ってことで
神様ｧｧｰｰ＼（。´□｀・。＼）助けてｪｪ ってことで教えてもらいましたｗ
CSS編集画面で下のとこ探してください！結構下のほうかな！
これの赤字のとこ！多分元が
[980*250]の大きさヘッダースペースなんですよね。
そこに画像が縮小されて入る感じ！
なので、ここをヘッダーと同じ大きさに変更しちゃえば、記事の部分が被らないんですね！
私の場合は、スタッフブログさんのを参考に
「1665*714」のサイズで作っております。
なので
[980]部分を[1665]へ書き換えて、
[250]部分を[714]へ変更します！
そうすると・・・今の私のブログのように記事がヘッダー部分に被らなくなります！
是非お試しあれ！
ちなみに、記事部分やカラムの部分を半透明にーっていうのをしたいならスタッフブログさんの
こことここを参考にしてください！
そしてお次はっタイトル部分かな！
気づかない部分なのかもですが、私のブログタイトル
「はな×○△＝しあわせ」は直接ヘッダーイラストに書き込みしております。
通常だと、ブログ管理画面の
「設定・管理」から
「基本設定」で
「タイトル」を入力してそこがブログタイトルのところに表示されますよね！
そしてタイトルは入れないと保存ができぬ！
空白入れて保存出来るかもだけど、私は試してないので分からないですｗ
サブタイトル部分は消していても保存できるので、そこも変更したい方は消して適用しちゃってください！
んでんで、タイトル部分のフォントや色を少し凝ったのにしてみたい！っていうことないですか！
私はせっかくイラストが可愛いので、タイトルも凝ったのにしたかったです！
なので、ちょっとこれは苦労したんですが 分かっちゃえば↑のヘッダーと同様書き換えるだけです！
まずは、
自分の希望するヘッダー画像にタイトルを書き込みましょう。
位置は大体左上ですｗ
私のブログのタイトル部分等を参考にしてくださいｗ
編集ソフトはペイントでもいけると思います！
イラストレーター持ってる方はそれで作っちゃいましょう。
その他使いやすいソフトがあるならそれで編集を！
そしてヘッダーが出来上がったら、次はCSSいじいじです。
ここを見つけてください！
この
[pink]ってとこ。
ここに[color:transparent;/ 透明 /]を入れて書き換えまする。
こんな感じ！
そうすると本来のタイトル部分が透明になり、ヘッダー部分のタイトルを押しているかのようになるわけですおすし！
あとですね、このままだと
元のブログタイトル部分ってちっこいんですね。
[2.11em]っていうサイズです。これだと、押せる範囲がせまくてダミーがばれちゃう！
ってことで大きくしちゃいましょう(〃▽〃)
この赤い文字の部分を変えちゃうだけなので簡単！
こんな感じｗ
あくまで私のブログだと
「5em」なので、この数字は何度か保存して確かめて自分のヘッダー文字にあう大きさにしてください！
あとはですね、背景かなぁ・・
ヘッダー部分を背景に敷いているせいでですね、背景色部分に他からのイラストや背景イラストを持ってくることは出来ないみたいです∑（´A｀ ）
単純に単色を持ってくるのは簡単ですよ！
下記のとこを今度は見つけて
[black]ってある部分を好きな色に変えればOK！
その原理を使って、ここに好きな背景イラスト画とか持ってきてurl入れちゃえば背景も好きな模様に出来るかも！って思ったんですが、無理でしたｗ
なので、私が使った方法、
ててれってってれーん画像を作るｗめんどくさそうに思えるでしょ？そ、そうでもない！
まずヘッダー部分のイラスト大きさを私は
[1665*714]と↑で言うたと思います(｀・ω・)
これをですね、
[1665*1714]の大きさで作りまする。
分かるかな・・？
これも好きな編集ソフト使ってください！
この画像を作成しましたら！
この
[ヘッダー画像url]部分にその画像のurlを入れましょう！
そうすると、好きなデザインの背景画像になりまする！
なんだか私はPCディスプレイがワイドなんですよね。そうすると、↑の
[black]という色部分もサイドに入るので、一応そこも好きな色選んで入れております。
CSSの色表はスタッフブログさんの
ここを見てくだせい！
こんな感じで分かりにくいかもだけど∑（´A｀ ）
見た人でやってみたい！って方いれば、コメントとかメッセージで聞いてくだせい！
ちなみにイラストレーターの扱い慣れないとなので、私のレベルでよければ好きなヘッダー画像送ってくれればタイトルくらいは入れますよ！
遠慮なく依頼してくださーい(´ ▽｀)ﾉ
そいじゃ馴れない記事に夢中になって膀胱破裂しそうなのでトイレいってきます( ´・∀・｀)
