blogの外観を弄る 広告スペース編

久々のblog改造。今回は右サイドの広告スペースを弄っています。

「gooブログ」は基本無料のサービスですが，テンプレートレベルでしか外観の変更ができない，広告が表示される，など，長く使っていると不便な点や不満な点が多々でてきます。そういったユーザー向けに「アドバンス」という有料パッケージ（月額200円）が提供されていて，これを契約すればblogの外観をHTML／CSSレベルでカスタマイズする事が可能になります。自分の場合，標準で提供されている「カスタムブルー」のテンプレートをベースにカスタマイズをしています。カスタマイズ方法は簡単。「編集画面」の「テンプレート編集」メニューに入れば，HTMLデータとCSSデータを直接エディットできるので，あとはゴリゴリとコードを修正するのみです。HTMLおよびCSSの知識はある程度必要なので，初トライの人はちゃんと調べてから作業をしましょう。コードは自動的にバックアップされますが，編集前の状態を自分でバックアップしておく事をお薦めします。

前回記事（5年前・・・！）においては，blog左サイドにある「ENTRY ARCHIVE」にスクロールバーを付けたりしました。今回はblog右サイドのスペースをカスタマイズして，オリジナルの広告スペースを作ります。まあ・・・広告スペース自体はだいぶ前から設置していたんですが，blog上でコードを公開していなかったので，あらためてネタにした感じですね。

編集対象はテンプレートHTMLになります。編集画面のHTMLデータを半分よりちょっと下までスクロールさせると，以下のコードが書かれている箇所があります。この部分がblog右側に設置されている「ログインモジュール」とそれ以下の部分です。自分の場合，下記コードの「・・・広告スペース・・・」と書いた部分にオリジナルコードを入れて広告スペースを作っています。広告スペースの幅を決めているのは，上から6行目の「150」という数字。あまり広げすぎると本文欄が狭くなるので，このくらいの数字にしておくのがお薦めです。

＜!-- 右メニュー --＞
＜td valign="top" id="menu2"＞

＜div id="lgFrame"＞
＜div class="lgBar"＞CONFIG＜/div＞
＜div class="menuBg2"＞
＜table border="0" width="150" cellspacing="3" cellpadding="0"＞
＜tr＞
＜td colspan="2"＞＜img src="/images/clear.gif" width="1" height="3" alt=""＞＜/td＞
＜/tr＞
＜!-- LOGIN MODULE --＞
＜{$login_module}＞
＜tr＞
＜td height="4" colspan="2"＞＜img src="/images/clear.gif" width="1" height="3" alt=""＞＜/td＞
＜/tr＞
＜tr＞
＜td align="right"＞＜img src="/images/icon_edit.gif" width="10" height="16" alt="blog EDIT"＞＜/td＞
＜td align="left"＞＜a href="＜{$admin}>"＞＜span class="adminLink"＞blog EDIT＜/span＞＜/a＞＜/td＞
＜/tr＞
＜tr＞
＜td colspan="2"＞＜img src="/images/clear.gif" width="1" height="15" alt=""＞＜/td＞
＜/tr＞
＜/table＞
＜/div＞
＜br＞

・・・広告スペース・・・

＜/td＞
＜!-- /右メニュー --＞

＜td width="1%"＞＜img src="/images/clear.gif" width="10" height="10" alt=""＞＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜/table＞
＜!--/CONTENTS--＞
＜/body＞
＜/html＞

広告スペース用のコードは以下のとおり。
1行目の「タイトル」が画面上に表示するテキストの部分です。
8行目のリンクタグ部分に，表示したい画像ファイルのアドレスとリンク先のアドレスを設定して，
最初に示したコードの「・・・広告スペース・・・」部分にはめ込めばOK。
これを使えば，お気に入りサイトの画像付きリンクを縦に並べて表示する事が簡単にできます。

＜div class="lgBar"＞タイトル ＜div class="menuBg2"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0"＞
＜tr＞
＜td align="center"＞
＜!-- --＞
＜BR＞
＜A HREF="リンク先アドレス"＞＜IMG SRC="画像アドレス" BORDER="0" WIDTH=150 HEIGHT=97 ALIGN="CENTER" ALT=""＞＜/A＞
＜BR＞
＜/td＞
＜/tr＞
＜/table＞
＜/div＞
＜BR＞

表示サンプルは，うちのblogの右サイドをご覧下さい。
「広告」と言っていますが，単なる「画像表示用スペース」を作っているだけなので，
gooブログでアフィりたい人の参考にはならないかな。(´・ω・｀)