2010年12月21日

【第12回】ボックス広告の枠線を調整する

第6回でサイドバーのコンテンツに枠線を付けた際の最後の課題。

今回は、ボックス広告に枠線を付ける、または、ボックス広告の枠線を削除する方法を説明したいと思います。

さて、第6回で.sideクラスに枠線を設定した結果、ボックス広告の表示はご覧のようになっています。

SD_006_07.JPG

右下左の枠線は表示されていますが、上の枠線がない状態ですね。
変な状態です。

これをどうするかは、人によって好みが分かれると思います。
すなわち、上の枠線も表示されるようにするのか、それとも右下左の枠線が表示されないようにするのか、です。
そこで今回は、それぞれの方法を説明していきます。


まず前提事項ですが、今回のボックス広告の枠線の修正は、前回の自由形式の枠線と同様、CSSではなくHTMLの修正になります。

従って、まずは第2回で説明したコンテンツ画面ボックス広告をクリックし、その設定画面を開いて下さい。

SD_012_01.jpg

上記画面が表示されたら、右上の@コンテンツHTML編集をクリックしてください。

SD_012_02.jpg

この画面が表示されましたでしょうか。

今回の修正は、この画面のAの枠内にあるHTMLを修正する作業になります。

この枠内のHTML、いろいろ書かれていますが、あまり詳細を把握する必要はありません。
前回と同じく、.sideクラスと.sidetitleクラスを呼び出すHTML文のみに注意すれば大丈夫です。


さて、サイドバーのコンテンツは、第6回で説明した修正によって、コンテンツ本文部分には右下左の枠線が、コンテンツタイトル部分には上右左の枠線が設定されています。
現在のボックス広告の枠線は、コンテンツ本文部分の設定だけが適用されているために、このようなおかしな枠線になってしまているわけです。

そこで、この解決方法は2つあります。

 (1)ボックス広告にタイトルを表示させる
 (2)ボックス広告に.sideクラスを適用させなくする

それぞれの方法とその結果画像を、以下に掲載します。

★(1)ボックス広告にタイトルを表示させる方法★

ボックス広告のHTMLに、サイドタイトルを表示させるHTML文を追記する。
すなわち、.sidetitleクラスの呼び出し文を追加する。

▼▼▼ 変更前 ▼▼▼
<div class="side">
<% content.header -%>
<div align="center">
<script type="text/javascript"><!--
seesaa_template_id = '<% content_blogclick.blogclick_template_id %>';
seesaa_adcount = '<% content.disp_number %>';
seesaa_hostsite_id = '5';
seesaa_site_id = '<% blog.name %>';
seesaa_bg_color = '<% content_blogclick.bg_color %>';
seesaa_title_color = '<% content_blogclick.title_color %>';
seesaa_text_color = '<% content_blogclick.text_color %>';
seesaa_border_color = '<% content_blogclick.border_color %>';
seesaa_link_color = '<% content_blogclick.url_color %>';
//--></script>
<script type="text/javascript" src="<% site_info.ads_url %>/-/js/square_seesaa.js"></script>
</div>
<% content.footer -%>
</div>

▼▼▼ 変更後 ▼▼▼
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<div align="center">
<script type="text/javascript"><!--
seesaa_template_id = '<% content_blogclick.blogclick_template_id %>';
seesaa_adcount = '<% content.disp_number %>';
seesaa_hostsite_id = '5';
seesaa_site_id = '<% blog.name %>';
seesaa_bg_color = '<% content_blogclick.bg_color %>';
seesaa_title_color = '<% content_blogclick.title_color %>';
seesaa_text_color = '<% content_blogclick.text_color %>';
seesaa_border_color = '<% content_blogclick.border_color %>';
seesaa_link_color = '<% content_blogclick.url_color %>';
//--></script>
<script type="text/javascript" src="<% site_info.ads_url %>/-/js/square_seesaa.js"></script>
</div>
<% content.footer -%>
</div>

この結果、先ほどのボックス広告はご覧のようになります。

▼▼▼ 変更後 ▼▼▼
SD_012_03.JPG

これが解決方法の1つ。


そしてもう一つは、そもそもボックス広告に枠線を表示しないようにする方法です。

★(2)ボックス広告に.sideクラスを適用させなくする方法★

ボックス広告のHTMLから、サイドコンテンツ本文を表示させるHTML文を削除する。
すなわち、.sideクラスの呼び出しを削除する。

▼▼▼ 変更前 ▼▼▼
<div class="side">
<% content.header -%>
<div align="center">
<script type="text/javascript"><!--
seesaa_template_id = '<% content_blogclick.blogclick_template_id %>';
seesaa_adcount = '<% content.disp_number %>';
seesaa_hostsite_id = '5';
seesaa_site_id = '<% blog.name %>';
seesaa_bg_color = '<% content_blogclick.bg_color %>';
seesaa_title_color = '<% content_blogclick.title_color %>';
seesaa_text_color = '<% content_blogclick.text_color %>';
seesaa_border_color = '<% content_blogclick.border_color %>';
seesaa_link_color = '<% content_blogclick.url_color %>';
//--></script>
<script type="text/javascript" src="<% site_info.ads_url %>/-/js/square_seesaa.js"></script>
</div>
<% content.footer -%>
</div>

▼▼▼ 変更後 ▼▼▼
<% content.header -%>
<div align="center">
<script type="text/javascript"><!--
seesaa_template_id = '<% content_blogclick.blogclick_template_id %>';
seesaa_adcount = '<% content.disp_number %>';
seesaa_hostsite_id = '5';
seesaa_site_id = '<% blog.name %>';
seesaa_bg_color = '<% content_blogclick.bg_color %>';
seesaa_title_color = '<% content_blogclick.title_color %>';
seesaa_text_color = '<% content_blogclick.text_color %>';
seesaa_border_color = '<% content_blogclick.border_color %>';
seesaa_link_color = '<% content_blogclick.url_color %>';
//--></script>
<script type="text/javascript" src="<% site_info.ads_url %>/-/js/square_seesaa.js"></script>
</div>
<% content.footer -%>
<br />

こうすると、ボックス広告に枠線は表示されなくなります。

▼▼▼ 変更後 ▼▼▼
SD_012_04.JPG

ご覧のようになりました。

なお、(2)の方法でボックス広告から.sideクラスの適用を削除すると、その下のコンテンツとの隙間がほとんどなくなってしまいます。

この場合、第7回と同じ要領でmarginを設定しても良いのですが、ここではそれも面倒なので、Aの欄の最後に<br />を追記する方法をとりました。

以上の(1)または(2)の操作が完了したら、B保存ボタンを押下して、修正を保存しましょう。

これで今回の作業は終了です。
ようやく、第6回から始まったサイドコンテンツに枠線を付ける作業が一段落しました。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。