WordPressのアップデートのついでに、使用中のテンプレート Magbook（WPではテーマと呼ばれる）を少しカスタマイズしました。
今回カスタマイズしたのは次の3ヶ所です。
- カテゴリーの変更・新設
- ページ上部のメニューバー追加
- サイドバーのカテゴリー説明
カテゴリーの変更・新設
記事数も少しずつ増えていき、カテゴリーを後から追加したくなったり、元々ある記事を新しく作ったカテゴリーに分類させたくなったりします。
例えば自作曲の完成音源を載せている記事では、これまでなら「Songwriting」というカテゴリーに分類していましたが、同じカテゴリーにはDTMソフトの使い方やMIDIサウンドフォントの紹介記事がありました。
マイベスの曲だけを分類したカテゴリー、その他楽曲制作関連の記事を分類したカテゴリーをそれぞれ作ったほうが、トップページで表示させたいカテゴリーを選ぶ際に見栄えが良くなると思って「MYSONG 自作曲公開」カテゴリーを新設しました。
他にもPCソフトについて書いている記事がありますが、1件でありながら分けたほうが後々の整理の手間を少しでも省けると思って「SOFTWARE PCソフト」を追加しました。
メニューバー追加
Magbookではページの上部にメニューバーがあり、カスタマイザーで好きなリンクのURLを入力したり、ラベルをつけたりすることができます。
WPダッシュボードからは「カスタマイズ」→「メニュー」→「Main Menu」の順にアクセスします。
「項目を追加」をクリックして右側に出るバーで、このサイト内の記事やカテゴリー等のアーカイブページ、他サイトへのリンク（カスタムリンク）を追加できます。
また、追加した項目を並び替えることもでき、好きな位置に項目を配置できるのです。
今回はメニューバーにカテゴリーアーカイブページへのリンクを追加しました。表示される名前は変更可能で、このブログの場合は各カテゴリーの日本語名にしました。（ex. 「Diary」→「日記」）
なお、Magbookではメニューバーにカテゴリーページへのリンクを追加した場合、リンク色が各カテゴリーのテーマカラーで表示されるようになっています。
カテゴリーページでは、メニューバーで表示中のカテゴリー名のページが判別できるようになっています。濃い青色の文字が、表示中のカテゴリー名のページです。
カテゴリー説明を追加
トップページでは各カテゴリー別の最新記事を表示させたテーマ専用のウィジェットを配置していますが、このウィジェットはカテゴリー名を日本語にした場合、動作しません。
海外製テーマなので仕方ないと思いますが、デザインが気に入ったので使っています。
カテゴリー名は現在、英単語の名前にしていますが、日本語を併記すべく、テキストウィジェットを作成し、そこに各カテゴリーページへのリンクと、分類している記事についての説明文を記載しました。
ダッシュボードからは「カスタマイズ」→「ウィジェット」→「Magbook Template Sidebar Section（トップページのウィジェット配置）」か「メインスライダー（投稿ページ等でのウィジェット配置）」にアクセスし、「ウィジェットを追加」で「テキスト」を選択します。
ただし、メインスライダー項目を出すには、プレビュー画面で一旦何らかの投稿ページを表示させた状態にする必要があります。
まずは、HTMLモードを使って<div class=”○○”>■■</div>と記述します。
その次、別途スタイルシートで「.○○{ (カスタマイズ内容) }」と記述してフォントサイズや余白、背景色の指定をします。
すると、「■■」の内容が単なるテキストと異なり、カラフルな背景に白文字のデザインとかで表示されます。
一例として、英語のカテゴリー名を表示させている<div class=”cats1″>のスタイルシートの記述は次の通りにしています。
.cats1{
background:#999; /*背景色*/
color:#fff; /*文字色（白文字になる）*/
display: inline-block; /*次の行で指定されたdiv枠を横並びにできる*/
margin: 0.3em 0.3em 0.3em 0; /*枠の外の余白指定*/
padding: 0.2em 0.5em; /*枠の中の余白指定（塗りつぶしの領域を広げたり狭めたりする）*/
font-size: 0.8em; /*文字の大きさ。「em」はデフォルトで設定したフォントサイズに依存した大きさになり、0.8emはデフォルトサイズの8割の大きさ（デフォルト15pxであれば表示されるサイズが12px）*/
text-transform:uppercase; /*アルファベットはすべて大文字*/
border-radius: 2px;} /*角の丸み（px数が大きいほど丸みを帯びる）*/このスタイルシートを適用している文字の部分は「DIARY」で、グレーの背景に白文字で表示されています。余白も取ってあるので、ラベルのようにも見えます。
各カテゴリー毎に色を変えてスタイルシートに記述しているので、少し手間を省くため、Excelでカテゴリーの名前や通番、説明、テーマカラーをまとめた表を作り、使い回すHTML記述やCSSの内容と併せて関数で合体させています。
つまり、カテゴリー名や説明の内容を変更するときは表をいじるだけで済みます。
これを全てのカテゴリーに適用させ、関数を使って出力したデータ（HTML出力～の項）をそのままコピペすれば、完成図のように表示されます。
終わりに
前回の大幅なリニューアルから3ヶ月ぶり、表示フォントや引用ボックスのリデザインから2ヶ月ぶり。カスタマイズは労力はかかりますが楽しいものですね。
そして、HTMLとCSSを使い回すのにExcelがこれほど便利に活躍してくれるということを、改めて知りました。
