スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テンプレ改造基本編「ブログパーツ」 
2005 07 24
Sun 05:45:25

カスタマイズ  Comment 3  Trackback 0  edit.

え?と、基本編と書きましたが、一からという事ではなく、一番テンプレートを使って改造を考えると、まず浮かぶのがブログペットとかブログパーツを付ける改造だと思います。
これは自分のテンプレートだけじゃなく、FC2の全テンプレートに共通でもあり個人的に質問を受けたんですが、新規の記事にまとめてみようと思いました。

では詳しい事は下に。


まず、テンプレートに共通の「パーツを付ける。」ですが、構造的にテンプレートは
記事の表示部分とメニューの表示部分に分かれています。
FC2のカスタマイズ・マニュアルにもカラムの構造が絵で説明されてますので詳しくは書きませんのでそちらを参考に。

私が初めてテンプレートを作る時に参考にしたテンプレートも2カラムのもので
<!-- 最新記事一覧の設定 -->
<div id="wrapper">
<!-- 記事部分の設定 -->
<!--index_area-->

と言う部分から始まる記事表示部分の設定がされてます。
タグを見ると、<!--topentry--><!--comment_area--><!--trackback_area-->など
記事の表示やコメントの表示設定などの部分があり、その後に
<!-- メニュー部設定 -->
<div id="menu">



と、メニューの設定が続いているのがほとんどです。
パーツなどを付けたい場合、メニューの下に続けて貼り付けたい場合が多いです。
そう言った場合は、上の「メニュー部設定」の中を改造するわけです。
<!-- メニュー部設定 -->
<div id="menu">

・   この間にパーツなどのタグを貼り付ける事になります。

</div>

私のテンプレートで説明すると一つのメニュー項目(RE COMENTLINKSなど)は次の様に
メニュータイトルとその内容でひとまとめになっています。
<!-- メニュー部設定 -->
<div id="menu">

・・・・・・・・ここから始まります。・・・・・・・

<div class="sidetitle2" id="commentname">RE COMMENTS</div>   ←メニュータイトル
<div id="fo03">
<div id="commentlist02">
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br/><a href="<%rcomment_link>#comment">(<%rcomment_month>/<%rcomment_day>) <%rcomment_name></a></li>
<!--/rcomment-->
</ul>

</div></div>

<noscript>
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br/><a href="<%rcomment_link>#comment">(<%rcomment_month>/<%rcomment_day>) <%rcomment_name></a></li>
<!--/rcomment-->
</ul>
</noscript>


・・・・・・・・・ここまで。・・・・・・・・・・・

赤文字部分がメニュー項目の内容部分です。
<noscript>
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br/><a href="<%rcomment_link>#comment">(<%rcomment_month>/<%rcomment_day>) <%rcomment_name></a></li>
<!--/rcomment-->
</ul>
</noscript>

この部分は、自分のテンプレートでツリー化のスクリプトを使っているのでスクリプトに
対応していない場合を考えて書かれている部分ですので特に必要ではありません。

メニュー項目の間にブログパーツを入れたい時などは、


    ここにパーツのタグを貼り付ける
    
<div class="sidetitle2" id="commentname">RE COMMENTS</div>


</div>


</noscript>

    ここにパーツのタグを貼り付ける

上の様に赤文字の所に貼り付けるわけですが、一つ一つのメニュー項目の書き方を見極めて貼り付けるようにして下さい。

同じようにタイトルを付けたい場合は、このひとまとめの構造をそのままコピーする事で同じようにスタイルシートの適用を受ける事が出来ます。
<div class="sidetitle2">ブログペット</div>
<div>

パーツのタグはここに貼り付ける。

</div>

上の様なタグ構造で貼り付けるとタイトル付きのブログパーツを付けられます。

メニューの一番下に貼り付ける場合。↓
<div class="sidetitle2" id="linkname">MY LINKS</div>
<div id="fo06">
<div id="linklist02">
<ul>
<!--link-->
<li><span class="link_point">?. </span><a href="<%link_url>" title="<%link_name>"><%link_name></a></li>
<!--/link-->
</ul>
<ul>

</ul>
</div></div>

<noscript>
<ul>
<!--link-->
<li><span class="link_point">?. </span><a href="<%link_url>" title="<%link_name>"><%link_name></a></li>
<!--/link-->
</ul>
</noscript>

パーツのタグはここに貼り付ける。

</div>
</div>
</div>

<div id="navi" class="navi">
<!--prevpage-->


以上がパーツの基本的な貼り付け方ですが、一つのメニュー項目の構造が分かると自分なりに項目の入れ替えなども簡単に出来るようになるでしょう。
(例え詳しいタグが分からなくても似たような構造をしているので何となく分かります。)

これは番外編ですが、タブを使ったメニューがこのテンプレートには有ります。その為、記事の左にある「メニューは全部要らない」と、言うような方は↓のタグの間をザックリと削除します。
<!-- メニュー部設定 -->
<div id="menu">

この部分を削除すると記事だけのページになります。
(またはブログパーツだけにする場合、削除してパーツのタグを貼り付ける)


</div>
</div>
</div>

<div id="navi" class="navi">
<!--prevpage-->

こんな感じで改造してみて下さい。
勿論、こういった作業をする場合は、改造する前のものをメモ帳を使ってバックアップします。
バックアップを忘れて「改造していたら表示が駄目になった」って事で泣きを見なくて済みますし。
それとFC2の管理画面で作業すると見づらいので間違う事が多いと思います。
そう言った時は、メモ帳を使って改造し、それをコピー&ペーストで行うと作業がはかどります。


追加補足として、自分のブログではリンク集に自動更新通知が出来るスクリプトが使われてます。
これはMyblogListと言う無料のサービスを使っています。
ここで登録するとご自身のスクリプトが作られますが、その貼り付け場所はどこでも構わないのですがやはりリンク集に付けたいですよね。
<div class="sidetitle2" id="linkname">MY LINKS</div>
<div id="fo06">
<div id="linklist02">
<ul>
<!--link-->
<li><span class="link_point">?. </span><a href="<%link_url>" title="<%link_name>"><%link_name></a></li>
<!--/link-->
</ul>
<ul>
   ・・・・ 更新情報 ・・・・<br>
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js?code=   "></script>
</ul>

</div></div>

上の様に赤文字がスクリプトを増やした部分です。(js?code=  はそれぞれ違います。)

これでFC2で登録したリンク集の後に更新情報としてMyblogListを使った情報が表示されます。

今現在、私が使っているテンプレートindex_tab02やindex_tab02_monoは、トップページと記事表示ページの両方にリンク集が有りますので、スクリプトは両方に貼り付ける必要が有ります。

比較的上の方に書かれているリンクに関するタグ部分↓
<td>
<!-- link -->
<div id="menu9" class='0' onclick="menushow(9);">
▽<a href="javascript:void(0)">MY LINKS</a></div>
<div id="sub9" class="menu3">
<ul>
<!--link-->
<li><span class="link_point">?. </span><a href="<%link_url>" title="<%link_name>"><%link_name></a></li>
<!--/link-->
</ul>
<ul>
   ・・・・ 更新情報 ・・・・<br>
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js?code=   "></script>

</ul>
</div>
</td>


基本編で説明したかなり下の部分に書かれたリンクに関するタグ部分↓
<div class="sidetitle2" id="linkname">MY LINKS</div>
<div id="fo06">
<div id="linklist02">
<ul>
<!--link-->
<li><span class="link_point">?. </span><a href="<%link_url>" title="<%link_name>"><%link_name></a></li>
<!--/link-->
</ul>
<ul>
   ・・・・ 更新情報 ・・・・<br>
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js?code=   "></script>

</ul>
</div></div>


上のように両方にスクリプトを貼り付ける事で、タブのリンク集とメニューのリンク集に同じ更新情報として○○○NEW!
と言うような表示で更新されたリンクページが分かるようになります。

以上が基本編と個人的な質問への答えを含めた改造法です。

つまりは詳しいタグを知らなくても似たような書き方をしている部分が一つの項目であるという事を理解できればパーツなどの貼り付けは意外と簡単だという事です。

まぁ?普通のテンプレートでは一区切りにスペースを入れている事も有りますし、注釈が書かれている場合も有りますのでそれを見つける事ですね。

それでも「タグってなに?」とか「改造ってどこでやるの?」という初歩的な事は分かっている事が肝心ですけど。(^^;

Re comments.

「お尋ねします」
はじめまして、藍と申します。
この度こちらのテンプレートをお借りました。
お借りしたのは『index_tab_tmp02b』です。
実はBlogPeopleを設置しようと思い、こちらの記事を参考にさせて頂いたのですが当方のブログに反映されません。
他にも色々と読ませて頂いて参考にさせて頂こうと思ったのですがどうしても出来ません。
こちらに質問していいものか悩んだのですがアドバイスを頂けますでしょうか?
もし不適切であれば削除して下さって構いません。
宜しくお願い致します。
2005/10/13(木) 10:22:21 [URL] 藍さん [編集]
「藍さんへ」
はじめまして。管理人です(^ー^)
Blogpeopeleの設置ですが、このバージョンはプラグインに対応しています。
ですので追加する場合は、プラグインを有効にしてフリーエリアを
編集する事が必要になります。
Blogpeopeleのスクリプト(使っていないので詳しくは分かりませんが)を
フリーエリアの編集で「フリーエリアの内容の編集」という所に
貼り付けて「変更」ボタンを押す事で反映されます。
フリーエリアの編集法やプラグインの使い方についてはサポートフォーラムなどで
過去記事が沢山ありますのでそれを参考にすると便利だと思います。
どういう方法で設置しようとしたのかなど、詳しい情報が有れば
アドバイス出来るのですが。
2005/10/13(木) 16:33:17 [URL] 有希之武さん [編集]
「ありがとうございました」
管理人様、ご丁寧にありがとうございます。
教えて頂いたようにやってみた所なんとか出来たようです。
私はプラグインは有効になっていました。
しかしフリーエリアを追加していなかったんです。
フリーエリアが無いのにスクリプトが貼れるわけがありませんでした(汗)
多分、出来ていると思います(自分で見てる分には出来ているので)
お手を煩わせてしまって申し訳ございませんでした。
本当にありがとうございました。
2005/10/13(木) 19:38:13 [URL] 藍さん [編集]
Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。