THE THORで施しているカスタマイズ一覧

THE THORで施しているカスタマイズ一覧

現在、当サイトでは、WordPressテーマに「THE THOR」を使用しています。

THE THORは標準で多くの機能を搭載している分、カスタマイズ項目が多いのが特徴です。

そのため、THE THORをはじめて使う人やテーマの使い方にあまり慣れていない人は最初は難解に感じる人も多いのではないかと思います。

ここでは、THE THORを使用している当サイトにおいてカスタマイズした点をまとめています。

標準のカスタマイズだけでなく、cssやphpに手を加えているものもありますので必要に応じて参考にして下さい。

カスタマイズしたら順次更新していく予定です。

THE THORの標準のカスタマイズ一覧

THE THORに標準で備わっているカスタマイズ(外観 – カスタマイズ)です。

外観 - カスタマイズ

TOPページの設定のカスタマイズ

当サイトのTOPページのようなイメージにするにはどこの項目をどのように設定したらよいか。

TOPページのヘッダー部分やメインビジュアル部分、中央エリア部分、フッター部分の設定などを中心に解説しています。

解説は以前デザインで行っています。

参考記事

2018年11月の下旬にインストールして使い始めたWordPressテーマ「THE THOR」THE THORは、機能が多いだけに設定項目が多いのが特徴です。THE THORの前身とも言える無料版のライオンブログを使いこなし[…]

THE THORのTOPページの設定

画像やカラーに関する設定のカスタマイズ

THE THORのサイトアイコンやヘッダーロゴをはじめ、メインビジュアルの画像や、ヘッダー、背景、共通ボタン、見出しのカラー、テーブルなど、THE THORの画像やカラーに関する設定を中心に解説しています。

参考記事

ここでは、おすすめのWordPressテーマ、THE THOR(ザ・トール)の画像やカラーの変更・設定について解説しています。その他の設定・カスタマイズについては、下記ページを参照して下さい。[sitecard subtit[…]

THE THOR(ザ・トール)、画像とカラーの設定

メニューパネルの設定のカスタマイズ

THE THORのメニューパネル(ページ右上の3本の横線をクリックすると表示されるメニュー)に関する設定を中心に解説しています。

メニューパネル

参考記事

WordPressテーマ「THE THOR」には標準でメニューパネルが装備されています。ページ右上の3本の横線をクリックすると表示されるメニューのことです。ここでは、THE THORのメニューパネルの設定の仕方につい[…]

THE THOR(WordPressテーマ)のメニューパネルの設定の仕方

THE THORのcssやphpに手を加えているカスタマイズ

以下は、THE THORに標準で備わっているカスタマイズではなく、cssやphpに直接手を加えたカスタマイズを紹介しています。

文字のザイズを修正するカスタマイズ

THE THORを標準のまま使用していると、PCやスマホ表示において文字の大きさでバランス的に気になる箇所が何箇所かあります。

例えば、

・TOPページのメインビジュアルに添えるタイトルの文字(下図赤枠の部分)と
・カテゴリーやタグのページで表示される記事一覧の文字サイズです。

メインビジュアルに添えるタイトルの文字

メインビジュアルに添えるタイトルの文字

カテゴリーやタグのページで表示される記事一覧の文字

カテゴリーやタグのページで表示される記事一覧の文字

デフォルトのままだとPCでは大きい、スマホでは小さいといった文字のサイズのバランスが悪いように感じましたのでそれぞれで少しサイズを変えました。

参考記事

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。THE THORを使用していると、特定の箇所の文字のサイズを調整したいと思っている人も少なくないはず。ここでは、当サイトで施しているカス[…]

THE THORで文字のサイズを修正する手順

追従サイドバーに目次を設定するカスタマイズ

当サイトでは、投稿記事の追従サイドバーに該当ページの目次を表示するようにしています。

投稿記事の追従サイドバーに該当ページの目次を表示

追従サイドバーにも目次を表示させるためにプラグインをインストールし、スマホでは表示されないように条件指定。見栄えをよくするために子テーマのcssにコードを追加しています。

参考記事

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。ここでは、当サイトで施しているカスタマイズのうち、・追従サイドバーに目次を設定する手順について解説しています。その他のカ[…]

THE THORで追従サイドバーに目次を設定する手順

カテゴリーなどのアーカイブページをnoindexにするカスタマイズ

当サイトでは、スッキリ整理をする意味で、カテゴリ-の2ページ目以降とその他のアーカイブページの全てをnoindexすることに加えてTOPページから2ページ目以降もnoindexにしています。

参考記事

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。ここでは、当サイトで施しているカスタマイズのうち、・アーカイブページ(カテゴリー・タグ・日付等のアーカイブ)のnoindex対応について[…]

THE THORでカテゴリーなどのアーカイブページをnoindexにする手順

フレームをPCで表示させてスマホで表示させないカスタマイズ

THE THORは、フレームを表示するか否かの設定ができますが、表示する設定をした場合は、PC・スマホどちらの表示でもフレームが表示されます。

しかし、フレームありの設定をすると、スマホでの表示の場合、スマホ本体のフレームと被ってどうもしっくりきません。

フレームをPCで表示させてスマホで表示させない

そこで、当サイトでは、PCではフレームを表示させて、スマホではフレームを表示させないようにカスタマイズしています。

参考記事

THE THORは記事を表示させる部分(この記事を書いているまさにここの部分:メインカラム)でフレームを表示させるかどうかの設定ができます。フレームというのは、下図の矢印の部分ですね。このページもボーダーフレームを表示させて[…]

THE THOR フレームをPCで表示させてスマホで表示させないカスタマイズ

まとめ

以上、当サイトにおけるTHE THORでの標準のカスタマイズと、標準のカスタマイズではなく、cssやphpを直接修正しているカスタマイズをまとめました。

尚、cssやphpのカスタマイズについては、自己責任でお願いします。