Twitter 人気記事
はてなブックマーク人気記事
So-netブログの記事の上にフリーエリアを追加する
» So-netブログ改造ワザ
[追記]
現在の So-net ブログはこの記事の頃に比べて標準機能でカスタマイズできる箇所が増えているので、この記事のような手法を使わなくても簡単にフリーエリアを追加することができます。
ソネブロ限定ブログスキンのカスタマイズです。
記事欄のいちばん上にフリーエリア(バナーエリア)を表示する方法です。
下のコードをカスタムペインの空いているところにもしくは表示しているサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。ブログの管理設定項目の「URL 自動リンク」を「リンクしない」に設定して入力してください
緑の部分に表示したい文字やタグを書いて保存すれば完了です。
アップロード済みの画像を表示したい場合は、普段記事に書くときと同じようにそのまま画像の img タグを貼り付けて先頭の "/blog" を除いた URL を緑の部分に挿入すれば OK です。
スキンの記事枠を表示したくない場合は、div タグを全て省略すれば枠は表示されなくなります。
下の例では3種類をランダム表示するようになっていますが、同じように行を追加すれば3つ以上でも指定できます。あまりたくさんバナーを追加するとサイドバーの1000文字制限を越えてしまうので注意。
ページ全体が読み込まれてから表示されるので動作は若干重くなります。
ソネブロ限定ブログスキンのカスタマイズです。
記事欄のいちばん上にフリーエリア(バナーエリア)を表示する方法です。
JavaScript コード
↓こんな感じになります( linkshare バナーを表示した例)。
<script type="text/javascript">
<!--
if (window.addEventListener) {
window.addEventListener("load", topFreeArea, false);
} else if (window.attachEvent) {
window.attachEvent("onload", topFreeArea);
}
function topFreeArea()
{
if( document.getElementsByTagName("object").length == 0 )
{
var t = '<div class=articles-top></div><div class=articles>' +
'ここに表示したい文字とかタグを書く' +
'</div><div class=articles-bottom></div>';
document.getElementById("main").innerHTML = t + document.getElementById("main").innerHTML;
}
}
//-->
</script>
<!--
if (window.addEventListener) {
window.addEventListener("load", topFreeArea, false);
} else if (window.attachEvent) {
window.attachEvent("onload", topFreeArea);
}
function topFreeArea()
{
if( document.getElementsByTagName("object").length == 0 )
{
var t = '<div class=articles-top></div><div class=articles>' +
'ここに表示したい文字とかタグを書く' +
'</div><div class=articles-bottom></div>';
document.getElementById("main").innerHTML = t + document.getElementById("main").innerHTML;
}
}
//-->
</script>
下のコードをカスタムペインの空いているところにもしくは表示しているサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。ブログの管理設定項目の「URL 自動リンク」を「リンクしない」に設定して入力してください
緑の部分に表示したい文字やタグを書いて保存すれば完了です。
アップロード済みの画像を表示したい場合は、普段記事に書くときと同じようにそのまま画像の img タグを貼り付けて先頭の "/blog" を除いた URL を緑の部分に挿入すれば OK です。
スキンの記事枠を表示したくない場合は、div タグを全て省略すれば枠は表示されなくなります。
[追記] 2006/11/20 ランダムバナー表示版
緑の「バナー＊」のところにバナー表示の HTML を挿入してください。下の例では3種類をランダム表示するようになっていますが、同じように行を追加すれば3つ以上でも指定できます。あまりたくさんバナーを追加するとサイドバーの1000文字制限を越えてしまうので注意。
<script type="text/javascript">
<!--
if (window.addEventListener) {
window.addEventListener("load", topFreeArea, false);
} else if (window.attachEvent) {
window.attachEvent("onload", topFreeArea);
}
function topFreeArea()
{
var bnr=new Array();
bnr[bnr.length] = 'バナー1';
bnr[bnr.length] = 'バナー2';
bnr[bnr.length] = 'バナー3';
var t = '<div class=articles-top></div><div class=articles>' +
bnr[Math.floor(Math.random()*bnr.length)] +
'</div><div class=articles-bottom></div>';
document.getElementById("main").innerHTML = t + document.getElementById("main").innerHTML;
}
//-->
</script>
<!--
if (window.addEventListener) {
window.addEventListener("load", topFreeArea, false);
} else if (window.attachEvent) {
window.attachEvent("onload", topFreeArea);
}
function topFreeArea()
{
var bnr=new Array();
bnr[bnr.length] = 'バナー1';
bnr[bnr.length] = 'バナー2';
bnr[bnr.length] = 'バナー3';
var t = '<div class=articles-top></div><div class=articles>' +
bnr[Math.floor(Math.random()*bnr.length)] +
'</div><div class=articles-bottom></div>';
document.getElementById("main").innerHTML = t + document.getElementById("main").innerHTML;
}
//-->
</script>
ページ全体が読み込まれてから表示されるので動作は若干重くなります。
JavaScript 1 はじめてのプログラミングとJavaScriptの基礎 (CD-ROM付) (プログラミング学習シリーズ) (プログラミング学習シリーズ)
- 作者: 日向 俊二
- 出版社/メーカー: 翔泳社
- 発売日: 2009/01/30
- メディア: 大型本
- 作者: 岡田 克司
- 出版社/メーカー: 翔泳社
- 発売日: 2008/02/05
- メディア: 大型本
CSS&JavaScript表現アイデア帖 (インプレスムック エムディエヌ・ムック)
- 作者:
- 出版社/メーカー: MdN
- 発売日: 2008/07/18
- メディア: ムック
Facebook コメント
Facebook コメントに書き込まれた質問に対する返答・回答は行いません。ご了承ください。
iTunes Store 音楽アプリベストセラー
for iPad
10件まで表示
for iPhone/iPod touch
for Mac
リストで一覧表示
こんにちは。参考にさせていただきました。
おかげさまで広告表示できました。ありがとうございます。
出来れば応用して記事の下にもバナーを出してみたいです。
しかしどの記述をいじればいいか全くわからず[ショック！]
by としや (2006-11-20 05:45)
としやさん、コメントありがとうございます。
記事の下にバナーを出す方法も近いうちに紹介したいと思います。
(少し手間は増えますが同じようなやり方でできます)
by TAN (2006-11-20 09:13)
先日コメント欄に絵文字をつける方法を試させていただいたのに引き続き、こちらも試してみました
私でもできました！
サイドバーでは幅が足りないものが表示できて嬉しいです
ありがとうございますm(__)m
by chima (2007-09-14 07:48)
同じように記事のフッタ部分にバナーを表示する方法も紹介しているので、
そちらも参考にしてみてください。
by TAN (2007-09-14 22:23)