画像のみをトップ画像として表示させたい場合。

November 29 [Tue], 2011, 20:52
次はこの画像にしようと思います。
しっかり写真っぽいやつ。


960px以下の画像を用意します。
画像を「画像の管理」からアップロードして、URLを確認します。
この際、「オリジナルのサイズ」を選択してアップロードしましょう。

画像URLの確認方法について・・・
(もっとスマートな方法があるかもしれないのですが)
画像を日記に貼り付けて一度アップロードします。
その日記で出てくる画像を一度クリックします。
そうすると画像全体が表示されるウィンドウが出てくるので、そこで画像を右クリックし「プロパティ」を調べます。
そのプロパティ画面で画像URLが確認できます。

メイン・アーカイブ・1記事ページ、すべてのページにおいて同じトップ画像でよければ、
フリースキン編集→メイン
フリースキン編集→アーカイブ
フリースキン編集→1記事
すべてで同じ箇所を修正かけます。
25行目〜30行目の部分を

<!-- HEAD -->
<div id="head">
<h1><a href="{$BlogUrl$}" title="{$BlogName$}">{$BlogName$}</a></h1>
<h2>{$BlogDescription$}</h2>
</div>
<!-- /HEAD -->

から

<!-- HEAD -->
<div id="head">
<a href="{$BlogUrl$}" title="{$BlogName$}"><img src="http://img.yaplog.jp/img/12/pc/n/a/n/nanao_firefly/0/8.jpg" border="0"></a>
<h1><a href="{$BlogUrl$}" title="{$BlogName$}">{$BlogName$}</a></h1>
<h2>{$BlogDescription$}</h2>
</div>
<!-- /HEAD -->

と書き換えます。
つまり画像表示の1行を付け加えるだけ。

次にスタイルシートのところから96行目〜129行目の部分を

#head {
background: url("/blog/template/924/img/head.gif") repeat-x left top;
padding: 100px 10px 0 10px;
text-align: left;
}
#pageMain #head { /* メインのみ */
background: url("/blog/template/924/img/head-main.gif") repeat-x left top;
}
#pageArchive #head { /* アーカイブのみ */
background: url("/blog/template/924/img/head-archive.gif") repeat-x left top;
}
#pageEntry #head { /* 1記事のみ */
background: url("/blog/template/924/img/head-entry.gif") repeat-x left top;
}
#head h1 {
font-size: 18px;
font-weight: bold;
}
#head h1 a:link,
#head h1 a:visited {
color: #FF9999;
}
#head h1 a:hover,
#head h1 a:active {
color: #FFC6C6;
}
#head h2 {
background: #FFC6C6;
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
margin: 0;
padding: 6px 12px;
}

から

#head {
background: url("/blog/template/924/img/head.gif") repeat-x left top;
padding: 10px;
}
#head img {
margin: 0 auto 0 auto;
}
#pageMain #head { /* メインのみ */
}
#pageArchive #head { /* アーカイブのみ */
}
#pageEntry #head { /* 1記事のみ */
}
#head h1 {
display:none;
}
#head h2 {
display:none;
}

と書き換えます。

これで作りあげると・・・

このように好きな画像をトップ画像にすることができます。

できるだけSEOも意識してみましたが、いかがでしょうか。
WindowsXPでFirefox8.0とIE8のブラウザで実験しております。
P R
プロフィール
  • プロフィール画像
  • アイコン画像 ニックネーム:ななお
読者になる
2011年11月
« 前の月    |    次の月 »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
最新コメント
Yapme!一覧
読者になる