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

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

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

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

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

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

キッカケは2つ。

  1. JINが人気すぎて他人と違う何かが欲しくなった
  2. 背景が明るいブログばっかりでまぶしい。ダークモード的な目がチカチカしないテーマでブログを書きたい

ちなみに以下はダークテーマ適用前の、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検索ページとかブログとか、Webページって明るくてまぶしいじゃないですか。

あと重視したのは、シンプルであること。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台だったんですが、

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

WordPressのダークテーマ

モバイル表示のスピード

WordPressのダークテーマ

PCのスピード

は!?

ってくらい驚きました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

↑TOP