FC2+vicunaでサイドバーの並び順をかえる

当ブログは WordPress+vicuna です。

FC2でもvicunaさんのテンプレートを使うことができます。が、FC2で言うところのプラグインに対応していないテンプレートなので、サイドバーの項目を並べ替えようとすると、HTMLの該当する部分を直接移動しなければなりません。

で、その方法を備忘録的に記述しておきます。

vicunaさんのテンプレートの中のvegaを使って説明します。

FC2でHTML（とCSS）のある場所は

ログイン後の画面、左サイドメニューの　環境設定＞テンプレートの設定　です。

まずは共有テンプレートの中からvicunaさんのテンプレート名：vegaをダウンロードして、適用します。

vegaを適用したら、その同じ画面の中段以降に、以下のような部分があります。

この英数と記号で記述された部分がHTMLソースです。

HTMLソースが記述してある右部分にスクロールバーがあるので、ゆっくりスクロールしながら全部のソースを見てください。

ここに、トップページ始め全てのソースが記述されています。

次に、スクロールしながら、

＜div id=”utilities”＞
＜！– ★ナビゲーションはじまり –＞

を見つけてください。

およその位置は下記画像で見てください。

（クリックで拡大）

次に、下にスクロールして

＜/div＞＜！–end utilities–＞
＜！– ナビゲーション終わり –＞

を見つけてください。

およその位置は下記画像で見てください。

（クリックで拡大）

＜div id=”utilities”＞
　　　　　　　　：
この間にあるのが、サイドバーの項目
　　　　　　　　：
＜/div＞＜！–end utilities–＞

vicunaのサイドバーの構造は下記の図のようになっています。

FC2のテンプレートの場合、cssを見ると1カラムと2カラムの設定になっているので、気にしなくて大丈夫です。（注1）

（注1）
vicunaさんのテンプレート名：future、warship、bazookaの3つは、＜dl class=”navi”＞＜/dl＞と＜dl class=”others”＞＜/dl＞とでデザインに違いがあります。

（訂正）
上記の図では「３カラムの時はここで分かれる」とありますが、正しくは「1カラムと３カラムの時はここで分かれる」です。

次はサイドバーの各項目を見てみます。

まずは初期設定の状態で一番上にある「About」
HTMLソースでは以下の部分

＜dt＞About＜/dt＞
＜dd class=”about”＞
＜！–myimage–＞
＜p class=”profImg”＞＜img src=”＜%image＞” width=”120″ height=”120″ alt=”プロフィール画像” /＞＜/p＞
＜！–/myimage–＞
＜p＞Author: ＜%author_name＞＜/p＞
＜p＞＜%introduction2＞＜/p＞
＜/dd＞

出来上がりのブログでは以下の部分

（プロフィール画像を設定していないので、画像が表示されていません。）

HTMLと出来上がりの関係

つまり、

＜dt＞タイトル＜/dt＞
＜dd class=”＊＊＊”＞
　　～
＜/dd＞

～の中に＜ul＞とか＜li＞とか＜table＞とかいろいろ記述されていても、

＜dt＞タイトル＜/dt＞
＜dd class=”＊＊＊”＞
　　～
＜/dd＞

が1カタマリでカテゴリーとかカレンダーとかの項目を表示します。

カテゴリーであれば、以下のカタマリ部分

＜dt＞Categories＜/dt＞
＜dd＞
＜ul＞
＜!–category–＞
＜li＞＜a href=”＜%category_link＞” title=”＜%category_name＞”＞＜%category_name＞＜/a＞＜/li＞
＜!–/category–＞
＜/ul＞
＜/dd＞

を、以下の図のように好きな位置に貼れば移動完了です。

＜dd＞、＜ul＞、＜li＞、＜dt＞、＜div＞等の記号が何を表すのかは、google等で検索してください。私も全部は知りません。知らなくても、FC2とvicunaはカスタマイズできます。

ちなみに、＜/dd＞は＜dd＞に対応する記述で「＜dd＞で囲むのはここで終わり」を示します。リンクも＜a href=”＊＊＊”>ではじまって、＜/a＞で終わりますよね。「/」はここで終わりの印です。

うまくいかなくなったり、わかんなくなったら、またテンプレートをダウンドードすれば、大丈夫。

vicunaさんのテンプレートに限らず、いろんなデザインのいろんなテンプレートをダウンロードして、使うと面白いですよ。HTMLとかCSSの勉強にもなりますし。で、FC2で慣れたら、次はMTとかwordPressとかもね。

誤字脱字は許してね～♪

vicunaさんのテンプレートに限らず、FC2のプラグインに対応していない、テンプレートにも応用できると思います。

ただし、製作者さんによっては、＜dt＞＜/dt＞＜dd＞＜/dd＞ではなく＜div＞＜/div＞を使っているケースがあります。むしろこっちの方が多いかも。ポイントは、タイトルと表示要素のカタマリを見つけて、そのカタマリを移動すればOKです。

追加で横メニューのリンクの設定方法

の部分に対応するHTMLソースは

＜ul id=”globalNavi”＞
＜li＞＜a href=”＜%url＞”＞Home＜/a＞＜/li＞
＜li＞＜a href=”#”＞About＜/a＞＜/li＞
＜li＞＜a href=”#”＞Bookmarks＜/a＞＜/li＞
＜/ul＞

たとえば、私なら、
＜li＞＜a href=”#”＞About＜/a＞＜/li＞の
「＃」に「http://ana.moaroma.com/」
「About」に「アナ」と入れると、猫ブログにリンク完了。

勉強の邪魔にならない程度に試しに遊んで見てください。