1

2012.05.12 Saturday

サイドメニューのツリー化スクリプト for Serene Bach

カスタマイズメモ~その1~はサイドメニューのツリー化です。
ほとんどの方が導入されているといっても良いぐらい有名でメジャーなプラグインですよね。
私の場合、このプラグインと併用して


サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する


という手法も取り入れています。

プラグインの導入はサイドメニューのツリー化スクリプト for Serene Bachの記事の第1項から順番に設定していけばOKなのですが、私がここでつまづいたのが、リンクリストだけツリーの最後が終わらないということでした。ツリーの途中で表示されるべき画像がツリーの最後にも表示されてしまっていたんです。
これは↑のリンクの記事の過去コメントを読んで解決しました。私と同じ現象だった人がいたようで、返信のとおりに設定し直したらきちんとツリーが終わるようになりました。
参考に当ブログのサイドメニューツリー化に関する部分のcssのタグをご紹介します。


/* サイドメニュー */
.side {
margin: 3px 0 20px;
background: none;
color: #333;
font-size: 75%;
line-height : 15pt;
letter-spacing : 1pt;
}
ul.tree {
margin: 0 0 0 3px;
padding: 0;
font-size: 10px;
list-style: none!important;
}
ul.tree ul {
margin: 0;
padding: 0;
}
ul.tree li {
margin: 0px;
padding: 0 0 0 20px;
background: url(w4.gif) no-repeat 1px 0.15em;
list-style: none!important;
}
ul.tree li li {
margin: 0;
padding: 0 0 0 15px;
background: url(icon_57_rw09.gif) no-repeat 5px 5px;
list-style: none!important;
}
ul.tree li li.tree_end {
background: url(icon_57_rw09.gif) no-repeat 4px 0;
list-style: none!important;
}


ul.tree liが親カテゴリに関する設定です。親カテゴリに使いたい画像をここで設定します。このブログの場合はw4.gifになりますね。

ul.tree li liが子カテゴリに関する設定です。同じように設定します。このブログの場合はicon_57_rw09.gifになります。


画像は全てindex.htmlと同じディレクトリにアップしてくださいね。
私もそうでしたが、画像とリストが微妙に合わなくなったりした場合、marginやpaddingの値を変更すると綺麗なリストになると思います。この値はブログのテンプレートによってマチマチだと思うので、ご自分で値を変えつつプレビューで確認してピッタリくる値を探してみてください。
私の場合、まずは本来設定されている値を大きくするか小さくしてみるなりして、その後ツリーがどう表示されるか一度確認した後、再度数値を設定し直してみるといった方法を取りました。正直marginやpaddingの違いが調べたのにも関わらずあまりよく分かっていないので[顔18]

デフォのタグで私と同じようにリンクリストだけツリー化が終わらない場合は、デフォのタグである



<script type="text/javascript">

<!--

generateNormalTree("linklist");

//-->

</script>



のタグを



<script type="text/javascript">

<!--

generateTreeForTreeStructure("linklist");

//-->

</script>


に書きかえると上手く表示されますよ。(記事のコメント参照)


それとこちらの記事のデフォのタグのままだと、リストマーク(○や●等)が表示されてしまうことがあるかもしれません。
まあ、私がそうだったんですが。
この場合↑のcssタグをご覧になると分かると思いますが、


list-style: none!important;


というタグを加えることで解決できました。そして、これも私がそうだったんですが、他は左寄りなのになぜかカテゴリーの部分だけ表示が中央寄りになっていたんですね。これも、とあるcssタグに原因があります。



/* サイドメニュー(サブカテゴリー用) */
.side #categories ul {
padding-left: 16px;
}
.side #categories ul ul {
padding-left: 10px;
}
.side #categories li {
list-style-type: circle;
}



これがデフォのタグになります。ここのpadding-leftの値が影響していて、カテゴリーの部分だけ表示が中央寄りになっていたんです。
なのでこの値を小さくすると左に寄ってくれます。
他のメニュー表示と見比べながら、値を小さくしていくと良いと思います[手]
ちなみにこのブログでは16px→1px 10px→2pxになっています。


ツリー化するだけでも随分あちこちつまづいてしまった私ですが、とりあえず自分の納得いくデザインにすることができたので、一安心でした[顔1]


カスタマイズメモ~その2~へ続く・・・?

2012.05.06 Sunday

使用プラグイン&カスタマイズ参考記事一覧

Serene Bach テンプレート
[四つ葉]大元のテンプレートをお借りしました。非常にシンプルでカスタマイズしやすいテンプレートです。


CSSでタイトルバナーに画像を表示する
[四つ葉]ブログタイトルを画像にする際参考させてもらいました。


CSSでエントリータイトルに画像を表示する
[四つ葉]↑の記事のエントリータイトルバージョンです。


リストマークの画像のずれを修正する
[四つ葉]ツリー化プラグインを使用した際の、リストマーク表示を調節する際参考にさせてもらいました。


休日表示付リアルタイムカレンダープラグイン for Serene Bach
[四つ葉]カレンダーをより見やすくする際参考にさせてもらいました。


サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
[四つ葉]ツリーのデザインを変更する際参考にさせてもらいました。


サイドメニューのツリー化スクリプト for Serene Bach
[四つ葉]サイドメニューをツリー化する際参考にさせてもらいました。


記事(エントリー)に絵文字を使う for Serene Bach
[四つ葉]記事に絵文字を使えるようにしたくて参考にさせてもらいました。ちなみに別設定でコメントにも使えるようになります。


ページナビゲーション展開
[四つ葉]ページ表示を1.2.3.4のように個別にリンクし、ジャンプしやすくなるようにする際参考にさせてもらいました。


月別アーカイブ簡易表示
[四つ葉]今年度分の月別アーカイブをツリー化する際参考にさせてもらいました。


カテゴリーINDEX化プラグインカテゴリーとアーカイブのIndex化
[四つ葉]カテゴリーやアーカイブページで、該当する記事を一覧表示させる際参考にさせてもらいました。


並べ替え
[四つ葉]リンクやカテゴリーの個々のリストの順番を並び替えやすくする際参考にさせてもらいました。


パンくずリスト
[四つ葉]個別記事ページに「階層/カテゴリー」(←パンくずリスト)を表示させる際参考にさせてもらいました。


love cherry
[四つ葉]サイトで使える様々なHTMLタグを紹介しているサイト様です。タグの他に素材やスキンも配布されています。

2012.05.06 Sunday

苦労の末・・・

先日のブログテンプレート変更に続き、今回は大幅にデザイン等見直してプラグインも入れたりして、自分好みのブログに仕上げることができました[手]
大元のテンプレートは小粋空間様で配布されているもので、ダウンロードした時点でのデフォルトデザインはこちらです。
随分といろいろ手を加えてカスタマイズさせていただきました。今のこのデザインに落ち着くまでとても一筋縄ではいきませんでした[顔14]最初も最初、デフォルトの3カラムのテンプレートを2カラムにするのにつまづいた人間です。その後もプラグインを導入する度、cssを変更する度、つまづく人が多いと言われるところにはほぼ全てつまづいています[顔18]その度に小粋空間様はもちろんあちこちのサイトで調べ回り、何とか自己解決していきながらのカスタマイズでした。
中でも、解決するまでかなりの試行錯誤を繰り返した部分もありますので、その辺のことをカスタマイズに関する覚書として、今後ちょくちょく記事にしていこうと思います。
普段の日記とは関係ない記事になるので、興味のない方はもちろんスルーしてくださって構いません。

それにしても、やはりブログにしてもサイトにしても、カスタマイズする作業は楽しいです[ハート1]

2012.05.01 Tuesday

変更

ブログのデザインを変えてみました。

基本的な作りは変わりませんが、写真は素材屋さんで一目ぼれしたもので、メインの色をオレンジから緑に変更。
以前より少し落ち着いた感じのデザインになっていると思います。
写真と色で大分雰囲気が変わりますね♪

私も自分でテンプレとか作ってみたいですね。
そのためにはテンプレ作成に関わる知識をいろいろ身に付けないと。
タグとかCSSとか基礎から学べる本があったら読んでみたいなあ。

2011.02.14 Monday

日記を新しくしました

日常の日記をもう少し見やすくしたいなぁと考えていて、どういう形にしようか迷った結果、Serene Bachにしてみました。
以前の日記から記事のデータ移行をして、ようやく公開できる形にまでなりました。
これは普通のFC2やジュゲムといったブログサービスとは違って、前回の日記同様CGI仕様になります。
なので、大手ブログサービス会社によくあるサーバー混雑等でブログの更新ができないといったトラブルがなく、表示も重くなったりすることもなく基本はスムーズだと思います。
本当にブログを更新しているような感覚で記事が書けたり写真をアップできます。
いやはや凄いですね(^^)
ゲームブログも本当はこんな感じにしたいけど、さすがにあっちのブログは画像もいっぱいあるし、データ移行が大変な作業になるので諦めます。

サーバー混雑が気にならないのはとっても嬉しいですね♪
でも、私自身まだあまりSerene Bachの仕組みを理解できていないので、テンプレートをいろいろいじるみたいなことはあまりできないかなぁ・・・。
まだまだ手探りの状況です。
1