Recent Entries


Categories


Recent Comments


Recent Trackbacks


Monthly Archives


profile

【+蝶子+】

  • Author:【+蝶子+】
  • blog名
    【FC2blog*daisuki】

    2児の母
    本館でスキン/テンプレ配布中。
    遊びに来てね♪
     ↓
    ★+ねっとだいすき+

All Entries


RSS Feed


Blog people


QRコード

QRコード

ブロとも申請フォーム


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

応援お願いします⇒FC2ブログランキング
【無料】アフィリエイトページ自動生成ツール
IDを書き込むだけで一気に商品リンクページが出来ちゃう!!

本館+ねっとだいすき+では可愛いブログ用掲示板スキンやオークション用テンプレートWEB用テンプレートなどを配布中♪アフィリエイト情報も♪
FC2カスタマイズ覚書

自分が覚えておくために記載しておきます。

FC2ブログカスタマイズ⇒サイドメニューの折りたたみ

サイドメニューの折りたたみですが、MTブログでも使用させて頂いている小粋空間様のスクリプトをFC2でも使用させてもらいました。
プラグイン被対応の場合なら問題なく出来ると思うのですが、プラグイン対応のままどうにかこのスクリプトを使用したくていろいろ考えてみました。

そしたら・・なんだ!!そういうことか

と意外とあっさり出来てしまった(笑)

★★★手順は以下の通り★★★

※プラグイン対応の場合の設定
※ツリー化してあることが前提


1)HTMLテンプレートにJavaScriptを挿入

まず折りたたみのスクリプトをテンプレートに追加します。

①menufolder.jsをDLする

小粋空間様こちらのページよりmenufolder.jsをダウンロードします。

②menufolder.jsを設定し直して保存します。

 (設定方法は小粋空間様で詳しく説明してあります)
注意!!
こちらのスクリプトはMT用なので文字コードはUTF-8で記述してあります。
FC2はeuc-jpなのでテキストエディタなどで文字コードをeuc-jpに書き換えます。

③jsファイルをアップロードする
 
先程保存したmenufolder.js
FC2ブログ管理画面⇒ツール⇒ファイルアップロードからUPする。
アップしたアドレスを覚えておいて下さい。

④テンプレートにJavaScriptファイル読み込みの設定

以下のタグを<head>~</head>に追加します。
<script type="text/javascript" src="http://jsファイルをUPしたアドレス/menufolder.js" charset="euc-jp"></script>


2)HTMLの変更&スタイルシート追加

CSSテンプレートに折りたたみをするメニュータイトルのスタイルをつけます。
こちらのページのサイドメニューの折りたたみ(v4.0)3.スタイルシート追加と記載してある部分のスタイルを参考にして下さい。

プラグイン対応の場合の設定ですので<%plugin_first_title>の前についているclass設定を変更します。
プラグインをすべて折りたたみしたいという場合は新たに以下のスタイルを追加でもよいと思います。

ここで迷ったのがidの設定だったのですが何とかひとつひとつidを付けれる方法はないかと考え、出た答えがプラグインの説明機能を使用でした。
少し強引なやり方ですがちゃんと動いてるからま、いっかって感じです(笑)

HTMLファイル プラグイン1の設定

<!--plugin-->
<!--plugin_first-->
<div class="sidetitle2"
id="<%plugin_first_description2>name">

<%plugin_first_title>
</div>


CSSファイル タイトルのスタイル設定

.sidetitle2 {
    width: auto;
    margin:3px 0px 0px 0px;
    padding: 0px;
    text-align: center; /* テキスト配置 */
}

.sidetitle2 a {
    width: auto;
}

/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#666666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}

/* マウスポイント時 */
.sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}


3)プラグインの編集

これで準備は整ったのであとはプラグインで設定しているメニュー項目を編集します。
例えばプラグインカテゴリ1に設定してあるRecent Entries(最新の記事)を折りたたみにする場合

※ツリー化してあることが前提となっています。

HTMLの編集を開く
青色の部分が追加するスクリプトです。
このときすでにツリー化のときに設定したidのlistを省いた部分をスクリプトに設定します。

<div id="newentrylist">
<ul>
<!--recent-->
<li><%recent_etitle><br /><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a>
(<%recent_month>/<%recent_day>)</a></li>
<!--/recent-->
</ul>
</div>
<script type="text/javascript">
<!--
FoldNavigation('newentry','on',false);
//-->
</script>


FoldNavigation('idName','initState',viewListNumber);
 ↓
FoldNavigation('IDを記入','最初から開く場合=on',リストの記事を数えない場合);

そして最後にプラグインの編集で下部に記載するプラグインの説明文のところに
newentry」を記入すれば完成です。

プラグイン対応の場合タイトル部分のidのnameとなる箇所を
プラグインの説明文を使い設定するということです。

保存後最新の記事のタイトルをクリックすると折りたたみ表示が出来ていると思います。
スポンサーサイト

応援お願いします⇒FC2ブログランキング
【無料】アフィリエイトページ自動生成ツール
IDを書き込むだけで一気に商品リンクページが出来ちゃう!!

本館+ねっとだいすき+では可愛いブログ用掲示板スキンやオークション用テンプレートWEB用テンプレートなどを配布中♪アフィリエイト情報も♪

★--コメント--★

初めまして。
折りたたみしたく何度もこちらに足を運んでおりますが出来ません。
FC2のサポート掲示板なども見ましたが、余計こんがらがってしまって・・・
2)HTMLの変更&スタイルシート追加 が上手くいきません・・・
見本どおりしてもテンプレが崩れてしまいました。

<!--plugin-->
<!--プラグインカテゴリー1(左)-->
<!--plugin_first-->
<div class="sidetitle"><%plugin_first_title></div>
<div class="sideblock">
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</p>
<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
</div>
<!--/plugin_first-->
<!--プラグインカテゴリー1(左)-->
<!--/plugin-->

何処を修正したら良いのかアドバイス頂けないでしょうか?宜しくお願いします。

はじめまして。

ゆーたんさんはじめまして。
コメントありがとうございます。
でもブログカスタマイズのご質問は受け付けていないので簡単にご説明しますね^^;

記事に書いてある通り、少し強引なやり方をしていますのでテンプレートによっては出来ない可能性もあります。

設定するのは、
HTMLでプラグイン全体をDIVで囲みそこにIDをつけます。
このIDを設定するのがプラグインの設定の説明文です。
例えば説明文に記入した【bbs】という文字をそのままbbs欄のIDに設定させるようにしてあります。

プラグインのHTML設定でスクリプトを記載すれば完了です。

これはすでにツリー化してあり、nameとlistの使い方を理解していないと分かりにくいかもしれません。

もっと分かりやすい方法もあるかと思われますので検索等してみて下さい。
お役に立てず申し訳ありません。

お返事有難う御座います。

お返事有難う御座います。
初心者には難しいみたいですね(^-^;

ツリー化も出来ていて折りたたみも出来ていたのですが、 どうしても保存?が出来ないのです。
来て頂いた人が見たい所だけ見て次回も同じメニューを開いた状態にしたかったのですが・・・
FC2サポートを検索してもこの方法は載っていませんでしたv-406
蝶子さんのブログみたいにしたく頑張っていたのですが初心者の私では理解出来ませんでした。
とても残念ですが諦めます。

サポートされていないのに教えて頂き、気持ちに感謝致します。
また遊びにきますね。
有難う御座いました。

ゆーたんさん♪

折りたたみ出来ていたのですか^^

それなら話しは早いです♪

折りたたみ状態を保持する方法はスクリプト内の設定で行います。

「menufolder.js」の下の方にある設定を変えるだけで簡単に変更出来ますよ。

// 状態保持フラグ
// 状態保持を有効にする:true
// 状態保持を無効にする:false
var holdState = true;
 ↑
これをtrueにしておけばクッキーにおり前回の折りたたみの状態で保存されます。

スクリプトを編集する時、エンコードを間違えないようにして下さいね。

はじめまして・・・

カスタマイズについての質問は
受け付けていないと上記に書いてありましたが・・・すみません・・・・

蝶子さんのテンプレを使っていますが
蝶子さんは表示がが閉じてある状態のプラグインが
いくつかありますが、簡単には設定できないのでしょうか??
やはりもう一度ファイルをDLしてやりなおすしかないのでしょうか???
プラグイン1の
<DIV class="js_open">を
closeにしたらすべて閉じてしまうし・・・・・
よろしければ教えていただけないでしょうか?


★--コメントの投稿--★




管理者にだけ表示を許可する


 | BLOG TOP | 


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