【さとぴデザイン】です。このサイトの絵や画像は全部パワポで作っています!

THE THOR に変えた感想まとめ(役立つマイナー編)

THE THORに変えた感想まとめ

 

Masayoshi大最近、wordpressのテーマを変えました。新テーマはTHE THORです。無料版Lightningからの変更です。SEO対策や表現の自由度に期待をして変えました。

  • 変えてみて良かったところ
  • イマイチだったところ

の「役立つマイナー編」を紹介します。

THE THORのメジャーな良いところは、色々なサイトで紹介されていますので、そこには出てこない、マイナーな部分になります。

 

良かったところ

まずは良かったところから。

トップページに動く部分が多いのにPCで読み込みが速い

トップページに動く仕掛けが多めですが、PCでの読み込みは、そこそこ速いと思います。モバイルは計測すると遅いですが、5Gが目前なので、気にしません(笑)。
これからの時代、通信環境がどんどん良くなるので、サイトも動きを出す仕掛けがある方が、表現が広がり、面白いと思います。

 

サーチコンソールのモバイルユーザビリティーが上昇

THE THORに変えてから、サーチコンソールのモバイルユーザビリティー有効が上昇しています。先ほど紹介した様に、モバイル計測すると遅いのですが、モバイルフレンドリーページとして認識されます。
SEO的に良い傾向です。

モバイルユーザビリティー

サーチコンソールにパンくずリストが反映されるようになった

THE THORに変えた日から、サーチコンソールの拡張機能のパンくずリストが有効になりました。
まだ検索順位の上昇実感はありませんが、SEO対策として良い変化だと思います。

パンくずリスト

【THE THOR(ザ・トール)】

アイキャッチ画像にカーソルを合わせると回転拡大する

これも、動きを出す仕掛けの1つです。すぐTHE THORだとバレますが・・・。個人的には好みです。

アイキャッチ画像回転拡大

 

アドセンスで、ダブルレクタングル広告を標準で入れられる

記事を読み終わった後に、四角形の広告が2つ、横に並んで表示されているものです。クリック率が高い表示方法とされており、多くのサイトで同様の表示をしています。
Googleアドセンスでは、PC表示で横に並べるのはOKですが、スマホ表示で、縦に2つ並んではいけないことになっています。
テーマが対応していないと、スマホ表示では、縦に2つ並んでしまいます。これを防止する為には、ちょっと面倒な設定が必要になります。
THE THORでは、スマホ表示では、1個だけ表示する様になっていますので心配無用です。
これはやりたかったので、うれしい機能です。

ダブルレクタングル広告

 

投稿記事内を横方向に分割出来る

近未来のガジェット

記事の横方向は通常区切りはありませんので、単調な構成になりますが、THE THORでは、こんな感じで2~4分割表示が可能です。
雑誌の記事のように、ブロックで分割されたレイアウトが可能です。分割の比率も選べます。

画面が透けているスマホ

分割の比率も選べます。PC・スマホ両方とも分割表示の場合は2分割まで。
(この表示です)
PC表示のみは4分割まで可能で、この場合スマホでは、縦に1列で並びます。

【THE THOR(ザ・トール)】

トップページのアーカイブ一覧が横方向に分割できる

本サイトもトップ(Home)ページのアーカイブ記事一覧は、横方向2分割のカードタイプを採用しています。これ以前からやりたかったのですが、Lightning無料版では出来ませんでした。
1カラムにすると、3分割にすることも出来ます。

アーカイブ一覧

 

ピックアップ記事が標準で設置出来る

任意の記事をピックアップ記事としてトップページに表示ができます。また、オススメ順に大きさを変えてレイアウトされており、インパクトの大きい表現になっています。
これも結構お気に入りの機能です。アーカイブだけだと、日にちの経過で、記事が隠れてしまうのですが、ピックアップを表に出せることで、また読んで貰えるチャンスを作ることが出来ますね。

ピックアップ記事

 

タブコンテンツウィジェットがおもしろい

ウィジェット内でタブで複数のコンテンツを入れられるものです。限られたスペースに多くの情報を入れられるのが良いと思います。タブをクリックして貰える確率は低めですが、システム手帳みたいな、表現に変化が作れるのがおもしろいですね。うまく活用していきたいところです。

タブコンテンツ

 

スマホ用QRが良い

PCで見ていた情報を、出先でスマホで見たい時があります。
スマホでURLを打つ人は限りなくゼロに近いと思います。
また、スマホで見ていた記事を友達に共有するようなシーンでスマホ同士でもQRがあると、簡単にできます。とても便利な機能だと思います。

QRコード

【THE THOR(ザ・トール)】

フッターのテーマコピーライトが簡単に消せる

最初から消して欲しい気もしますが(笑)、簡単に設定で消せるのは好感が持てます。前テーマでは、CSSに消す記載を入れていました。些細なことですが、消すメニューがあるのは良いと思います。

外観カスタマイズ⇒共通エリア設定⇒フッター設定⇒コピーライトの設定⇒非表示

コピーライト表示設定

 

スマホ専用のナビゲーションバーがある

最近のスマホは縦に長いので、スマホ専用のナビゲーションバーはとても使い安いです。
最近のスマホは縦に長く、大型化しているので、下にナビゲーションバーが出ても、画面の表示領域が減って困ることは無いと思います。むしろ、あった方が、操作性が良いので、このサイトでは、表示しています。

外観カスタマイズ⇒共通エリア設定⇒固定フッターエリア設定[スマホ専用]

スマホ用ナビゲーション

 

カテゴリごとのTOPに画像を貼れる

カテゴリーやタグで、ひとまとめに出来ますが、各カテゴリー・タグのトップページに説明文や画像を入れることが出来ます。これも、以前からやりたかったので、まだ使ってませんが、良い機能です。
カテゴリーの特徴が一目で分かる画像を配置すると、分かりやすいですよね。個性のあるサイトになりそうです。

横から出るメニューが良い

右上に横から出てくるメニューがあります。このサイトでは、グローバルメニューと呼ばれる、ヘッダー部に横並びにカテゴリーが並ぶメニューを非表示にして、右上のメニューに集約しました。
トップ画面全体が動きのある画像や、文字があり、にぎやかなので、ヘッダーはシンプルにしようという意図です。
PCとスマホで同じ表示内容になっています。

横から出るメニュー



 

イマイチなところ

次はイマイチな部分です。

目次がサイドバーに表示出来ない

標準で目次表示機能がありますが、サイドバーには表示が出来ません。
本サイトの様に、How to 記事が多い場合は、やり方を実践する時、サイドバーに目次があると、利便性が向上します。
プラグインを使って入れています。
方法は、以下の記事を参照して下さい。

関連記事

  THE THORでは、標準で目次を表示する機能があります。 しかし、サイドバーには表示が出来ません。目次プラグインを使うと、表示がおかしくなる不具合もあります。追従具合もなんか変? さまざまな困難を乗り越えて[…]

追従サイドバーに目次を入れる

 

サイドバーエリアがトップと投稿で別れていない

これは、分かれているもんだと思っていたので意外でした。
投稿ページ、固定ページ、トップページ全てに同じサイドバーが表示されるのは、ちょっと困る時があります。
上にも書きましたが、プラグインを使って追従サイドバーに目次を表示しています。
これが、トップページにも表示されてしまいます(涙)。
トップページで目次表示を消す方法は、以下の記事を参照して下さい。

関連記事

「このウィジェット、投稿ページのサイドバーにはいいけど、トップページには表示したくないなぁ」という悩みありませんか? 特定のウィジェットを特定のページで非表示にできるプラグインの紹介です。 Widge[…]

タイトル画像

 

サイドバーウィジェットのスマホ非表示が選べない

サイドバーの内容が、スマホ表示では、下に並びます。
1ページがとても長~くなります。そんなページの下の方は、見て貰えず、読み込みが遅くなるだけなので、非表示にしたくなる訳ですが、出来ません。
本サイトでは、プラグインを使って、非表示にしています。
上で紹介した目次表示をトップページで消す方法と同じ対応で可能です。

リスト表示のデザインが一般受けしない

リスト表示とは以下の様に、箇条書きのことですが、文頭につく印がなんと白抜き・・・このセンスはちょっと・・・
当然直したいという人が大勢いらっしゃって(笑)ググると対策が出てきます。
本サイトは黒丸にしています。

リストデザイン

 

ボックスカスタマイズは癖が強い

ボックス枠があらかじめあり、カスタマイズが出来る様になっていますが、これ癖が強いです。普通の人は出来ません。このサイトでは、1種だけカスタマイズして、メモ調からテキストコードをコピペして使っています。
詳しくは、以下の記事を参照して下さい。

関連記事

THE THOR(ザ・トール)のボックス枠の時短入力方法とカスタマイズの紹介です。 本サイトで使っている、2段になったボックス枠です。シンプルなので、色を変えれば、どのサイトにも使えると思います。 THE THORは、このボ[…]

THE THORボックス枠時短入力方法

 

トップページのメイン画像を用意するのが難しい

レスポンシブデザインなので、PC表示、スマホ表示共にデザインが崩れず表示されるのですが・・・
ブラウザの横寸法に合わせて、変にトリミングされます。
純粋に拡大縮小してくれれば良いのですが、横が切れたり、上下が切れたり・・・かなり困ります。

外観カスタマイズ⇒TOPページ設定⇒メインビジュアル設定

ここで、スマホとPC表示の画像の縦サイズを設定します。
参考までに、本サイトのTOP画像サイズと設定です。

TOP画像サイズと設定

この設定で表示させた状態が以下になります。

  • 左上は、フルHDノートPC画面いっぱいに表示させた状態。これを基準にしています。
  • 左下は、スマホ表示。
  • 右上は、WQHD外部ディスプレイで画面いっぱいに表示です。この様な状態は無いと思いますが、横が広がると上下がカットされます。
  • 右下は、フルHDノートPCで2/3くらいの大きさに表示させた状態。これ意外と多いと思います。横が狭くなると左右がカットされます。

表示サイズと画像カット具合

過去テーマのLightning無料版は、どの画面サイズでも拡大縮小され、上下左右がカットされることは無かったのですが、THE THORはこの様に謎にカットされるので、画像選びに苦労します。

内部リンクカードの抜粋だけが文頭抜粋

内部リンクをアイキャッチ画像と、抜粋文章で表示するカードですが、抜粋文が、ここだけ記事本文の文頭から引き抜かれます。
トップページのアーカイブカードは抜粋欄に書いた文章が入りますが、何故か、ここだけです。
直して欲しいですね。

内部リンクカード

アーカイブの表示

 

内部リンクカードの画像が正方形のみ

THE THORのアイキャッチ画像の縦横比は16:9がデフォルトになっています。
にもかかわらず、なぜか、内部リンクカードの画像は正方形(1:1)のみです。
これも謎仕様です。

16:9に変える方法は、以下の記事を参照して下さい。

関連記事

  ブログカードとは、内部リンクや外部リンクを画像付きで表示するカード状の表示です。リンク先のタイトルと、内容抜粋、画像にはアイキャッチ画像が使われます。 特に内部リンクは、訪問者にサイト内回遊を即し、長く滞在して[…]

サイトカードの画像比率を変える

 

まとめ

Masayoshi大THE THORは表現の幅を広げる工夫がたくさんあり、サイト作りが面白くなります。たくさんありすぎて、難解な部分もあるので、降参脱落する人もいるかもしれません。

私の場合は、サイトいじりが楽しくなって記事を書かなくなる弊害があります(汗)。

THE THORはアイキャッチ画像をフルに使うテーマです。私は、タイトル画像をパワポで16:9で作り、それをアイキャッチ画像にも使っています。
前テーマLightningはアイキャッチ画像が正方形だったので、タイトル画像とアイキャッチ画像を別々に作っていました。THE THORに変えたことで、大分楽になりました。

有料テーマとはいえ、不満も結構ありますが、工夫しながら使っていきたいと思います。

テーマ変更方法は以下のページも参考にどうぞ。

内部リンク<wordpressテーマ変更時の不安解消!ステージング活用>

最後までご覧頂きありがとうございました。