先日、WordPressのテーマを変更しましたが、それがきっかけでふと思い立ち、以前に頓挫していたオリジナルテーマの自作に取りかかりました。それから約2ヶ月、まだまだ制作途中なので細かい点の変更や修正は必要ですが、とりあえず困らない程度にはなったかなと思いますので公開します。

WordPressのテーマをLION MEDIAに変更しました。

WordPressのテーマをLION MEDIAに変更しましたのでご紹介します。

https://neatdesignjournal.com/wordpress-theme-lion-media/

自作テーマのコンセプト

今回自作したオリジナルテーマのコンセプトは「シンプルクリーンをベースにほんのちょっとだけリッチな動きのあるテーマ」としました。そのテーマの中で実際にやったことが以下です。

1. サイドバーを廃止
2. CSS3のFlexboxでレイアウト
3. jQueryを取り入れる
4. Google Fontsを使用
5. サムネイルには黄金比を採用
6. プラグインをなるべく使わない

サイドバーを廃止

サイドバーは必要な情報に素早くアクセスできる点がいいと思うんですが、私の場合、他のブログを見てて気になるのはカテゴリーぐらいで、タグとか月別アーカイブは見ないしなぁという思いから、自分のブログでは思い切って外してみました。その分広くなったので、トップページはタイル状のレイアウトにして、少しでも多くの記事が目に触れるようにしました。

CSS3のFlexboxでレイアウト

今回一番難しかったのがこのFlexboxなんですが、どうせやるなら新しいCSS3を使ってレイアウトしようと思いネットを検索しているとこのFlexboxに出会いました。これまではFloatでレイアウトしていたものがClearfixとか使わずに超シンプルに組めるということが分かって驚いたのと同時に、ぜひ自分で作ってみたいと思うきっかけになりました。

jQueryを取り入れる

トップページではグローバルナビとトップへ戻るボタン、スマートフォンではドロワーメニューにjQueryを使いました。CSS3だけでもある程度できそうだったんですが、jQueryで作る方が直感的に分かりやすかったです。グローバルメニューは下へスクロールすると画面からニュッと消えるんですが、上にスクロールするとニュッと出現します。トップへ戻るボタンはごく普通のやつです。どれもググるとたくさん有志の方の作例が出てきますので、そこからちょこちょこつまんで実装させていただきました。

Google Fontsを使用

Webフォントって前から知ってはいたんですが、どうしても外部サイトから読み込みを行う関係で「サイトの表示が遅くなるんじゃないの？シャレたフォントは使えるけど遅いなら本末転倒だよねー」って思い込んでいました。でも最近どこのサイト見てもWebフォントを利用してて見やすいしお洒落だしいいよねーと思って使ってみたら全然重たくなくて（笑）というわけで当ブログでも採用してみました。ちなみに利用しているのは以下の二つ。

Google Fonts + 日本語 • Google Fonts + Japanese

As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available from Google Fonts.

https://googlefonts.github.io/japanese

Open Sans - Google Fonts

Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, wh

https://fonts.google.com/specimen/Open+Sans

日本語フォントは漢字があるので読み込みが大変なんでしょうが、Googleのはそんなことをあんまり感じさせません。また、英字フォントはどれも似たり寄ったりなんで、最初に参考にしたサイトがこれを使っていたのでこれにしました。

サムネイルには黄金比を採用

細かい点ですが、アイキャッチ画像は黄金比を使って切り抜きを行っています。黄金比の計算に便利なのは以下のサイト。

Metallic Ratio ／ 貴金属比 [黄金比・白銀比などを計算]

黄金比や白銀比を計算するWebアプリ。このツールは、基準となる数値をひとつ指定するだけで、黄金比や白銀比に代表される各貴金属比を簡単に算出できるものです。数値だけではなく視覚的にも比率を確認できるので、求めている比率を直感的に得ることができます。デザイン作業などで美しい比率が必要な時にご利用ください。

https://voidism.net/metallicratio/index.html

iPhone8の標準カメラで撮ると、デフォルトのサイズが4032×3024になります。これを手ごろな大きさにすると1024×768となり、さらにこの長辺に合わせて黄金比を算出すると1024×633となります。ブログ内のアイキャッチ画像は、概ねこの画像サイズを基に拡大・縮小、トリミングを行って表示させています。

プラグインをなるべく使わない

色んな機能を実装するのにプラグインは簡単で便利なんですが、今回は極力使わない方向で作成しました。余分なコードやCSSが追加されるのが嫌だったので。

最後に

いかがでしたでしょうか。まだまだ実装できていない機能がたくさんありますのでぼちぼち追加していきたいと思います。それと、既存の記事でレイアウトや表示が崩れているところがありますが、こちらもぼちぼち手直ししていきますのでご了承ください。