タロウです。もうすぐ春ですね、ブログ始めてみませんか？
皆さん、自分のブログのデザイン気に入ってますか？ 正直僕はすごく気に入ってません。
あこがれのあのサイトとか、このサイトとか、お手本にしてたブログはいっぱいありますが、どうもしっくりくるデザインがない。
CSSをガッツリいじりたいけど、他にやりたいこともあるのでそこに時間を投資したくない。
僕もずっとモヤモヤしていました。
その、上あごの裏に引っ付いた海苔のような気持ちは、この問題が解決されない限り解消しないので、こういう時は課金してサクッと直してしまうのが一番良いと思います。
というわけで有料テーマのTHORを導入してみました、というお話です。
※この記事は変更を加えるたびに加筆していきます（2020年3月10日加筆）
有料テーマ THOR（トール）
THORと書いてトールと読む。神話の中に登場する雷神の名前ですね。最近ではマーベルのマイティ・ソーなんかの元ネタですね。
世の中には、本当にたくさんの有料Wordpressテーマがあって僕もどれにしようかすっごく悩んでいました。皆さんも選択肢が多すぎると、迷ってしまいがちですよね。
だってどのテーマも「SEO対策」「上位表示」「美しいインターフェース」を謳っていて、どれも同じに見えるんです。
ではなぜ自分がこのTHORを選んだかというと
①SEO対策など多数のプラグインの導入の必要がない
SEO系、キャッシュ系、目次系、画像遅延系など多数の機能を内包している
＝プラグインを減らせるとサイトの読み込みも軽くなるのでは？
②一度購入すると複数ブログへ導入可能
もう一つ全く違うブログを作ろうかと思ってるので、節約になる
③多数のデモデザインを装備しているデザイン着せ替え機能
もう一つ作ろうとしているブログはガラッと雰囲気変えたいので、多数のデザインが選べるとGOOD
要はデザインがサクッと綺麗に設定できて、サクッとSEOとか設定できて、サクッと複数のブログへ導入できるというところが最高に気に入りました。
THORのページはこちら↓
こちらでバックアップのプラグインBackWPupの使い方が紹介されてるので、参考にBUしました。
導入後すぐに行った設定
まずは着せ替えテーマを変更する
THORには着せ替えデザインでサイトのデザインをがらっと変更することができます。変更のたびにいろいろと設定が変更される可能性があるので、一番最初に設定します。
設定にはCustomizer Export/Importと呼ばれるプラグインの導入が必要です。下にもまとめて書きますが、こちらを参照してデザインを変更します。
今回はDemo03を導入しました。シンプルなブログタイプで、先々は上部にメインビジュアルを表示することもできるタイプです。
各デザインごとに導入したらやることをまとめられている方がいたのでこちらを参照。
グローバルメニューの調整
そのままグローバルメニューの表示/非表示設定をしていくと、なぜか表示されなかった。
なのでダッシュボードから外観→メニューと確認すると、表示する場所にチェックが入っていなかったので「ヘッダーエリア」にチェックを入れて再度設定。すると無事表示されました。
アクセス解析設定
アクセス解析は大事。ということで Google Search Consoleの認証IDを探してたのですが見つからず。なのでこちらを参照しました。
Google analytics のコードの確認はこちらを参照させていただきました。発行から設置まで網羅しているので新しいブログを設置するときも便利。
自動広告設定
Adsenceの自動広告を埋め込みました。
記事分析設定
全てチェックを入れました、不具合があればチェック消す。
行間設定
THORはデフォルトでは妙に行間が狭いので、見やすくするためにこちらを参照して広げてみました。CSSぶち込むだけの簡単作業。
それでも段落ごとの幅が狭いので僕はブロックごとに打ち終えたらshift+Enterで無理やり空白行を2行追加することにしました。
めんどくさいけど慣れたらどうってことはない。
それと記事内のフォントサイズを19pxに変更、目次のサイズも18pxに変更し、見やすさを改善しました。（2020年3月1日施策）
ブログカードとリンクカードのデザイン変更
THORのリンクカードのデザインはあまりよくないのでシュッとさせたくてこちらを参考にCSSで一発。
投稿日と更新日の表示
投稿日と更新日はユーザーユーティリティに貢献すると聞いたので設置。こちらで方法は確認
SNSボタン設置
こちらを参照して設置
アーカイブページの設定
カスタマイズ→ アーカイブページ設定 →記事一覧リスト設定で、抜粋文字数の指定を70文字にして、続きを読むボタンを表示するようにしました。
これで画像の大きさと、文字の段落がだいたい同じになってTOPがきれいに表記されるように。
お問合せフォームの設定
ダッシュボード→固定ページから作成。エディターの→部分のページ属性からお問合せTPLを選択するとサクッとお問合せフォームの完成です。最高。
目次の設定
これもカスタマイズからサクッと作成可能。ここ参照です。
HTMLサイトマップの作製
カスタマイズ→基本設定→自動設定サイトマップ設定で各種設定。新規固定ページを作成してサイトマップTPLのテンプレートを選択でOK。ここ参照。
と、ざっくりした設定は以上。お次はプラグインデス。
導入済みプラグインについて
プラグインも、挙動が重くなるのでできればあまり入れたくない。ということで現在導入中なのはこれだけ。
他はTHORに内臓している機能でしばらく戦うつもりです。
BackWPup
こちらはWordpressのデータをバックアップしていくプラグイン。
今回のように大きく変更を加えるときには必ずバックアップしましょう。
Customizer Export/Import でデザインインポート
THORのデザイン着せ替え機能を使用するためのプラグイン。
THORには出来上がった多数のデザインが用意されているのですが、そのデザインをダウンロードして使用するために必要なプラグインです。
Customizer Export/Importを導入して有効化したら、
EWWW Image Optimizer で画像圧縮
THORは表示も早いし、最高！のはずでしたが導入直後に計測したモバイルサイトの速度がこちら。
えっ！私のブログ、重すぎ・・・・？と例の広告並に二度見しました。重ッ！！
というわけで、THORのカスタマイズで
①wordpressダッシュボード→外観→カスタマイズ→[SEO設定]→「img非同期設定」をチェック
②EWWW Image Optimizerで画像の圧縮
を行いました。
圧縮するべき画像、で候補に挙がったのが26000枚あってワロタ。多すぎ。雑記ブログなので、画像は多くなりがちですね。
導入方法はこちらを参照しました。
また、どうもうまく圧縮がかけられていないような気がして、実際にメディアのページで「jpegtranがありません。」という表記があったので、こちらを参考に再度圧縮。
どうもwpXスピードサーバーでexecというphp関数が制限に入っていてそれが影響していたようです。
関数制限を外して、30分ほど経ったら再度チャレンジでうまく起動したようで成功です。2時間ほどかかりましたが・・・・
それに伴い画像フォーマットをWebp形式に変更。ここを参考に。
さらなる高速化を目指します。
Broken Link Checker
壊れているリンクなどを定期的にチェックできるプラグイン。
意外に定期的に発見されるし、特にAmazonのリンクだとかアフィリエイトリンクのチェックで活躍してます。
Blogger 301 Redirect
前のブログはBLOGGERで運用していたので、こちらで元のブログからのリダイレクトを掛けてます、がドメイン移行したから消してもいいんじゃないの？とも思ってます。
万が一消してやべえことになるのは怖いので、一応残してます。
Rinker
Amazoneのアフィリエイト用にスタイリッシュなリンクカードを作ってくれる機能です。
カエレバがAmazonに対応しなくなり、カッテネを使用していました。
ですがいまいち使い勝手が悪いというか、サクッとしていないのでこちらのプラグインを導入してます。
ショートコードで今までに作ったアフィリエイトタグも一括管理できて非常に便利。このプラグインがダメになるまではこれを使い続けるでしょう。
Site Kit by Google
鉄板。いちいちGoogle AnalyticsやサーチコンソールへアクセスしなくてもいいのがGOOD。
挙動の重さが気になるけど、サイト自体には影響ないのでは、と考えてます。
使ってみてTHORのここがいいなと思ったところ
数多くの機能を内蔵して、プラグインの数を減らせる
SEO系、キャッシュ系、目次系、画像遅延系など多数の機能を内包している ので、上でご紹介したように総プラグイン数を減らせます。
特に有名どころのSEOツールは高額なので、それを買わずに済むのはいいですよね。僕は14個くらい導入してあったのが今では7個です（2020年3月1日現在）
複数ブログに使用可能
実はブログをもう一つ作ろうと思っていたので、これは重要でした。
実際導入もうまくいったし、違うデザインを使えばがらりと違う雰囲気のブログを作成できるのが良いな、と思ったところ。
ユーザーフォーラムがあっていつでも質問可能
THORを導入すると、ダッシュボードに会員専用の入り口が設置されます。
内部のユーザーフォーラムでは、ユーザー同士の質問掲示板だったり、Q&Aが設置されており、豊富なケーススタディを得ることができます。
ネットの海にもたくさん転がっていますが、より使っている人に近いところで質問できるのは良いですね。
カッコイイデザインを手軽に導入できる
以前はCOCOONユーザーでしたが、正直、ここをこうしたいけどCSSいじらなきゃ・・・とか痒い所に手を届かせるために多くの時間を割かないといけないことがありました。
BLOGGERも同じでしたが、そんなことしている暇あれば、文章書きたいんですよね、僕は。脳みそを整理したいの。忘れないように記しておきたいの。
なので、完成されたテーマをサクッと導入できるTHOR、しかも洗練されてる。ときたら、これ以上に最高なものはないわけです。ブロガーはね、文章書いてナンボですよ。
そして、上でも述べた通り、複数ブログに適用可能なので「こういうことをまとめたブログを作りたいな」と思ったら、ドメイン契約して、新しくテーマに沿ったデザインを導入すればすぐに描き始められるんです。ええやん。
ここはイマイチなんじゃない？THORさん
本文中の文字色変更ができない・・・かとおもいきや
カタカタ打ち込んでいて、ここは赤に入れたい・・・と思ったら文字色変更がない！どうしよう・・・と迷っていたら、発見しました。
新しいwordpressエディターではそのままではできないようになっているようです。
赤文字を入れたい段落では「ブロックの追加」から
クラシックスタイルのブロックを挿入
このように、文字エディターの付いたブロックが挿入されるので、好きなように変更できます。
外部サービスとの連携
IFTTTによるSNSとの連携
IFTTTによってTwitter, pintarest, その他に自動投稿するように設定しました。wpXサーバーは（僕の場合はwpXspeedだけど）国外IPの「XML-RPC API アクセス制限っていう設定で国外IPの制限を除いておかないと設定できなかったりしたので、答えにたどり着くまでに時間がかかりました。
こちらに共有しておきますね。
それと一緒にSNS流入も強化するぞってことでPintarestのアカウントを無料でビジネスアカウントへアップグレード。
TwitterとTumblrとの連携も強化。FACEBOOKはまだいいかなってことで、INSTAGRAMをどうするか迷ってる。→連携する方法がないので手動でやっていきます。
それと、記事下のフォローボタンを増やしました。Google+は無くした。
なので、今の自動設定はこんな感じ。
もちっと簡単にしたいですね。
SNS流入もばかにならないので、きっちりやっていく。
まとめ
ということで、有料かつ優良なWordpressテーマのTHOR（と個人的な設定）をご紹介しました。
随時新しい施策を施したら更新していきますので、新規立ち上げなどにTHOR使う人は見てもらうといいかも。
有料とはいえ、デザインにいまいち納得できてない人は、サクッと解決できると思うのでデザインサンプルを見て決めていただいたらすぐに納得のいくものになると思います。
また、更新頻度の高い人やブロガーさんにも、内臓されている機能が多いのでいろいろなことに気を遣わなくてもいい、という点で日々の微細なストレスを軽減してくれるGOODなものだと思います。
実際、僕はもうデザインについてはほとんど気にしなくてもいいな！という感じです。あとは書くだけ。この書くだけ、が大事なんですよね。書きたい人にとっては。
というわけで、よさげだな、と思った方はぜひご参考までに。
では。