ここあです。
WordPressテーマ「THE THOR（ザ・トール）」は
多機能なテーマで、しかも「デザイン着せ替え機能」などもあり
初心者のあなたでも比較的簡単に
綺麗でおしゃれなデザインができるテーマです。
しかし、どれだけおしゃれで綺麗なサイトができるとは言え
テーマ独自の設定でできるデザインには限界があります。
なので、せっかく「THE THOR（ザ・トール）」という
多機能で素晴らしいテーマを使う以上は
「もっと自分らしい個性の光るデザインにしたい！」
と思われる方も多いはずです。
そう思うのは私だけ？
かな？（笑）
なので、私のように「THE THOR（ザ・トール）」を使っているけど
「もっとデザインのカスタマイズにこだわりたい！」
というこだわり屋さんのあなたのために
THE THORをおしゃれにカスタマイズできる
オリジナルのカスタマイズ方法をまとめていきますので
ぜひ参考にしてみてください。
つまり、私がここで紹介するカスタマイズ方法というのは
THE THORの設定方法ではなく、HTMLとCSSを使う
オリジナルのカスタマイズ方法です。
とは言え、そんなことを聞くと、初心者のあなたは
「え〜、そんなん絶対に無理！」
と思ってしまうかもしれませんが
「安心してください！」
コピペだけでできます！＾＾
なので、初心者のあなたでも簡単にできる
「コピペするだけ！」という
超シンプルなやり方をご紹介していきますので
もしもあなたが
「そうそうここ変えたかったんだよね〜」
という部分がありましたら、ぜひトライしてみてください。
また、私が紹介するカスタマイズ方法は
ただ「コピペして終わり」ではなく、さらに、線の太さや色など、
細い部分の変更方法についても記載していますので
- もう少しカスタマイズしたい！
- 自分のサイトに合わせたい！
と欲が出てしまったあなたは、CSSの調整もしてみてください。
全然、難しくありませんので＾＾
ということで「百聞は一見にしかず！」
まずはコピペして、その変化をぜひお楽しみください！
- 1 THE THORのフォントをもっとおしゃれに！
- 2 THE THORの見出しをシンプルでおしゃれに！
- 3 THE THORのリスト表示をもっとわかりやすく！
- 4 THE THORの目次をおしゃれに可愛く格好良く！
- 5 サイドバーのカテゴリーを見やすくおしゃれに！
- 6 THE THORのSNSボタンを可愛くアレンジ！
- 7 サイドバーのプロフィール表示をシンプルに！
- 8 蛍光マーカーにアニメーションをつけてアテンションアップ！
- 9 内部リンクを回遊させるサイトカードをもっとスッキリ！
- 10 タグ管理機能をもっと有効に！
- 11 プリセットパーツをもっとおしゃれに！
- 12 THE THORのパンくずリストをサイトイメージに合わせる！
- 13 THE THORのサイトロゴを適正サイズで表示させたい
- 14 THE THORにオリジナルボタンを実装する
- 15 THE THORをおしゃれにカスタマイズする方法まとめ
THE THORのフォントをもっとおしゃれに！
「THE THOR（ザ・トール）」にはデフォルトで
サイト全体のフォントを変更する設定項目があります。
しかし、選べるフォントの数は決して多くはありません。
なので
「もっと違うフォントに変更したい！」
というあなたは、
8種類ある「Googleフォント」の設定方法を
まとめて解説していますので、ぜひチェックしてみてください。
↓例えば、こんなフォントとか
↓こんなフォントにも変更できます。
また、フォントサイズを基本スタイル設定からではなく
CSSを使って、フォントサイズやフォントの色を
変更する方法も記載しています。
THE THORの見出しをシンプルでおしゃれに！
ブログを運営する場合、見出しは非常に重要な要素となります。
しかし、あくまでも主役は「記事の本文」。
なので、最低限のアテンション（注目を引くこと）は必要ですが
「主張しすぎてもうるさい」だけです。
ということで、すでに成功しているオウンドメディアの
各サイトの見出しを参考に、必要最低限でおしゃれに見える
見出しの設定方法というのをまとめておりますので
h2やh3の「見出しデザインのバランス」に悩んでいるあなたは
ぜひ参考にしてみてください。
↓例えば「LIGブログ風」 非常にシンプルですが、こんな感じです。
デザインをおしゃれにするコツは
ただ漠然と考えるのではなく
「なぜ、そのサイトがおしゃれに見えるのか？」を
分析することです＾＾
THE THORのリスト表示をもっとわかりやすく！
私のこのサイト「STORK」のがっかりランキング1位は
「見出しデザイン」でした。
しかし、「THE THOR（ザ・トール）」に関して言えば
もちろん、私の主観ですが…
リスト表示のデザインがダントツでがっかりランキング１位です（笑）
あなたのがっかりランキング1位は何ですか？＾＾；
というのも、デフォルトのリストデザインが
このような白丸の表示で
リスト表示にしても、
それが「リストだと認識しずらい」というのが私の不満です。
「なんで白丸なん？って思いません？」（笑）
なので、このリスト表示のアイコンを変える方法を
色々とご紹介しております。
例えば、こんな感じ
もしも私のように「白丸は嫌だな〜」と
感じているあなたはぜひ確認してみてください！
とは言え、
これだけは絶対にやっておいた方がいいです（笑）
読者のことを考えるなら…＾＾
なぜなら「読者が分かりにくい」というのは、
あなたのデメリットにしかならないからです。
THE THORの目次をおしゃれに可愛く格好良く！
私は結構読書をするのですが
書籍を購入する時はパラパラっと中身を見つつ
目次を見て判断することが結構あります。
なので、もしかすると…
例えブログの記事と言っても、私と同じように
「目次を見てからその記事を読むか決める」という方も
多いかもしれません。
だから、「目次」の存在も大事にしてあげたいものです。
「THE THOR（ザ・トール）」の目次は非常にシンプルで
どんなサイトデザインにも合いますので
それほど気にならないという方も多いかもしれませんが
逆に可愛いサイトや、ちょっとクールなサイトにしたい
という場合は、もう少し目次にも変化が欲しい
という方も一定数はいると私は思っています。
なので、目次のカスタマイズ方法では
デフォルトのデザインよりも存在感を出しながら
↓可愛らしい女性向けの目次デザイン
↓Googleフォントを使った男性向けの目次デザイン
※色味でだいぶイメージが変わります。
それぞれをご用意しておりますので
目次デザインをもう少し個性的にアレンジしたい
というあなたは、ぜひチェックしてみてください。
サイドバーのカテゴリーを見やすくおしゃれに！
「THE THOR（ザ・トール）」のカテゴリーリスト
弱点はメインカテゴリーとサブカテゴリーの見分けが
非常につきにくいということです。
↓デフォルトはこんな感じです。
もちろん「THE THOR（ザ・トール）」ユーザーのあなたは
どれがメインカテゴリーでどれがサブカテゴリーかを
見分けることはできます。
しかし、「THE THOR（ザ・トール）」を利用していない
他のユーザーから見ると、ただの色分けだけでは
「メインとサブカテゴリーの見分けがつきにくい」
と感じるはずです。
そして、大事にすべきなのは
あなたのブログを訪れるネットユーザーになりますので
ただのカテゴリーとは言え
ユーザーを意識した見やすいデザインの方が
ユーザビリティも上がり
クリックされる可能性も高くなるというわけです。
なので、細かい部分ではありますが
サイト運営で大事なのは、例え細かい部分でも
ネットユーザーに配慮するということ。
それがサイト運営者である
あなたへの信用にも繋がりますからね。
だから、もしもあなたが
「THE THOR（ザ・トール）」のカテゴリー表示が
分かりにくいと思っているのなら
ぜひこちらのデザインもカスタマイズしてみてください。
デザインに関しては
↓アイコンを足してカテゴリー表示をより見やすくする方法
↓シンプルなボタン表示に変える方法
それぞれをご紹介しています。
ということで、気になったあなたは
「レッツトライ！」＾＾
THE THORのSNSボタンを可愛くアレンジ！
先にお伝えしておきますが
この記事は完全に私の趣味です（笑）
「THE THOR（ザ・トール）」はSNSの
シェアボタンのデザインを11パターンの中から選べます。
とは言え、私はどれもパッとしませんでしたし
特に可愛いサイトを作りたい方に合うようなデザインが
ありませんでした。
なので、もう少しスッキリした
可愛いデザインにしたいというあなたのためだけに
「THE THOR（ザ・トール）」の設定にはないデザインを
CSSで作りました。
↓こんな感じ
ということで、SNSのシェアボタンを
「丸型の可愛いボタンに変えたい」というあなたは
ぜひ参考にしてみてください。
「どうでもいいわ！」という声の方が
多そうですけどね（笑）まぁ、私の趣味なので…
サイドバーのプロフィール表示をシンプルに！
THE THORのプロフィールウィジェット
SNSのフォローボタンの部分にはデザインの設定がありません。
なので、プロフィールウィジェットを使用すると
SNSのフォローボタンの部分は
サイトカラーで設定した色が割り当てられます。
しかし、シンプルでおしゃれなサイトにしたいあなたにとっては
おそらくフォローボタンの背景色は変更したいと思うはずです。
実際にカスタマイズすると
これだけ印象が変わりますからね。
↓After
ということで、THE THORのプロフィールウィジェット
SNSフォローボタンの背景色を変更したいあなたは「Let’s コピペ！」＾＾
蛍光マーカーにアニメーションをつけてアテンションアップ！
THE THORには蛍光マーカーを手軽に使える機能があります。
とは言え、最近ではどのテーマにも蛍光マーカーらしきものが実装され
かなり見慣れてきましたよね。
なので、もっと他のサイトと差別化したいと
考えている方もいるかもしれません。
そんなあなたにおすすめなのが
アニメーション付きの蛍光マーカー。
↑こんな動く蛍光マーカーですね。
※見逃したというあなたは「F5キー」を押してリロードしてみてください。
実は、この蛍光マーカー簡単に設置できます。
ということで、興味があるあなたは
ぜひこちらの記事を参考に実装してみてください＾＾
【コピペだけ！】スクロールで開始する蛍光マーカーの表示方法！
内部リンクを回遊させるサイトカードをもっとスッキリ！
THE THORにはネットユーザーにいろんな記事を読んでもらうために
「サイトカード」という内部リンクで回遊させるための機能があります。
ですが、サイトカードを複数使うと、表示量が多く
少し記事全体が野暮ったく見えてしまいます。
なので、これらの表示を少しだけスッキリさせ
さりげなくシンプルに表示させる方法をまとめています。
実際の仕上がりイメージがこちら
デフォルトのデザインと比べると、かなりシンプルになり見やすくなります。
ということで、THE THORのサイトカードを
シンプルにスッキリさせたいというあなたは
ぜひ参考にしてくださいね。
タグ管理機能をもっと有効に！
THE THORには非常に素晴らしいタグ管理機能が実装されています。
ですが、THE THORユーザーからすると意外にも
タグ管理機能に不満を持たれている方が多いです。
なぜなら、「タグ管理オリジナルフォーマット」を使わず
記事内に広告コードのみを挿入してタグ管理したいと
考えているTHORユーザーが多いからです。
なので、タグ管理機能を使い、ダイレクトに広告コードを入力すると
このように余計なタグ管理用の枠が残ってしまいます。
ということで、そんなTHORユーザーに応えるため
タグ管理に伴う不要な枠を削除する方法をまとめています。
もしもあなたが同様の使い方で「タグ管理」の枠が不要だと
不満を持っている場合は、ぜひ一度のぞいてみてくださいね。
プリセットパーツをもっとおしゃれに！
THE THORのタグ管理機能はプリセットパーツを組み合わせると
こんなレビュー用のタグを簡単に作ることができます。
ですが、私がTHE THORのプリセットパーツで残念に思うのは
スペース調整の詰めが甘く、せっかくのタグデータが
間延びして見えてしまうことです。
ということで、THE THORに実装されているプリセットパーツを
CSSでスマートに微調整しています。
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか？
| デザイン性 | 4.5 |
| カスタマイズ機能 | 4.5 |
| 操作性 | 4.5 |
| 初心者むけ | 4.0 |
| 総合評価 | 4.5 |
※上記はスコアボックスの天地幅などを微調整しています。
なので、もしもあなたがプリセットパーツのバランスが
イマイチだと考えている場合は
ぜひこちらの記事も併せて確認してみてください。
微妙な違いですが、かなり印象が変わるはずです。
THE THORのパンくずリストをサイトイメージに合わせる！
THE THORのパンくずリストは背景色の変更ができません。
なので、サイトデザインによっては、
パンくずリストの部分に違和感が出たり
特定の背景色だけが全て固定されることで、
他のサイトとの差別化が難しくなってしまいます。
特にこれからは個が大事になり、
サイトの差別化というのは、かなり重要です。
ということで、あなたの世界観をきちんと作り上げるため
例え些細な部分であっても、あなたのこだわりは
大事にするようにしてください。
THE THORのサイトロゴを適正サイズで表示させたい
THE THORにはデフォルトで、サイトロゴの画像サイズを調整する機能があります。
ですが、ダイナミックレイアウトで、サイトロゴを中心においた時は
少し小さく見えてしまったり、バランスが悪く場合があります。
なので、そんな時は、デフォルトの設定に頼らず
思い切ってCSSで調整しましょう！
サイトロゴの調整はコピペだけで簡単にできるので
初心者のあなたでも大丈夫です＾＾
THE THORにオリジナルボタンを実装する
THE THORには様々なボタンを実装する機能がありますが
どうしてもデフォルトのデザインではイメージが合わず不満
という場合も出てくるかと思います。
そんな時は私が今、使っているような
オリジナルボタンを実装しましょう。
こちらのボタンはコピペだけで
簡単に実装することができますので
今一つ、自分のサイトとデフォルトボタンのデザインが
ミスマッチだというあなたは、ぜひ参考にしてみてください。
THE THORをおしゃれにカスタマイズする方法まとめ
まだまだ記事としては少ないですが
これからさらに「THE THOR（ザ・トール）」に関しては
CSSでカスタマイズする方法を増やしていきたいと考えています。
なぜなら、多機能で非常に優秀な
「THE THOR（ザ・トール）」の購入者であるあなたには
もっと満足度を高めて欲しいと思うからです。
もちろん、私も
「THE THOR（ザ・トール）」のユーザーですし
デザイナーである以上はサイトデザインにこだわりたいです。
とは言え、
オウンドメディアとしてあなたのサイトを運営するなら
こだわりを持ってあなたに愛着の湧くデザインにする方が
- もっと自分のサイトをたくさんの人に見て欲しい
- ブログの運営が楽しい
- もっと頑張って記事を書こう
と、モチベーションも確実に上がります。
私が会社で働いていた時は
例え自分だけが依頼されたデザインの仕事であっても
- 面白いデザイン
- 自分が心の底から納得できるデザイン
などができた時は
ただクライアントに提案するだけではなく
会社内部のデザイナーにも
「こんなおもろいデザインできたでっ！」
「見て！見て〜！」と
見せたくなったものです。
なので、デザインに対してこだわりが強い人ほど
サイトの運営にも気合いが入りますし
その方が収益化もしやすくなります。
つまり、デザインにしろ、記事にしろ
「早く誰かに見て欲しい、読んで欲しい」と
あなたが心の底から思えるサイトができれば
必ずネットユーザーの心に届くし
- もっと面白い記事を書きたい
- ネットユーザーに役立つ記事を書きたい
と、どんどん思えるようになってきます。
さらに、デザインに力を入れているサイトというのは
他のユーザーにライバルチェックをされた時に
「このサイトには勝てそうにない」と思わせることができるようになります。
なぜならそこまでデザインに力を入れていないサイトの方が
今でも圧倒的に多いからです。
なので、私はデザインを通じて、まずは
運営者であるあなたが自分のブログを「誇れる」ような
サイトにできるお手伝いができれば
あなたのサイトは必ずみんなに読まれるようになるし
多くの人に読まれることで、あなたの収益は
どんどん膨らんでいくと信じています。
なので、多くの人は
- 「所詮ただのWebデザイン」
- 「デザインよりも記事」
と思っているかもしれませんが
私はデザインの力が、
あなたの記事を書くモチベーションに繋がれば
こうした記事を書く意味があると思っています。
特に今回は、初心者のあなたでも簡単にできる
「コピペだけ」でできるカスタマイズの方法を
ご紹介しましたので、
ぜひ「ビビらずに」チャレンジしてみてください！
CSSは噛み付きませんし（笑）
必ずあなたにもできますので＾＾
ということで、まだまだこれから時間を見つけて
「THE THOR（ザ・トール）」のカスタマイズに関する記事を
増やしていこうと考えております。
なので、今後の記事も
楽しみにしていただけたら嬉しいです。
最後までお読みいただきありがとうございました！
