WordPressの記事本文に見出しをつける

スポンサーリンク

このブログサイトは、WordPressというサーバインストール型のCMSソフトを使っている。

WordPress(以下WPと略)は、MovableType(以下MTと略)というソフトと比較すると、日本語の資料がやや少ないのが難点だが、機能的にはたいへん優れており、また無償で提供されているのもありがたい。MTはMT4のバージョンになって、ようやくWPの機能に追いついてきたという感じ。WPファンとしては、「MTよ、ちょっと遅れてるけど、早くついてきなよ」ってなもんである(笑)。
※MTのほうが優れている点もありますよ。これはWPファンの贔屓目サイトですから。

WPは、世界中で数多くのプラグインが開発されており、本体だけでは足りない機能をプラグインをインストールすることで実現できるようになっている。

このブログサイトでも、実は、27個ものプラグインが動いているのだ。携帯対応やカテゴリの見出し表示、フリッカーとの連携など、いくつかはすでに紹介しているが、基本的なものの中でも、GoogleSitemapsとか、Next/Previous Post in same Categoryとか、Title Suffixとか、WP-AddQuicktagなんかは、いつか紹介したいと思っている。

で、このプラグインの中身だが、PHPという言語によって書かれている。つまりPHPをバリバリに書ける人なら、プラグインを開発できるということである。

僕にとってPHPは、まったくのちんぷんかんぷんである。でも、PHPはテキストで書かれている言語なので、PHP作者の指示に従って、細かな修正をすることはできる。

サイトのデザインを決めるテーマというファイルも実はPHPとスタイルシートで提供されている。トップページやブログ投稿ページ、サイドバーやヘッダーなどすべて別々のPHPで構成されており、それらのテーマファイルのデザインを決定するのがスタイルシートCSSファイルである。

僕のようなプログラム素人にとって、手を出しやすいのが、このテーマファイルまわりである。記事のタイトルの近くにGoogleAdsense広告が挿入されているが、これはシングルポストというPHPファイルに僕が修正を加えたから。サイドバーに関しては、Widgetという機能がついており、とても簡単に順番を組み替えることができる。

さらにスタイルシートを編集することで見栄えを大きく変更することが可能だ。

今回、僕は記事を書いていて、長い文章に小見出しをつけたいと思った。タイトル以外は、現在、同じようなフォントでだらだらと書いているが、長文になると、いささか読みにくい。そこで、小見出しを2つのレベルでつけられるようにスタイルシートに下記のような追加修正を加えた。

h2.title02{
margin: 0.7em 12% 1.0em 10px;
padding: 0.3em 0.5em 0.2em 0.5em;
border-style: solid;
border-width: 0 0 1px 18px;
border-color: #7878C9;
font-size: 18px;
}
h3.title02{
margin: 0.9em 15% 0.5em 10px;
padding: 0.2em 0.5em 0.1em 0.5em;
border-style: solid;
border-width: 0 0 1px 16px;
border-color: #8C8CDE;
font-size: 15px;
}

そして、管理画面から記事を書くときに下記のようなタグを埋め込む。


<h2 class="title02">中見出しはこんな感じ</h2>
<h3 class="title02">小見出しはこんな感じ</h3>

すると、このように表示される。

スポンサーリンク

中見出しはこんな感じ

小見出しはこんな感じ

これで、これからは見出しをつけながら記事を書くことができるようになった。

コメント

タイトルとURLをコピーしました