先週からサイトのリニューアルを行っていて、ようやく目途がつきました。
このサイトはWordPressで運営されています。システム的には一般の無料ブログと同じで、「テーマ」と呼ばれるデザインテンプレートが豊富にあり自由に着せ替えることができます。
無料ブログでは、テンプレートのカスタマイズはある一定のところまでしか行えません。
でも、WordPressのブログにおいてはさらに高度なカスタマイズが可能です。
自分はPHPの知識がありませんが、その手の分野に精通している人であればかなり凝った仕様のサイトが作れるでしょう。また、一からテンプレートを作ることさえもできます。
リニューアル内容
過去記事のインポート
8月中旬～このサイトを開設する9月中旬までの1ヶ月間に書いていた日記を公開しようと思いつきました。当時の日記は公開を前提に、基本的にネット上に発信しても問題ないと考える内容でした。
9月中旬にサイトを開設したときは過去記事の移行をしていませんでした。
しかし今になり、せっかく書いた記事を別サイト（既に非公開済）に埋もれさせたくない。
そう思って、今回のリニューアルに際して記事のインポートに至りました。
テーマの変更
これが大きいでしょう。サイト開設当初は「Sparkling」テーマを使っていましたが、今回「Magbook」に変更しました。
国産テーマには無料のCocoonや、有料のDIVER、STORK19などがあり、今挙がったものが有名どころでしょう。特に有料テーマは1万円台の価格で販売されていて、難しいカスタマイズなしにそれなりのデザインになるようです。
けれども、自分は国産ではなく海外製のテーマを選びました。ある程度レイアウトが組まれながらもシンプルで、どこまでカスタマイズすれば使いやすいか試したいというのがあったからです。
カテゴリー名変更
トップページの見た目もカテゴリーごとに記事が表示できる点、いいと思いました。
Magbookの専用パーツを使うことで実現できますが、海外仕様なのかどうかわかりませんが日本語のカテゴリー名だと記事を表示させるパーツが上手く機能しません。
でも見た目がカッコいいのです。この際すべて英単語のカテゴリー名に変更しました。
現在あるカテゴリーには、カッコ「」内に記載された分野の記事を入れています。
- Diary「日記・雑感」
- Food「食事」
- Game「ゲーム」
- Music「音楽全般」
- Guitar「エレキギター」
- Songwriting「楽曲制作」
- Shopping「買い物・買ったもの」
- Sticker「ステッカー発掘」
- Telephone「電話番号ネタ」
- WordPress「サイトデザイン関係」
カテゴリーラベルのデザイン変更
MagbookはWebマガジンサイト向けといわれているようですが、デザインが整っているうえ好みでした。カテゴリー毎にテーマカラーを選べるというのも、一度やってみたかったところであります。
Magbookでは、記事タイトルの上部に、その記事に設定したカテゴリーの名前が表示されます。
一般的には単色で表示されるところ、それぞれのカテゴリーごとに色分けされています。
ただ、自分はこのデザインがしっくりきませんでした。カテゴリーのテーマカラーを指定したとき、色によっては文字が見づらくなると考え、デザインの変更をしました。
これにはPHPの中身を書き換える必要があります。
WordPressのダッシュボード画面から「外観」「テーマエディター」の順に辿っていくと、スタイルシート（Style.css）の編集画面が現れます。
このとき、右側にテーマファイルとして、編集可能なファイルの一覧があります。上から5番目の「inc」をクリックすると内容が展開されるので、そこから「settings」「color-option-functions.php」の順にクリック。
465行目にカテゴリーラベルのデザインに関する記述があるので、その部分を次のように変更しました。
$output_css .= '.cats-links .cl-'.$magbook_cat_id.'{
background-color:'.esc_attr($magbook_category_list).';'.'}デフォルトのカテゴリーラベルのデザインでは、カッコの中に「border-color（下線の色）」と「color（文字色）」の単語があります。
ここではborder-colorのところを「background-color（背景色）」に書き換え、colorの1行を削除しました。
これで「ファイルを更新」ボタンをクリックし変更を保存すると、次のように、カラフルな四角のデザインになります。
あとはCSSで文字色を変更したり、四角の中の余白を調整したりと、デザインを整えました。
抜粋を削除
前のテーマでは抜粋を表示させていましたが、アーカイブページのレイアウト上、1記事ごとに縦のスペースを多く取っていました。
たくさんスクロールする必要があることから、これを変えたいと思ったのが、今回のリニューアルの始まりだったのです。
Sparklingの1記事分のスペースで4記事も表示できますが、これは抜粋や「続きを読む」リンクを削除した（厳密には隠した）結果によるもの。
次のコードをカスタマイザーの追加CSSに記載しました。
/* アーカイブページの抜粋・続きを読むを削除 */
.two-column-blog #primary .post .entry-content p,
.entry-content a.more-link{
display:none;}
/* トップページやサイドバーウィジェットの記事抜粋を削除 */
.cat-box-text .entry-content p,
.cat-box-two-text .entry-content p{
display:none;}ただし「display:none」は対象となるものを隠す挙動。実際には完全削除ではなく表から見えなくしているだけです。
そのため、また表示させたい場合には「display:none」自体を削除すればよいわけです。
キーカラー変更
サイトのキーカラーも若干変えています。青系なのは同じですが、やや落ち着いた色味のものにしました。
キーカラーの1色で濃淡を作り、タグクラウドのボタンや見出しデザインなどのカスタマイズに取り入れました。
濃淡を作るために使ったWebサービスは「0 to 255」です。
なお、サブとなるアクセントカラーについて2色を定め、その中で濃淡を作っています。
これらの色は記事中に出てくる引用ボックスや注意表示ボックスなどで使います。
アイキャッチ画像サイズの統一
記事の上部やアーカイブページなどに表示される「アイキャッチ画像」。このサイズの設定が以前のテーマと異なっていました。
PHPをいじって「16:9」比のサイズで表示されるように変更、サムネイル画像のサイズを統一するプラグイン「Regenerate Thumbnails」を適用させました。
WordPressはプラグインという拡張機能を使うことで、こんなことができればいいのにということが簡単に実現できます。痒い所に手が届くといいますか。
終わりに
随時、状況に応じて細かい変更を行うと思いますが、大掛かりなデザインカスタマイズはこれでひとまず完了です。
これからも当サイトをよろしくお願いします。
