FC2テンプレートカスタマイズにおいてHTML挿入位置を決定します。

ねこぎじです。

暑い8月が終わり、9月に入ってすこし過ごし易くなってきました。

とはいえ、まだまだ暑い日々は続きます。

そういえば、9月は博多では箱崎宮の放生会が開催されます。

とても盛大なお祭りの一つで、ねこぎじも必ず行くお祭りです。

さて、FC2のテンプレートのカスタマイズについて書き続けております。

FC2のテンプレートをカスタマイズするコツは、HTMLの挿入位置を決定することに尽きるかもしれません。

下記の画像の赤枠位置に、リンクバーを挿入する位置決めを行いたいと思います。

0 image10

Chromeの画面上で、マウスを右クリックして「要素の検証」モードに入りましょう(^O^)ノ

text5697_20120903225920.png

それでは、画面ソースを上からクリックして、HTML挿入位置を探ります。

まず、「body」の位置を確認。

01 rect3757

その下の<div id=”sh_fc2blogheadbar”>を確認。

02 rect2991

そのDIVの下・・
03 rect3759

DIVの下・・
04 rect2991

HTMLを確認して、DIVのID名を確認しつつ、挿入位置を探ります。

05 rect2991

この画像と、その二つ下の画像<div id=”wrapper”>の間にメニューバーの<ul id=”menu_bar”>を挿入することにします。

<div id=”headBlock2″>
06 rect2991

そしてメニューバーをこの位置に挿入します。
<ul id=”menu_bar”>

プレゼンテーション1

画面イメージ → http://hyuga16.blog46.fc2.com/blog-entry-199.html
実ソースコード(HTML&CSS) → http://hyuga16.blog46.fc2.com/blog-entry-200.html

メニューバーの要素の直下は、<div id=”wrapper”>ということになります。

7 Chrome 拡張機能エディタ DIV6ラッパー

駆け足で進んできました。

また次回補足したいと思います。

それでは皆様のお仕事が捗ります様にお祈りしています。
ではでは。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です