当サイトをご覧いただき、「あれ？ 何かいつもと見た目が変わってる」と思っていただいた方。
これまでに当サイトへ訪問されたことのある皆さんですね。いつもありがとうございます。 🙂
実は、当サイトのデザインを「マテリアル2」というテーマに変えました。
今回はその理由などをご紹介させていただきます。
これまでは「Xeory Extension」
当サイトは、オープンソースのブログ用ソフトウェア「Word Press」をつかって構築しています。
オープンソースですのでユーザーが色々な変更を加えられますし、国内外で公開されている様々な「テーマ」を選ぶことで、見た目のスタイルを自由に変えられます。
（もちろん、これまでの投稿記事などをそのまま活用できます。）
そして当サイトのデザインを決定づけるテーマは、2016年11月のサイト開設からこれまでの間、バズ部さんによる「Xeory Extension」を利用させてもらっていました。
これまで「Xeory Extension」だった理由
- ワンコラム型で見た目がスマートでかっこいいこと
- レスポンシブデザインの採用でスマートフォンやタブレットなどで表示が最適化されること
- なにより、国産で無料利用できること
特に国産であることは、技術的なアドバイスをもらうときにストレスなくやりとりできます。
当サイトでも細かなカスタマイズでうまくいかないときにメールで問い合わせしたところ、色々と教えていただき助かりました。 😀
（図書館で借りた）Word Pressの手引書を片手に、初めて本サイトを作りましたが、おかげさまで約1年半の間、（僕の技術的未熟さによる問題はありましたが）大過なく運営することができました。
実際、記事が多くなかった当初は、アイキャッチ画像のインパクトだけで画面を埋める必要性もあり、「Xeory Extension」はとてもありがたいテーマでした。
あえてテーマを変えたい！
そんな「Xeory Extension」でしたが、元々企業向けの利用をメインとしているためか、いくつか課題が出てきました。
「Xeory Extension」での課題
- 当初から比べると、投稿記事の増加とともにカテゴリーが増え、グローバルメニュー（サイトの上の方にあるメニューバー）が長くなってきたこと
- SNSのボタンが若干小さいこと
- モバイル環境での閲覧が増える中で、サイドメニューが下の方にまわってしまい、サイト全体の一覧性に厳しいこと
このような課題を解決し、かつ、国産・無料のテーマがないかという厚かましい願いで探していたところ、「マテリアル2」に巡り会えました。
「マテリアル2」の特徴
では、「マテリアル2」はどんなテーマなのでしょうか。
僕が特にいいなぁと思ったのは、次のような点です。
今回「マテリアル2」を選んだ理由
- 文字中心の記事の見栄えがよく、必要な記事が見つけやすいこと
- モバイル環境など小さな画面では、サイドバーがハンバーガーメニュー（横線の入ったボタン）に折りたたまれ、必要なときにすぐアクセスできること
- 記事を書くのに必要な機能が網羅されており、プラグイン（追加機能）が少なくてすむこと
- 「Xeory Extension」同様、国産・無料であること
※ 詳しくは、作者である NobuoさんのHP「マテリアル２ってどんなテーマ？」もご覧ください。
また、カスタマイズ用の子テーマも一緒にダウンロードできることやカスタマイズ項目も豊富に用意されていることも◎でした。
より自分らしくカスタマイズしよう
デフォルトのカスタマイズ項目でも色々な設定ができます。
しかしせっかくですから、より自分のイメージどおりのスタイルづくりに取り組みたいと思います。
なお、直接カスタマイズする時には、必ず「子テーマ」フォルダをつくってから、そのファイルを変更するようにしましょう。
親テーマを直接変更すると、最悪テーマの再インストールになります。
改善したい点１：記事一覧の行間がやや広い
「マテリアル2」は、デフォルトでトップページに最新記事が並ぶ「記事一覧」があり便利です。
しかしながら、個人的にはこの行間がやや広く感じます。
このため、行間を狭めるコードに書き換えます。
まず、ブラウザで該当箇所のコードを確認します。（Google Chromeなら右クリックの”検証”）
該当する部分の値を変えて、反映した見栄えを確認していきます。
このときに役立つのが、「マテリアル2」に実装されている「追加CSS」です！
カスタマイズメニューの最下段にあります。
ここでスタイルの書き換えを行うと、リアルタイムで変更が反映されます。
ちなみに、記事一覧の行間設定は、
.post {
clear: both;
overflow: hidden;
background: #fff;
border-top: 1px solid #eee;
box-shadow: 0 2px 3px rgba(100,100,100,0.4);
margin-bottom: ●px;
}
を追加CSSに書き加えるだけです。
（●は表示したい高さを示す半角数字。デフォルトは30px→当サイトは12px）
これにより、見た目がすっきりするとともに、全体の収まりも良くなりました。
改善したい点２：表示されるカテゴリーを変えたい
記事一覧の下には、設定しているカテゴリーごとに決まった数の記事が表示されます。
これ自体はとてもありがたい機能なのですが、未分類のカテゴリーなどあまりお見せしたくないカテゴリーも表示されてしまいます。
そのため、見られるカテゴリーを限定します。
まず、自分が表示したいカテゴリーの「カテゴリーID」を確認。
カテゴリー設定はこの「カテゴリーID」の番号で指定します。
親テーマから cat_list.php を 子テーマ「マテリアル2_child」にコピーして
<?php
$args = array(‘parent’=>0);
$categories = get_categories($args);
を
<?php
$args = array(‘parent’=>0);
$categories = get_categories($args = array(‘include’ => ‘■,■,■,■,■’,));
へと書き換えるだけです。
（■は表示したいカテゴリーのID番号）
こうすることで、お見せするほどもないようなカテゴリーを見えなくしてしまいました。
どちらの変更も、もっとスマートに変更する方法があるかもしれませんが、僕の技術ではここまでが限界でした。 😛
その他、細々したカスタマイズを加えていき、やっと納得できるところまでできました。
そして、ようやく公開へ
こうした変更を暇を見つけて別環境で修正を加えていき、「4月から公開しよう！」と考えていました。
ところが、ある日、現在のトップページを見たところ、なんか変。。。
最新記事と人気記事が横に並んでいたはずが、何故か縦に並ぶ状態に変わっていました。 😯
このためサイトの右側がスカスカ。
あまり見栄えが良いものではないので、3月中ではありますが、急遽デザインを変更することにしました。
出来上がってみると、やはり新しいページは、すがすがしいものです。
なお、これまでの投稿ページのデザイン検証が全くできていないので、もし表示がおかしいページなどに気づかれれば教えていただけると助かります。
僕の技術的な限界はありますが、直せるところはなるべく直したいと思います。
参考にさせていただいたサイト
〇マテリアル２（公式）
https://wp-material2.net/