今回は、ボックス広告に枠線を付ける、または、ボックス広告の枠線を削除する方法を説明したいと思います。
さて、第6回で.sideクラスに枠線を設定した結果、ボックス広告の表示はご覧のようになっています。
右下左の枠線は表示されていますが、上の枠線がない状態ですね。
変な状態です。
これをどうするかは、人によって好みが分かれると思います。
すなわち、上の枠線も表示されるようにするのか、それとも右下左の枠線が表示されないようにするのか、です。
そこで今回は、それぞれの方法を説明していきます。
まず前提事項ですが、今回のボックス広告の枠線の修正は、前回の自由形式の枠線と同様、CSSではなくHTMLの修正になります。
従って、まずは第2回で説明したコンテンツ画面でボックス広告をクリックし、その設定画面を開いて下さい。
上記画面が表示されたら、右上の①コンテンツHTML編集をクリックしてください。
この画面が表示されましたでしょうか。
今回の修正は、この画面の②の枠内にあるHTMLを修正する作業になります。
この枠内のHTML、いろいろ書かれていますが、あまり詳細を把握する必要はありません。
前回と同じく、.sideクラスと.sidetitleクラスを呼び出すHTML文のみに注意すれば大丈夫です。
さて、サイドバーのコンテンツは、第6回で説明した修正によって、コンテンツ本文部分には右下左の枠線が、コンテンツタイトル部分には上右左の枠線が設定されています。
現在のボックス広告の枠線は、コンテンツ本文部分の設定だけが適用されているために、このようなおかしな枠線になってしまているわけです。
そこで、この解決方法は2つあります。
（１）ボックス広告にタイトルを表示させる
（２）ボックス広告に.sideクラスを適用させなくする
それぞれの方法とその結果画像を、以下に掲載します。
★（１）ボックス広告にタイトルを表示させる方法★
ボックス広告の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>
この結果、先ほどのボックス広告はご覧のようになります。
▼▼▼ 変更後 ▼▼▼
これが解決方法の１つ。
そしてもう一つは、そもそもボックス広告に枠線を表示しないようにする方法です。
★（２）ボックス広告に.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 />
こうすると、ボックス広告に枠線は表示されなくなります。
▼▼▼ 変更後 ▼▼▼
ご覧のようになりました。
なお、（２）の方法でボックス広告から.sideクラスの適用を削除すると、その下のコンテンツとの隙間がほとんどなくなってしまいます。
この場合、第7回と同じ要領でmarginを設定しても良いのですが、ここではそれも面倒なので、②の欄の最後に<br />を追記する方法をとりました。
以上の（１）または（２）の操作が完了したら、③保存ボタンを押下して、修正を保存しましょう。
これで今回の作業は終了です。
ようやく、第6回から始まったサイドコンテンツに枠線を付ける作業が一段落しました。
▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック＆応援をお願いします
▲▲▲▲▲▲▲▲▲▲▲▲▲
参考になりましたら
クリック＆応援をお願いします
▲▲▲▲▲▲▲▲▲▲▲▲▲
【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
