ブログの更新2週間くらいサボってました。サーセン。だってネタがないんだもん(迫真)


まあバイクネタは一応ありますが、やる気の問題と別にやりたいことがあったんでね。

さて、うちのブログに来たことある人なら、なんか違和感を感じると思います。そう、タイトルのとこ


最近、タイトルのとこをページ更新するたびに画像が変わるようにしてみました。
何気に前からやりたかったんですがね。まあ今までやってこず。しかしQYK(急にやる気が来たので)やってみた次第。

何だこのタイトルはぁ!?(CV.せいじろう)  と、思ってくれた人がいれば本望。


さて、いいタイトルだ。少し借りるぞ。と言う人のために一応やり方みたいなのも書いておきます。ただしうちがライブドアブログなので、それ準拠になります。まあ他のブログでも応用はきくんじゃないかな(適当)


まずタイトル用の画像をアップロードします。サイズは横幅が996ピクセルでブログパーツの端から端までになります(3カラムの時)。縦の長さは各機の判断で。ちなみにうちのやつは500ピクセルです


お次にブログのHTMLをいじります。


設定画面

ブログの設定画面からここまで来ます。

とりあえずCSSってところは放置。私じゃよくわからんので。その右に4つタブがありますがここをいじります。具体的には


<!-- ..... Title ..... -->
<div class="blog-title-outer<IfBlogHeaderImageUrl> show-image<IfBlogHeaderHideText> hide-text</IfBlogHeaderHideText></IfBlogHeaderImageUrl>">
<div class="blog-title-outer-2">
<div class="blog-title-outer-3">
    <h1 id="blog-title"><a href="<$BlogUrl$>" title="<$BlogTitle ESCAPE$> トップへ"><$BlogTitle ESCAPE$></a></h1>
    <div class="blog-description-outer"><p id="blog-description"><$BlogDescription$></p></div>
</div>
</div>
<IfBlogHeaderImageUrl><img src="<$BlogHeaderImageUrl$>" id="blog-header-image"></IfBlogHeaderImageUrl>
</div>

<div id="content" class="hfeed">


この部分でタイトルの設定をしてるようです。これを


<!-- ..... Title ..... -->
<div class="blog-title-outer<IfBlogHeaderImageUrl> show-image<IfBlogHeaderHideText> hide-text</IfBlogHeaderHideText></IfBlogHeaderImageUrl>">
<a href="http://cubcombat-mobius118.doorblog.jp/" title="CUB COMBAT THE UNSUNG HEROES トップへ">
<script type="text/javascript">
<!--
ranimg = new Array();
ranimg[0] = "http://livedoor.blogimg.jp/baker7/imgs/e/1/e108621a.jpg";
ranimg[1] = "http://livedoor.blogimg.jp/baker7/imgs/3/6/36908c8c.jpg";
ranimg[2] = "http://livedoor.blogimg.jp/baker7/imgs/7/2/72ab2dd2.jpg";
ranimg[3] = "http://livedoor.blogimg.jp/baker7/imgs/3/4/343a6707.jpg";
ranimg[4] = "http://livedoor.blogimg.jp/baker7/imgs/5/1/51aba768.jpg";

xx = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(xx)];
document.write('<img src='+ ranimg +' border=0>');
// -->
</script>

<div class="blog-title-outer-2">
<div class="blog-title-outer-3">

</div>
</div>

</div>

<div id="content" class="hfeed">



こうします

赤字部分は消したとこ、青字はなんか変わってますが、移設した部分、緑字は新規に追加したとこ

赤字はブログのタイトルと説明部分のテキストを表示するもののようです。これを画像と重ねて表示するのがいまいちわからなかったので全消し。まあ画像があればいいやということで。


青字はブログのタイトル画像をクリックするとトップページに戻れるようにリンクするもの。わが拳にあるのはただ制圧前進のみ!!と言う人はなくてもおk。ついでに

" title="CUB COMBAT THE UNSUNG HEROES トップへ">

この太字にした部分を変えると、マウスオーバーしたときに表示される文字が変わります。ネタを仕込みたい人は是非


緑字部分が今回のポイント。これでタイトル部分を画像にするとともに、リロードごとに画像が変わるようにする記述。javascriptを使ってるそうな。右下で更新しろとうるさいアレ(たぶん)。

ranimg[0] = "http://livedoor.blogimg.jp/baker7/imgs/e/1/e108621a.jpg";

上の太字部分に表示したい画像のURLを突っ込みます。そして画像を2枚3枚と増やす時は、ranimg[0]の部分の数字を変えていけばおk。ついでに画像の枚数については制限無しです。

ちなみにタイトルでは百八式とか言ってますが、現時点で225枚あります(ブログはじめる前の懐かしの写真もちらほら)。百八式ってレベルじゃねぇぞ

これから何かやるたびに増えていきそうな予感。


あぁ、元の記述はチョンボしたとき用にメモ帳なんかに保存しておくといいですよ。


以上、HTMLの知識ZEROの私がググって得た知識による記事でした


にほんブログ村 バイクブログ カブ系へ
にほんブログ村
このブログを評価する秘孔は・・・ここだ