華流時代劇ドラマのループにハマル☆

さて今回は脱線抜きに・・・

じゃないとー17時に仕事終わる前に
まだ明日からの旅行先も調べなきゃいけないしー
買い物もしたいしー


いろいろやる事がー！！！！！



スポンサーリンク







で、画像の変更の仕方なんですが
もちろんこのファンブログ提供元のA8ネットさんが説明してる

ヘッダー画像を変えてみよう

のページを見れば楽勝なんでしょうけど


まずわたしは
画像じゃなく「タイトルバナー」と勘違いをしてたので時間が掛かったわけで




◇勝手に勘違いして間違えてたけどやっと画像の変更できましたー




ふつうにやればぜんぜん簡単です（めんどくさいだけ・笑）



�@画像を作る

サイズは800×160で作りました


これはペイントでもなんでもお絵描きとかできるソフトならOK

わたしはLINEスタンプを作ってた時
「Fire Alpaca」というソフトを使ったいたのでそれで作成しました


例えばペイントで作ると

こういうバナーになります




表示される時は
こんな感じになります




これはこれでかわいいかも



で、Fire Alpacaで作った画像はこちら




絵じゃないとこが市松模様みたいになってますよねー


この市松模様の部分は「透過されてます」の印
＝この画像は「透過」されてるのです
わたしはよく「白抜き」って言っちゃうんですけど
「白抜き」も「透過」もほぼ同じ意味だとー思ってます



で、なんで「透過」されてるのを使ってるわけ？？



ま、今回使ってるみたいな横長のメイン画像なら

その位置にはめこむわけなんで


別に透過しててもされてなくても問題ないと思うんですが


ただの「絵」に関しては
「透過」しといた方が断然便利です


→これはまた別記事にしまーす！！！


�A画像をアップロードする







画像をアップロードしたら
その画像のタイトルをクリック
別ウィンドウが開きます

ステータスバーに表示されている「URL」をコピーしてください
これがこの画像が置いてあるパス=保管場所の住所です
この「パス」はパスワードのパスではないです


�BCSSの編集

上の「デザイン」から「html」を選び



次に「CSS」を選びます




さてこの画面の中から変更箇所を探すんですがー



書き換えたい部分は

ほぼ上の位置の事なんで
ほぼ上の位置にあります


だーっと見て


「ヘッダー」という箇所
ここを少し書き換えます








現在
------------------------------------------
/* 　ヘッダー　 */

div#header {
padding:20px 0;←余白が上下20pxづつ、左右は0pxづつ
background-color:#ffffff;←背景は「白」ですよー
display:block;
------------------------------------------


この場所（ページ全体ではなくヘッダー部分のみ）の「背景」を
ただの「白」から「画像」に変更します



------------------------------------------
/* 　ヘッダー　 */

div#header {
padding:20px 0;
background-color:#ffffff;←この部分
display:block;
------------------------------------------



background-color:#ffffff;
---------------- ------ ------
背景　　の　色　は　白




background:url(http://コピってある画像のパス);
---------------- ------ ------
背景　　 は　この位置にあるからそれを表示させてー









はい☆完了！！！



あとは「プレビュー」でちゃんといい位置に表示されてるか確認して
オケだったら「保存」で反映されます



微調整のpaddingに関してはまた別記事でー




スポンサーリンク

にほんブログ村

にほんブログ村

にほんブログ村

ありがとデスー(≧▽≦)