上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。

--.--.-- (--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--:--  |  スポンサー広告

2011.07.21 (Thu)

ヘッダーの画像追加

こいしさんからリクエストがあったので、ヘッダーに画像を追加する方法をまとめておこうと思います。
テンプレはジョバンニさんの説明でも使われていたyellow_3columnを使うことにします。

少し面倒ですが頑張って順番にやっていきましょう。

まずヘッダーに1つの画像を表示させるところからやっていきます。
複数の画像をランダム表示させる場合も途中まで一緒ですのでここから始めてください。

1.まず、テンプレ編集の画面に入り、スタイルシート編集のところから「div#container」と書かれたところを探します(上の方にあります)
テンプレいじり2-0

max-width:1150px と書かれていますね、したがって幅1150pxまでの画像を載せることができます。
(min-width:850px と書いてありますが、それ以下の画像も載せられます)

2.必要な画像の幅がわかったので、次に載せたい画像を用意しアップロードしておきます。
今回は、私が使用しているこの画像↓を使ってみます。画像のサイズは幅792px、高さ250pxです。
フラン
 
3.次に、スタイルシート編集から「div#header」と書かれているところを探します。
テンプレいじり2-1

見つかったら、図のように、以下のテキストをコピペします。widthとheightの数値は用意した画像に合わせて変えてください。

div#branding {
width : 792px;
height : 250px;
}

4.次にHTML編集のところから、div id="header"と書かれたところを探します。
テンプレいじり2-2

ここに、図のように、赤枠内のテキストを入力します。

5.次に、今入力した部分に青枠内のテキスト(" " の間には画像のurlを入れる)を挿入してください。

テンプレいじり2-3

6.これで次のように画像が表示されるはずです。

テンプレいじり2-4

7.画像の上下のスペースを調整すると見栄えがよくなるでしょう。
まず、スタイルシート編集で「div#header」とかかれたところを探し、下の図のように「margin-bottom」のところを60px→10pxに変更します。
テンプレいじり2-5

更に、スタイルシート編集で「div#main」、「div#sidemenu1」、「div#sidemenu2」と書かれたところを探し、図のように3箇所に margin-top:10px; を追記します。
テンプレいじり2-6

これで、下図のようにマージンが適切になって見栄えがよくなりました。画像を1枚だけ載せる場合はこれで終了です。
テンプレいじり2-7

8.さらに画像をランダム表示させたい方は、もう少し頑張りましょう。
もう一枚、同じサイズの画像を用意しアップロードしておきます。ここでは次の画像を使うことにします。
お嬢様


9.まず、5.で記入した青枠内を下図のように削除してください。
テンプレいじり2-3-2

10.次に、HTML編集のところで、--/nextentry--> と /head> が並んでいるところを探します。上の方にあります。ここに、下図のように、--/nextentry--> と /head> の間に赤枠内のテキストを追記してください。面倒ですが頑張りましょう!
head[0] = " "; の " " の間には1枚目の画像のurlを、
head[1] = " "; の " " の間には2枚目の画像のurlを入れます。
テンプレいじり2-8

入力が終わり「更新」をクリックすれば、ランダムで画像が表示されるようになっているはずです。
テンプレいじり2-9

11.もし更に画像を追加したい場合は、10.のHTML編集のところで下の図のように
head[2] = " ";
head[3] = " ";
   ・
   ・
   ・
と追加する画像の数だけテキストを追加すれば無限に増やせるようです。
テンプレいじり2-10

お疲れ様でした。以上でヘッダーに画像を表示する方法は終了です。頑張ってください。

ふぅ。やっと終わった・・・大変だったわりに、ちゃんと伝わるのか大いに心配です・・・
自分でまとめてみて改めて面倒な作業だと思いました・・・
もしわからなかったら遠慮なく聞いてください。

さて、このあとは自分の趣味に没頭させていただきます。さようならー

スポンサーサイト

テーマ : 東方Project - ジャンル : ゲーム

22:39  |  テンプレ改造  |  トラックバック:(0)  |  コメント:(6)

Comment

パソコン苦手だけどじつはテンプレ好きな画像出せないか悩んでました!

何回かためしたのですがこの記事を参考にまたやってみます!

できたらうれしいな^^
斑のゆーか |  2011.07.22(金) 01:05 | URL |  [編集]

難易度たか・・・・

俺には無理だーーーーーーー


つか その画像集 いいねww
真似スることになっちゃうから 別の探さないと・・・
こいし |  2011.07.22(金) 02:47 | URL |  [編集]

背景画像をランダムにすることはできたんですが見にくくてorz
よかったら記事の背景を不透明にする方法を教えてもらえませんか?
自分で調べてやってはみたんですがうまくいかなくて・・・
ジョバンニ |  2011.07.22(金) 15:01 | URL |  [編集]

Re: タイトルなし

斑のゆーかさん>

そうだったのですか!
お役に立てればよいのですが・・・

頑張ってください。もしわからないとこがあれば聞いてくれてOKです。
新しくなったゆーかさんのブログ楽しみにしてます!
WreN to Kanna |  2011.07.22(金) 21:34 | URL |  [編集]

Re: タイトルなし

こいしさん>

こいしさんの使っているテンプレ教えてもらえれば、
もう少しわかりやすくなるとは思うのですが。
何か載せたい画像があるなら協力しますよ!
WreN to Kanna |  2011.07.22(金) 21:37 | URL |  [編集]

Re: タイトルなし

ジョバンニさん>

もうランダム背景をものにするとはさすがですね!
背景の不透明化ですが、今日の記事にアップしておきました。
わからなかったら、また気軽に言ってください。
それでは、検討をお祈りします!
WreN to Kanna |  2011.07.22(金) 21:39 | URL |  [編集]

コメント:を投稿する

Url
Comment
Pass  編集・削除に必要
Secret  管理者だけにコメント:を表示  (非公開コメント:投稿可能)
 

▲PageTop

Trackback

この記事のトラックバック URL

→http://wrentokanna.blog.fc2.com/tb.php/34-de0bfa08

この記事にトラックバックする(FC2ブログユーザー)

この記事へのトラックバック:

▲PageTop

 | ホーム | 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。