【THE THOR(トール)】当ブログで実装しているカスタマイズ方法7つを紹介

こんにちは、たっつー(@utakata_blog)です。

この記事では実際にTHE THOR(トール)を利用している僕がよりよいサイト作りのために取り入れているカスタマイズを紹介します。

  • 当ブログ(ウタカタブログ)で取り入れているカスタマイズ7つ

THE THORはSEO対策に力を入れていて国内最高クラスの充実度ですが、デザイン面においてもカスタマイズ方法が豊富、おしゃれでかっこいいサイト作成が可能です。

ただ、カスタマイズ方法が多すぎて悩むこともしばしば…デザイン面に時間をかけすぎるのも本質ではないので気になるカスタマイズ方法があれば参考にしてください!!

THE THORについて詳しく知りたいという人は下記記事がおすすめ。THE THORのSEO対策やメリット・デメリット、インストール方法まで網羅的にわかりますよ。

ワードプレステーマ THE THOR(ザ トール)の情報まとめ|虎の巻

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-20.42.33.pn[…]

たっつー
たっつー

紹介しているカスタマイズ方法以外にも「ここどうしてるの!?」って部分があれば気軽に連絡ください♪

ウタカタブログのカスタマイズ|THE THOR(トール)編

それではさっそく当ブログで取り入れているTHE THORのカスタマイズを一気に紹介していきますよ。

これから紹介するカスタマイズは各項目で記載しているCSSをWordPressの「追加CSS」にコピペするだけ(⑥以外)です!!

今回紹介するカスタマイズ方法は以下の通り。

  1. スマホ画面の左右の余白を消す
  2. サイトカードのカスタマイズ
  3. アイキャッチ画像を角丸にする
  4. 殺風景な目次をかっこよくカスタマイズ
  5. ピックアップ記事の背景を消す
  6. 投げ銭ボタンを設置する
  7. 表(テーブル)機能をマスターする
これから紹介するカスタマイズはCSSをいじっていくので必ずバックアップを取った上で実践するようにしましょう。

【前提】紹介するCSSをコピペする場所

これから紹介するカスタマイズ方法はWordPressの追加CSSという場所にコピペするだけで適用されます。

追加CSSの場所は以下の通り。

WordPressのダッシュボードの「外観⇨カスタマイズ」をクリック。

追加CSSの項目をクリックすると下記画面になるので、赤枠の部分にコピペする感じです!最後に右上の「公開」をクリックすると貼り付けたCSSが適用されます。

たっつー
たっつー

CSSを追加する場所に迷ったらここに戻って確認してください、それではカスタマイズ方法を確認していきましょう!!

①:スマホ画面の左右の余白を消す

THE THORを導入してからスマホでは表示領域が狭いなと感じていました。

そこでスマホのみフレームを無効化し画面いっぱいにつかうカスタマイズを実践したところ、かなりスッキリしていい感じに。

スマホ画面の左右のフレームを消すカスタマイズ

デフォルト(左)に比べてフレーム枠がなくなり画面いっぱいに記事を表示できるようになります。

一行に表示できる文字数も増え、モバイルユーザーに優しいカスタマイズでしょう。

外観⇨カスタマイズ⇨追加CSS

コピペするコードは以下の通り。

/* スマホの画面の左右の余白を消す */
@media only screen and (max-width: 480px){
.l-wrapper {
margin: 40px 0px;
}
}
たっつー
たっつー

これでスマホ表示はフレームレスで大きく快適に表示されるようになりました!!

②:サイトカードのカスタマイズ

サイトカード・ブログカードはリンクをカード化した要素。

サイトカードは内部リンクで、ブログカードは外部リンクのこと。

THE THORでは赤枠の部分で機能を利用することができますね。

ただデフォルトの状態はかなり微妙…下記ビフォーアフターをみるとわかりますが、デフォルトの状態はタイトル下に記事の本文冒頭が入るます。

僕のブログの記事冒頭は吹き出しを利用しており吹き出しのコードがカード内に表示されていて、なんとも不恰好な状態に。

そこでカード内にはタイトルだけ、よりカードっぽく形や色を微調整したものにしています!!

カスタマイズ後のカードのようにシンプルにするには以下の手順を踏みましょう。

外観⇨カスタマイズ⇨追加CSS

コピペするコードは以下の通り。

/*サイトカードのカスタマイズ*/
.content .sitecard{
padding:25px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
border-radius: 7px;
}
.content .sitecard__subtitle {
padding: 3px 10px;
background: rgba(255,148,61,0.8);
border-radius:0 0 7px 0;
}
.content .sitecard__contents {
margin-top: 2rem;
}
.content .sitecard__contents .phrase {
display: none;
}
.content .sitecard .eyecatch {
margin-top: 0;
max-width: 120px;
}
.sitecard__contents .heading-secondary a {
font-size: 1.6rem;
margin-top: 5px;
}
@media only screen and (min-width: 992px){
.content .sitecard {
max-width: 80%;
margin: 2rem auto;
}
}
たっつー
たっつー

シンプルかつコンパクトおしゃれなカードに変身しましょう!!

③:アイキャッチ画像を角丸にする

THE THORは全体的にポップさはなくクールなデザインになっています。

少し柔らかい印象を出したかったのでアイキャッチ画像の視覚部分を角丸に変更しました。

外観⇨カスタマイズ⇨追加CSS

コピペするコードは以下の通り。

/*アイキャッチ角丸*/
.eyecatch {
border-radius: 8px;
}
たっつー
たっつー

サイトに柔らかい印象を出すことができます!!

ついでにサイトTOP画面に設置できる「ピックアップ記事」の部分も下記コードで角丸にしておきましょう。

/*ピックアップ記事角丸*/
.pickup3__item {
border-radius: 8px;
}

デザイン変更後はこんな感じです!!

④:殺風景な目次をかっこよくカスタマイズ

ブログ記事の中で目次も重要な要素ですが、デフォルト状態は個人的にすごくイマイチ。

ビフォーアフター画像を見ればわかりますが、殺風景で無機質…左に寄っているところも気に食わないポイントです。

そこでこんな感じにカスタマイズしています。

外観⇨カスタマイズ⇨追加CSS

コピペするコードは以下の通り。

/*目次目次*/
.content .outline{
position:relative;
width:90%;
margin:0 auto;
display:block;
background:#f3f3f2;
border-right:none;
border-left:none;
border-bottom:none;
border-top:solid 6px #444;
}
.content .outline__item{
background:#f3f3f2;
}
.outline__title:before{
display:inline-block;
font-family: “icomoon”;
content: “\ea51”;
margin-right:5px;
background: #444;
width:40px;
height:40px;
text-align:center;
border-radius:50%;
padding-top:4px;
color:#fff;
}
.content .outline__number{
font-size:15px;
color:#444;
}
.outline__title{
color:#444;
font-weight:bold;
font-size:18px;
}
.content .outline__toggle:checked + .outline__switch::before {
content: “[閉じる]”;
font-size:17px;
margin-left:-10px;
color:#444;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
background:initial;
}
.content .outline__switch::before {
content: “[開く ]”;
border: 0;
margin-left:-10px;
color:#444;
font-size:17px;
}
たっつー
たっつー

殺風景な目次がかっこよくオシャレに、左寄りだったところも画面いっぱいに広がるようになります!

⑤:ピックアップ記事の背景を消す

THE THORではピックアップ記事としてTOPページに任意の記事を表示することが可能。

オススメしたい記事や収益化できる記事などを見つけてもらいやすくするいい機能ですが背景が邪魔だなと思っていました。

そこで背景を消すカスタマイズを取り入れています。

背景色を無くすことによりシンプルかつページ全体の一体感を出すことができます。

外観⇨カスタマイズ⇨追加CSS

/*pickup記事背景*/
.pickup3{
background-color: #FFF;
}
.heading-main {
color:#000000 !important;
}
.heading-main span {
color: #000000 !important;
}
たっつー
たっつー

TOPページに統一感がうまれユーザーにとっても見やすいサイトデザインに!!

⑥:投げ銭ボタンを設置する

これはカスタマイズというよりはサービスの追加ですが面白いかなと思うので紹介。

あなたのブログに下記画像のような投げ銭ボタンを設置してみてはいかがでしょう。

最近では投げ銭も浸透してきましたが、ブログにもOFUSEというサービスを利用して投げ銭機能を実装できるのです。

やり方もいたって簡単、もちろん無料で利用できるので挑戦してみては。詳しい手順は下記記事にて紹介しています。

ブログに投げ銭システムを導入する方法を画像付きで紹介|OFUSE編

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-20.42.3[…]

たっつー
たっつー

投げ銭がもらえるようになれば大したものですね!!

⑦:表(テーブル)機能を活用する

表(テーブル)はユーザーに情報をわかりやすく伝える機能があり、滞在率も上がるのでSEOにも効果的です。

THE THORでは利用しやすく綺麗な表機能が備わっていますが、カスタマイズ次第でさらに素敵な表作成が可能です。

色々なカスタマイズ方法は下記記事にて紹介しているので参考にしてください。紹介している方法は下記の通り。

  1. 表(テーブル)を横スクロールさせる
  2. ”横にスクロールできます”と表示を入れる
  3. 表(テーブル)のサイズを調整する
  4. 表(テーブル)にアウトラインをつける
関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-20.42.33.pn[…]

THE THOR(ザ トール)
5

毎日「また増えた!」を実感。集客・収益に徹底的にこだわった結果へ導く次世代WordPressテーマ「ザ トール」。

値段

16,280円(税込)

最後に:カスタマイズはパクって記事執筆に専念しよう!!

今回は当ブログで利用しているカスタマイズを7つ紹介してきました。

気になるカスタマイズがコピペで簡単に真似できるのでぜひパクってください。

THE THORはデザインの幅が広すぎて沼にハマると気づいたらかなりの時間をカスタマイズに割いていたということにもなりかねません…

しかし大切なことは良質なコンテンツをたくさん届けること。

カスタマイズの時間を極力抑えるためにもぜひ本記事を参考にしてください!!

たっつー
たっつー

THE THORは初心者でもおしゃれなデザインができるので僕はかなりの時間をカスタマイズに費やして後悔しました…w

WordPressテーマに悩んでいて「THE THORいいかも♪」と思った人は下記記事を参考にすれば迷うことなくインストールまでできますよ。

ワードプレステーマ【THE THOR(トール)】のインストール・設定方法を優しく解説

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-19.17.14.pn[…]

今回は以上です。

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-20.[…]

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-19.17.1[…]

最新情報をチェックしよう!
>当ブログは「THE THOR」で作成しています!!

当ブログは「THE THOR」で作成しています!!

「THE THOR」は集客・収益に徹底的にこだわったテーマです。 MP・PWAなど最新鋭の技術を搭載し、サイトの表示速度はWordPressテーマの中でもトップクラス。

CTR IMG