FC2ブログ

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ラッパー

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

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


それでは皆様のお仕事が捗ります様にお祈りしています。
ではでは。
関連記事
スポンサーサイト



テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

コメントの投稿

非公開コメント

最新トラックバック

月別アーカイブ

カテゴリ

PDF (2)
広告
くろック ALL STARS
リンク
全記事表示リンク

全ての記事を表示する⇒ここをクリック頂くと記事リストが表示されます。

フリーエリア
カレンダー
09 | 2019/10 | 11
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
RSSリンクの表示
プロフィール

ねこぎじ

Author:ねこぎじ
FC2ブログへようこそ!

最新記事
最新コメント
メールフォーム

名前:
メール:
件名:
本文:

ねこぎじと申します。Twitterやっています。宜しければフォローください