最近DjangoでWebアプリを作っていたらhtmlやCSSを生で書くようになり、見栄えをいじっていたらWordpressも少し見栄え良くできないかな、できるだけ楽に改良できたらいいなと思って通勤中に色々いじってみました。
今回は以下を実施しました。
このArticleもこれを使って書いていきます。
- ”Simplicity2″の子テーマでCSSを追加して”h4～h6″の見栄えを変更
- プラグイン”Easy Table of Contents”で”h4～h6″を判別して目次を自動作成
- プラグイン”Shortcodes Ultimate”でアコーディオン（リストの開閉）
目次
“Simplicity2″の子テーマ編集
Simplicity2とは
WordPressのテーマです。このページもSimplicity2のお世話になっています。
詳しくはこちら
なにせシンプルでカストマイズが色々できるから便利で選びました。
そして、私はなるべくコードを書かない、使えるものは使い倒すの方針でしたが、いざという時の為に子テーマを導入していました。
子テーマについてはこちら
つまり子テーマ側で作業することで親の変更時に変更強制的に戻ってしまったりすることが避けられるんですね。
って事でCSSを編集していきます。
CSSの編集
後述しますが、目次を自動作成する際に “h1～h6” タグを使って目次ページが生成されます。
このページにも目次ページができていますよね。
Simplicity2 では “h1～h6” の Style があらかじめセットされています。
“見出し弐～見出し六” の例にあるように、”見出し参” に下線、”見出し四” に破線がセットされています。
”見出し壱～参” はフォントが大きいので私は ”見出し四～六” を使おうと思ったのですが ”見出し四” には破線がセットされていて邪魔でした。
これらデフォルトのCSSを打ち消して自分の設定を入れました。
WordPressで「外観」→「CSSの編集」で以下のようにコードを入力
入力したのは以下のCSSです。
.article h4{
background-color:#ccffff;
border-bottom: none;
}
.article h5{border-bottom: solid;}class や要素は「Chrome」のディベロッパーツールで確認ですね。ですが「.article」クラスで処理されているということです。
h4 に背景色を設定して破線を打ち消し、h5 は下線を追加しました。
このページも背景色と下線がセットされていると思います。
“Easy Table of Contents”で目次を自動作成
設定
プラグイン “Easy Table of Contents” を導入したら設定を好みに変更します。
私が設定したのは以下。
”Shortcodes Ultimate”でアコーディオン
設定
プラグイン”Shortcodes Ultimate”を導入。
プラグインの設定は特にいじっていません。
設定は以下参照。
プラグインを導入するとこんな感じで ”ショートコードを挿入” ボタンが WordPress エディタに表示されます。
ボタンを押下すると以下の画面が表示されます。
アコーディオンを選択すると以下の画面が表示されます。
コンテンツに表示されるのは人によって違いますよ。
styleとかiconは何種類かあります。
このページが参考になりました。
アコーディオン以外の事も書かれています。
記事のこの部分自体もアコーディオンですね！
これらのことをして大分見た目もすっきり、スタイリッシュになったかなと思います。
サーバー関連の設定を書くと長ったらしくなるからアコーディオンはいいですよね。
Lotus Notesのセクションみたいでとても良いです。