WordPress独自テーマ、"中二病ダークテーマ"を開発しました!

- WordPress -
2019.10.28
wordpressオリジナルテーマ

以前はひつじさんの開発した有料テーマ「JIN(ジン)」を購入して使っていたんですが、せっかく仕事でWordPressを使ったので自分のブログ用に独自テーマを開発してみることにしました。

黒ベースでアクセントカラーが赤。とにかく目に優しい。

最近、何かと「ダークモード」が多い気がするので流れに乗ってみました。

独自のWordPressテーマを作ろうと思ったキッカケ = JINが人気すぎw

一番のキッカケは、JINが人気すぎて他人と違う何かが欲しくなった、ということですw

以下はダークテーマ適用前の、JINを使っていた時のデザインです。

WordPress独自テーマ

僕は2018年3月から色々なサイトでずーっとJINを使ってきましたが、最近では検索結果をクリックして開くブログの半分以上がJINじゃね!?と思うくらい多いです。

ちょっと前はブロガー界隈だとWordPressテーマといえば「ストーク」か「SANGO」が多かった印象ですが、今は完全にJINが最大勢力なんじゃないかと。

で。

僕はみんなの逆を走りたくなる性格をしています。

高校生の時みんな修学旅行に行くから「俺、行かなくてもいいですか」と先生に言ってみたり、みんながiPhone使っているという理由でAndroidを使い、みんなが賛成していれば反対意見を言いたくなったり、誰も使ってないという理由で16年前のテニスラケットを使い続けたり(テニスは半年でラケットを買い換える人もザラ)。

もうこれは自分でテーマ作るしかねぇなと。

"ダークテーマしかねぇ"と思い至る

  1. 赤・黒の中二病的な組み合わせが超好き
  2. Chromeはダークモード
  3. Twitterもダークモード
  4. YouTubeも当然ダークモード
  5. PCディスプレイの輝度は常に最暗
  6. 部屋でPC作業をする時は電気をつけずに真っ暗

特に「PCのディスプレイって眩しすぎない!?」というのは地味にいつもツラく感じていました。基本、Google検索ページとかブログって白いじゃないですか。

あと重視したのは、シンプルであること。JINを買って後悔したことはないですが、使ってない機能が多すぎました。

これはもう、黒・赤・シンプルな「ダークテーマ」を作るしかなくね!?

ということで出来上がったのが、今ご覧いただいているテーマです。

丸1週間かけて作りました。

Local by Flywheelという開発ツールを使いました。gitを使ってソースコード管理もしてみました。Local by Flywheelとgitの組み合わせは最強!!

機能は最低限

機能と呼べるものは、記事エディタ内で使う装飾ボックスのショートコードを作ったくらいです。

ちょっとしたメモ程度用のこんなボックスと、

注意を促す用途でこんなボックスと、

関連記事やおすすめ記事を示すための小さなボックス、この3つだけです。

ショートコードは仕事で使ったことがなかったので、勉強になりました。

JINはGoogleアドセンス広告管理機能やブログカード生成機能、豊富なボックスやマーカーなど有料テーマらしい機能がたくさん。

僕の「ダークテーマ」は、他に何の機能もないです。フォントサイズを変えるエディタ機能すらないです(ずっとWordPressデフォルトの機能かと思ってました)。

なので「めっちゃ貧弱になった感」は否めませんが、その分使いこなせてなかった機能をまとめて断捨離できた感じで気分は悪くないです。

独自テーマを作ってみて得た収穫

Sass(CSSを効率的に書ける言語)の有用性を身を以って理解できた

「Sassってめっちゃ便利じゃん!」という感動は忘れません。

ProgateでSassを勉強した時は「こんなんむしろ分かりにくそうじゃね?」と思っていたんですが、実際に使ってみたらトンデモナイ。

「一度使うと使わずにいられなくなる」という意味が理解できました。

HTML、CSSは嫌いだったんですが、Sassのおかげで苦手感が7割減。

最初、CSSのフレームワーク「BootStrap」を使おうかと思ったんですが、CSSの理解度をあげるためにもBootStrapに頼るのはやめました。結果的にCSS/Sassで1からスタイリングしてよかったです。

自分のブログ超カッコよくね?という大きな自己満足感

黒・赤・シンプル。見た感じは全て思い通りに作れたので超満足しています。

超カッコ良くね!?

って自分のブログにアクセスする度に自画自賛するまである。なんというか、ブログ更新が楽しくなります。

もしかしたら、これは独自テーマを作る最大のメリットかもしれません。

テーマ変更後のアクセススピードは、なんと改善した

WordPressテーマ制作の永遠の課題とも言える「アクセススピード」。

これが、独自テーマに切り替え後に改善しました。

JINを使っていた時のGoogle Speed Insightで計測した時のスコアは80台だったんですが、

モバイルで91、PCにおいては97というちょっとワケがわからないくらい優秀なスコアが取れました。

でも、高速化のために何もしていないのでなぜこんなに良いスコアが出たかは謎です。プラグインの数も変えてないし、CSS、JSの非同期読み込みもしてないし、本当に何にもしてないんですが。

もっとも心配しているGoogle検索順位の低下

有料テーマや有名な無料配布テーマでありがちなのは「内部SEO対策は完璧!収益を最大に!」みたいなアピール文句がありますよね。

JINだと、HTMLをMicrodata方式でマークアップしていたり「そこまで真似するの無理っす」ってレベルで仕上がってるので「検索順位はやっぱり下がるのかなぁ...」と心配してます。

とはいえ「実はあんまり関係ないんじゃね??」とも思っているので「テーマを作るとどれくらい検索順位に悪影響が出るのか」の実験としてみたいと思います。

WordPressには終わりがない・・・

WordPressのテーマは作ってるうちに「あれもやりたいこれもやりたい」「それってどうやってやるんだろう」っていう興味が尽きなくなってきますね。

無料配布ができるレベルまでクオリティを上げられたらなぁ、と思いつつも「もうなんか完成したしいいや」という思いが交錯しております。

開発中は完成していく過程がワクワクしてとにかく楽しかったし、出来上がりも満足。1週間を費やしたことに一切後悔はしていません!まる!