THE THORをおしゃれにカスタマイズする方法まとめ

ここあです。

 

WordPressテーマ「THE THOR(ザ・トール)」は

多機能なテーマで、しかも「デザイン着せ替え機能」などもあり

 

初心者のあなたでも比較的簡単に

綺麗でおしゃれなデザインができるテーマです。

 

しかし、どれだけおしゃれで綺麗なサイトができるとは言え

テーマ独自の設定でできるデザインには限界があります。

 

なので、せっかく「THE THOR(ザ・トール)」という

多機能で素晴らしいテーマを使う以上は

 

「もっと自分らしい個性の光るデザインにしたい!」

 

と思われる方も多いはずです。

そう思うのは私だけ?

かな?(笑)

 

なので、私のように「THE THOR(ザ・トール)」を使っているけど

「もっとデザインのカスタマイズにこだわりたい!」

というこだわり屋さんのあなたのために

 

THE THORをおしゃれにカスタマイズできる

オリジナルのカスタマイズ方法をまとめていきますので

ぜひ参考にしてみてください。

 

つまり、私がここで紹介するカスタマイズ方法というのは

THE THORの設定方法ではなく、HTMLとCSSを使う

オリジナルのカスタマイズ方法です。

 

とは言え、そんなことを聞くと、初心者のあなたは

 

「え〜、そんなん絶対に無理!」

 

と思ってしまうかもしれませんが

「安心してください!」

 

コピペだけでできます!^^

 

なので、初心者のあなたでも簡単にできる

「コピペするだけ!」という

超シンプルなやり方をご紹介していきますので

 

もしもあなたが

「そうそうここ変えたかったんだよね〜」

という部分がありましたら、ぜひトライしてみてください。

 

また、私が紹介するカスタマイズ方法は

ただ「コピペして終わり」ではなく、さらに、線の太さや色など、

細い部分の変更方法についても記載していますので

 

  • もう少しカスタマイズしたい!
  • 自分のサイトに合わせたい!

と欲が出てしまったあなたは、CSSの調整もしてみてください。

 

全然、難しくありませんので^^

 

ということで「百聞は一見にしかず!」

まずはコピペして、その変化をぜひお楽しみください!

※詳細は各カスタマイズ方法の記事に移動します。

THE THORのフォントをもっとおしゃれに!

「THE THOR(ザ・トール)」にはデフォルトで

サイト全体のフォントを変更する設定項目があります。

 

しかし、選べるフォントの数は決して多くはありません。

 

なので

「もっと違うフォントに変更したい!」

というあなたは、

 

8種類ある「Googleフォント」の設定方法を

まとめて解説していますので、ぜひチェックしてみてください。

 

↓例えば、こんなフォントとか

M PLUS 1p

 

↓こんなフォントにも変更できます。

Noto Serif JP

 

また、フォントサイズを基本スタイル設定からではなく

CSSを使って、フォントサイズやフォントの色を

変更する方法も記載しています。

 

THE THORのフォントを変更する方法!

 

THE THORの見出しをシンプルでおしゃれに!

ブログを運営する場合、見出しは非常に重要な要素となります。

しかし、あくまでも主役は「記事の本文」。

 

なので、最低限のアテンション(注目を引くこと)は必要ですが

「主張しすぎてもうるさい」だけです。

 

ということで、すでに成功しているオウンドメディアの

各サイトの見出しを参考に、必要最低限でおしゃれに見える

見出しの設定方法というのをまとめておりますので

 

h2やh3の「見出しデザインのバランス」に悩んでいるあなたは

ぜひ参考にしてみてください。

 

↓例えば「LIGブログ風」 非常にシンプルですが、こんな感じです。

LIGブログ様風見出しデザイン

 

デザインをおしゃれにするコツは

ただ漠然と考えるのではなく

 

「なぜ、そのサイトがおしゃれに見えるのか?」を

分析することです^^

THE THORの見出しをおしゃれにカスタマイズ!

 

THE THORのリスト表示をもっとわかりやすく!

私のこのサイト「STORK」のがっかりランキング1位は

「見出しデザイン」でした。

 

しかし、「THE THOR(ザ・トール)」に関して言えば

もちろん、私の主観ですが…

リスト表示のデザインがダントツでがっかりランキング1位です(笑)

 

あなたのがっかりランキング1位は何ですか?^^;

 

というのも、デフォルトのリストデザインが

このような白丸の表示で

THE THOR リスト

 

リスト表示にしても、

それが「リストだと認識しずらい」というのが私の不満です。

 

「なんで白丸なん?って思いません?」(笑)

 

なので、このリスト表示のアイコンを変える方法を

色々とご紹介しております。

 

例えば、こんな感じ

チェックアイコンのリスト表示(1)

 

もしも私のように「白丸は嫌だな〜」と

感じているあなたはぜひ確認してみてください!

 

とは言え、

これだけは絶対にやっておいた方がいいです(笑)

読者のことを考えるなら…^^

 

なぜなら「読者が分かりにくい」というのは、

あなたのデメリットにしかならないからです。

THE THORのリストを見やすくカスタマイズ!

 

THE THORの目次をおしゃれに可愛く格好良く!

私は結構読書をするのですが

書籍を購入する時はパラパラっと中身を見つつ

目次を見て判断することが結構あります。

 

なので、もしかすると…

 

例えブログの記事と言っても、私と同じように

「目次を見てからその記事を読むか決める」という方も

多いかもしれません。

 

だから、「目次」の存在も大事にしてあげたいものです。

 

「THE THOR(ザ・トール)」の目次は非常にシンプルで

どんなサイトデザインにも合いますので

それほど気にならないという方も多いかもしれませんが

 

逆に可愛いサイトや、ちょっとクールなサイトにしたい

という場合は、もう少し目次にも変化が欲しい

という方も一定数はいると私は思っています。

 

なので、目次のカスタマイズ方法では

デフォルトのデザインよりも存在感を出しながら

 

↓可愛らしい女性向けの目次デザイン

THE THOR目次

 

↓Googleフォントを使った男性向けの目次デザイン

THE THOR目次

※色味でだいぶイメージが変わります。

 

それぞれをご用意しておりますので

目次デザインをもう少し個性的にアレンジしたい

というあなたは、ぜひチェックしてみてください。

 

THE THORの目次を個性的にカスタマイズ!

 

THE THORのカテゴリーを見やすくおしゃれに!

「THE THOR(ザ・トール)」のカテゴリーリスト

弱点はメインカテゴリーとサブカテゴリーの見分けが

非常につきにくいということです。

 

↓デフォルトはこんな感じです。

THE THORカテゴリー

 

もちろん「THE THOR(ザ・トール)」ユーザーのあなたは

どれがメインカテゴリーでどれがサブカテゴリーかを

見分けることはできます。

 

しかし、「THE THOR(ザ・トール)」を利用していない

他のユーザーから見ると、ただの色分けだけでは

 

「メインとサブカテゴリーの見分けがつきにくい」

と感じるはずです。

 

そして、大事にすべきなのは

あなたのブログを訪れるネットユーザーになりますので

ただのカテゴリーとは言え

 

ユーザーを意識した見やすいデザインの方が

ユーザビリティも上がり

クリックされる可能性も高くなるというわけです。

 

なので、細かい部分ではありますが

サイト運営で大事なのは、例え細かい部分でも

ネットユーザーに配慮するということ。

 

それがサイト運営者である

あなたへの信用にも繋がりますからね。

 

だから、もしもあなたが

「THE THOR(ザ・トール)」のカテゴリー表示が

分かりにくいと思っているのなら

 

ぜひこちらのデザインもカスタマイズしてみてください。

 

デザインに関しては

↓アイコンを足してカテゴリー表示をより見やすくする方法

THE THORカテゴリー

 

↓シンプルなボタン表示に変える方法

 

それぞれをご紹介しています。

 

ということで、気になったあなたは

「レッツトライ!」^^

 

THE THORのカテゴリーを分かりやすくカスタマイズ!

 

THE THORのSNSボタンを可愛くアレンジ!

先にお伝えしておきますが

この記事は完全に私の趣味です(笑)

 

「THE THOR(ザ・トール)」はSNSの

シェアボタンのデザインを11パターンの中から選べます。

 

とは言え、私はどれもパッとしませんでしたし

特に可愛いサイトを作りたい方に合うようなデザインが

ありませんでした。

 

なので、もう少しスッキリした

可愛いデザインにしたいというあなたのためだけに

 

「THE THOR(ザ・トール)」の設定にはないデザインを

CSSで作りました。

 

↓こんな感じ

THE THORのSNSシェアボタンを可愛らしくカスタマイズ!
THE THORのSNSシェアボタンをスッキリ可愛く!

 

ということで、SNSのシェアボタンを

「丸型の可愛いボタンに変えたい」というあなたは

ぜひ参考にしてみてください。

 

「どうでもいいわ!」という声の方が

多そうですけどね(笑)まぁ、私の趣味なので…

THE THORのSNSシェアボタンを丸型にする方法

 

THE THORのプロフィール表示をシンプルに!

THE THORのプロフィールウィジェット

SNSのフォローボタンの部分にはデザインの設定がありません。

 

なので、プロフィールウィジェットを使用すると

SNSのフォローボタンの部分は

サイトカラーで設定した色が割り当てられます。

 

しかし、シンプルでおしゃれなサイトにしたいあなたにとっては

おそらくフォローボタンの背景色は変更したいと思うはずです。

 

実際にカスタマイズすると

これだけ印象が変わりますからね。

 

↓Before
the thorプロフィール

↓After
the thorプロフィール

 

ということで、THE THORのプロフィールウィジェット

SNSフォローボタンの背景色を変更したいあなたは「Let’s コピペ!」^^

THE THORのプロフィールをカスタマイズ!

 

蛍光マーカーにアニメーションをつけてアテンションアップ!

THE THORには蛍光マーカーを手軽に使える機能があります。

 

とは言え、最近ではどのテーマにも蛍光マーカーらしきものが実装され

かなり見慣れてきましたよね。

 

なので、もっと他のサイトと差別化したいと

考えている方もいるかもしれません。

 

そんなあなたにおすすめなのが

アニメーション付きの蛍光マーカー。

 

↑こんな動く蛍光マーカーですね。

※見逃したというあなたは「F5キー」を押してリロードしてみてください。

 

実は、この蛍光マーカー簡単に設置できます。

 

ということで、興味があるあなたは

ぜひこちらの記事を参考に実装してみてください^^

 

【コピペだけ!】スクロールで開始する蛍光マーカーの表示方法!

 

THE THORをおしゃれにカスタマイズする方法まとめ

THE THORをおしゃれにカスタマイズする方法まとめ

 

まだまだ記事としては少ないですが

これからさらに「THE THOR(ザ・トール)」に関しては

CSSでカスタマイズする方法を増やしていきたいと考えています。

 

なぜなら、多機能で非常に優秀な

「THE THOR(ザ・トール)」の購入者であるあなたには

もっと満足度を高めて欲しいと思うからです。

 

もちろん、私も

「THE THOR(ザ・トール)」のユーザーですし

デザイナーである以上はサイトデザインにこだわりたいです。

 

とは言え、

オウンドメディアとしてあなたのサイトを運営するなら

こだわりを持ってあなたに愛着の湧くデザインにする方が

 

  • もっと自分のサイトをたくさんの人に見て欲しい
  • ブログの運営が楽しい
  • もっと頑張って記事を書こう

と、モチベーションも確実に上がります。

 

私が会社で働いていた時は

例え自分だけが依頼されたデザインの仕事であっても

  • 面白いデザイン
  • 自分が心の底から納得できるデザイン

などができた時は

 

ただクライアントに提案するだけではなく

会社内部のデザイナーにも

 

「こんなおもろいデザインできたでっ!」

「見て!見て〜!」と

見せたくなったものです。

 

なので、デザインに対してこだわりが強い人ほど

サイトの運営にも気合いが入りますし

その方が収益化もしやすくなります。

 

つまり、デザインにしろ、記事にしろ

「早く誰かに見て欲しい、読んで欲しい」と

あなたが心の底から思えるサイトができれば

 

必ずネットユーザーの心に届くし

  • もっと面白い記事を書きたい
  • ネットユーザーに役立つ記事を書きたい

と、どんどん思えるようになってきます。

 

さらに、デザインに力を入れているサイトというのは

他のユーザーにライバルチェックをされた時に

 

「このサイトには勝てそうにない」と思わせることができるようになります。

 

なぜならそこまでデザインに力を入れていないサイトの方が

今でも圧倒的に多いからです。

 

なので、私はデザインを通じて、まずは

運営者であるあなたが自分のブログを「誇れる」ような

サイトにできるお手伝いができれば

 

あなたのサイトは必ずみんなに読まれるようになるし

多くの人に読まれることで、あなたの収益は

どんどん膨らんでいくと信じています。

 

なので、多くの人は

  • 「所詮ただのWebデザイン」
  • 「デザインよりも記事」

と思っているかもしれませんが

 

私はデザインの力が、

あなたの記事を書くモチベーションに繋がれば

こうした記事を書く意味があると思っています。

 

特に今回は、初心者のあなたでも簡単にできる

「コピペだけ」でできるカスタマイズの方法を

ご紹介しましたので、

 

ぜひ「ビビらずに」チャレンジしてみてください!

CSSは噛み付きませんし(笑)

必ずあなたにもできますので^^

 

ということで、まだまだこれから時間を見つけて

「THE THOR(ザ・トール)」のカスタマイズに関する記事を

増やしていこうと考えております。

 

なので、今後の記事も

楽しみにしていただけたら嬉しいです。

 

最後までお読みいただきありがとうございました!

 

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG