Sorairo

photo credit: Charlene Hubenthal WCCHS-3151 via photopin (license)

WordPressのオリジナルテーマを自作しました。

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

advertisement

自作テーマのコンセプト

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

  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のはそんなことをあんまり感じさせません。
また、英字フォントはどれも似たり寄ったりなんで、最初に参考にしたサイトがこれを使っていたのでこれにしました。

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

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

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

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

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

最後に

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

advertisement

related posts

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

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

私のブログ更新作業環境まとめ。

ブログを書く環境って大事ですよね。継続することの難しさはその環境のせいもあるかもしれません。

WordPressの記事中にプラグインなしで目次を追加しました。

プラグインを使わずに記事中に目次を追加しましたのでご紹介します。

ブログのカテゴリーを見直してみました

新しいテーマに変更しましたので、ついでにカテゴリーも見直してみました。

WordPressのテーマをカスタマイズするには子テーマを作成すべし!

色んな所で言われていることですが、少しでもカスタマイズするならやっぱり子テーマは作るべきですね、簡単ですし。

初めての有料テーマ「ALBATROS」を購入しました!

初めて有料のWordPressテーマを購入しました。有料なだけあってデザインもいいし機能満載でブログ執筆意欲を掻き立てられます。

テーマを自作する〜その③〜アイキャッチ画像に関するあれこれの2回目。

WordPressのアイキャッチ画像に使える写真サイトの紹介と、キャプション表記についてのコツについてご紹介します。

テーマを自作する〜その②〜アイキャッチ画像に関するあれこれの1回目。

テーマを自作するシリーズの第2回目は、WordPressでアイキャッチ画像を使えるようにするために必要なことについて調べてみました。

jQueryプラグインのLightboxを導入しました。

画像を表示するときにフワッと拡大表示させるjQueryプラグインのLightboxを実装しました。

jQueryを使って記事中の目次を開閉式にしました。

目次が開閉式だとどんなメリットがありますかね。表示領域が広がるくらいですか。