h2とかh3タグで目次を作るPlugin

wordpressで作るページに自動で目次をつくるPluginがあります。
この機能を提供するPluginはたくさんあるようですが、
いくつか試した結果Table of ContentsというPluginにしました!
Pluginの名前がまさに目次(table of contents)Σ(゚Д゚;ヒネリゼロ!

wordpress Plugin 「Table of contents」をインストール

インストールは簡単ヽ(´ー`)ノ
いつものように検索してきて「インストール」をクリック。
これで完了しています♪
f:id:kuchida123:20110905005556g:image:w360

wordpress Plugin 「Table of contents」を使う

使い方は至ってシンプル。
目次を挿入したい位置に以下を書くだけ!

[toc]

そうすると以下のような目次が固定ページ中に現れます♪
f:id:kuchida123:20110905005557g:image:w360

しかし、、、む。。
なんか目次の横に本分が回りこんでしまっています。。
これは正直、自分のイメージしていたものとちょっと違う。
自分は目次に続いて本分を表示させて欲しいのです。

イメージ的にはPukiwikiの#contentsと同じのを期待してました。
ただ、本分の位置はちょっとイメージ違いではあったものの、
目次の表示はとてもシンプルでうまくまとまっていたので
見やすくて気にいりました♪

「回り込みさえ回避できればなぁ( ´ー`)フゥー...」
ということで、CSSとの戦いが始まりました。

wordpress Plugin 「Table of contents」回り込みとの戦い

ここでFirebugを使って、テーブル要素を見てみました。
目次自体はdivタグでくくられていたので、
プラグインの「編集」からPHPを上からズラズラ眺めて、
いろいろ改行
を入れてみたものの期待通りにならない。
「何で回り込みになる設定になっているんだo(`ω´*)o」

設定を探してみても、章や段落の表示方法ばかり出てきて
期待するような設定はありません。

そこで「HTML 回り込み」などで調べてみるとDIVタグには
回り込み設定があり、CSSではfloatという設定みたい(゚∀゚ )

ということでサーバにログイン!
関連しそうなファイルをfloatでgrepしていると発見!

$ cd /www/xxxx.xxx/wp-content/plugins/content-table/css
$ grep float *
css_front.css:  float:left;
コレ━(゚∀゚)━チャウ!?

ということでこの部分を編集します。
ちゃんとバックアップもとります♪

$ cp css_front.css css_front.css.bak
$ sudo vim css_flont.css
left を clear に変更
$ diff css_front.css css_front.css.bak
10c10
<       float:clear;
---
>       float:left;

ということで再描画すると!!
キタ━(゚∀゚)━!
f:id:kuchida123:20110905005558g:image:w360

これで理想通りです♪

まとめ

今までのwordpressはほとんどクリックでやっていましたが、
とうとうPHPやCSSの中身を見て編集するような段階になってきました。

「自分の持っていたイメージとちょっとだけ違う><」
というような場面は今後増えてきそうな気配です。
でも、理想を目指し、臆せずビシバシ突き進もうと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です