WordPress独自テーマ"中二病ダークモード"作った【目に優しい】

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

黒ベースでアクセントカラーが赤。読んでいてまぶしくない画面が欲しかった。
※ 水色アクセントに変えました

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

WordPressダークモードテーマを作ろうと思ったキッカケ

キッカケは2つ。

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

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

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

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

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

そう考えるように。

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

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

特に「PCのディスプレイって眩しすぎない！？」というのは地味にいつもツラく感じていました。

基本、Google検索ページとかブログとか、Webページって明るくてまぶしいじゃないですか。

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

これはもう、黒をベースに自分の好きな赤色を加えたシンプルな「ダークテーマ」を作るしかなくね！？

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

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

機能は最低限

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

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

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

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

僕の「ダークテーマ」は、他に何の機能もないです。

フォントサイズを変えるエディタ機能すらないです(ずっとWordPressデフォルトの機能かと思ってました)。

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

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

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

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

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

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

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

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

正直、これが一番大きな収穫でしたね。

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

俺のブログ、超カッコ良くね！？って自分のブログにアクセスする度に自画自賛するまである。

なんというか、ブログ更新が楽しくなります。

やっぱり、自分のブログをビジュアル的に好きになれるかどうかってかなり重要だと考えているんですよね。

独自テーマで収益化が出来たという自信がついた

本ブログ単体で月４〜６万ほどの確定収益を得ることができるようになってきました。「自分で作ったテーマでも戦える」という自信になっています。

もしもアフィリエイトのレポート一部

関連記事ブログテーマ黒系色は白系に比べて収益面で不利？Noです

テーマ変更後のアクセススピードが大きく改善

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

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

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

モバイル、PCともに 100点満点 というちょっとワケがわからないくらい優秀なスコアになりました。

モバイル表示のスピード

PCのスピード

は！？マジで！？

ってくらい驚きました。

たしかに通信の安定した場所だとクリックした瞬間にページ遷移してくれます。

これは予想していなかったので嬉しかったです。

市販テーマは機能が充実しているぶん、いろいろ重たくなってしまうということなのでしょう。

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

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

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

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

追記：テーマとSEOは関連が極めて薄いことがわかった

1年以上この自作テーマを使ってブログを運用したら、検索順位もPVも収益も軒並み上昇していました。

何のテーマ使っても変わらない、という証拠

有料テーマだろうが独自に作った適当なテーマだろうが関係ないことが分かり安心。やっぱり書く中身次第ってことなんですね。

自分で好き勝手見た目や機能をカスタマれる独自テーマだとブログ自体に愛着が湧いてGood。

関連WordPressテーマ選びとSEO/検索順位は関係ない【悩む時間が無駄】

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

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

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

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