【コピペだけ！】THE THORのプロフィールをカスタマイズ！

ここあです。

WordPressテーマ「THE THOR（ザ・トール）」も

正式にリリースされてから1年が経ちました。

なので、「THE THOR（ザ・トール）」の利用者も

かなり増えてきた印象があります。

ということで、いよいよ

カスタマイズ記事の需要が増えてくると

期待してしまう今日この頃であります（笑）

とは言え、

まだまだ日本ではそれほど日本語に対応した

有料テーマが多くはありませんので

私が使っているこのテーマ「STORK」もそうですが

利用者が増えてくるとそれだけ「デザイン被り」という

利用者にとってはあまり嬉しくない事態が起こってしまいます。

ということで、今回は

「少しでも他のサイトと差別化したい！」という

サイトデザインにこだわるあなたのために

WordPressテーマ「THE THOR（ザ・トール）」の

プロフィールウィジェットをカスタマイズする方法

について解説させていただきます。

例によって、私の記事は例え初心者のあなたでも

「簡単にコピペだけでカスタマイズできる方法」というのを

解説しておりますので

「THE THOR（ザ・トール）」のデザインに

多少なりとも不満があるあなたはぜひ私の記事を参考にしてみてくださいね。

THE THORのプロフィールデザインを変えよう！

まず最初に、「THE THOR（ザ・トール）」の

プロフィールウィジェットをどのようにカスタマイズできるか

Before → Afterをお見せします。

なので、Before → Afterの画像を見て

「変更したい！」と思ったあなたは

このまま読み進めてください。

そうでないあなたは…（笑）

ということで、Before → Afterの画像がこちら。

つまり、今回のカスタマイズでは何ができるかというと

SNSフォローボタンの表示部分がカスタマイズできる

ということです。

THE THORのウィジェットは見出しデザインなどは

ある程度、自由にカスタマイズできますが

ちょっとしたパーツデザインの部分に関しては

あまり融通が効かない印象があります。

とは言え、

どのテーマもそこまで細部に設定できるものは

ほとんどないんですけどね＾＾；

だからこそ、

「CSSを使ったカスタマイズ」というのが生きるわけです。

ただ、THE THORに関しては

せっかくおしゃれなサイトデザインが簡単に組めたとしても

パーツデザインだけで見ていくと

どうしてもサイト全体の雰囲気とミスマッチになる部分があり

今回、私がプロフィールのフォローデザインの部分を

変更しようと思ったのも

今のデザインのままだと、

「シンプルなデザインには合わない」と

判断したからなんですね。

なので、少なからず私と同じような不満を

持っている人もいると思いましたので

今回は、ほんのちょっとしたカスタマイズですが

それでも、サイト全体の雰囲気に

「統一感を出したい！」というあなたにとっては

かなりメリットがあるのではと思います。

今となってはプロフィールウィジェットや

SNSのフォローボタンも欠かせない存在ですしね。

ということで、

「カスタマイズしたい！」と思ったあなたは…

「Let’s コ・ピ・ペ！」（笑）

THE THORのプロフィールウィジェットをおしゃれにする方法

例によって、まずは

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

カスタマイズするための設定方法からご説明致します。

なので、もしもすでにわかっているというあなたは

ここの見出し部分は読み飛ばしてください。

THE THORをカスタマイズする場合は

外観 → テーマエディター をクリックし

以下のstyle-user.cssの部分にコードを直接書く方法と

外観 → カスタマイズをクリックし

以下「追加CSS」の部分に書く方法と２つあります。

私は後者の外観 → カスタマイズ → 追加CSSに書く方が

おすすめですので、もしもあなたにこだわりがなければ

「追加CSS」の方に私が紹介するコードを

記載するようにしてくださいね。

その方がプレビュー画面で見ながら

設定ができるので分かりやすいです＾＾

プロフィールウィジェットをおしゃれにするCSSコード

それでは、THE THORのプロフィールウィジェットを

カスタマイズするためのコードをご紹介します。

あなたがすることは、私が紹介する以下のコードを

上記で説明した「追加CSS」の部分にコピペするだけです。

簡単ですよね＾＾

ということで、CSSコードはこちらです。

追加CSSにコピペ

.widgetProfile__sns {
background-color: #fff;
border:dashed 1px #555;
}.widgetProfile__sns h4 {
color: #db7093;
}.widgetProfile__sns .icon-twitter {
color: #555;
}.widgetProfile__sns .icon-instagram{
color: #555;
}

上記、CSSコードを「追加CSS」にコピペすると

先ほど、私が紹介した「After」と同じデザインに

変更されるはずです。

ということで、ここからはさらにCSSコードをカスタマイズして

あなたのオリジナルデザインにする方法について解説します。

プロフィールウィジェットのデザインを変更する方法

それでは順番に解説します。

文字の色を変更する方法

まずは、「インスタ始めました！」と書いてある

文字の色を変更する方法。

こちらのCSSコードは以下の部分になります。

上記コードに記載してある

color: #db7093;の部分が文字のカラーコード。

なので、現在のフォントカラーはピンクに設定してありますので

文字の色を変えたいという場合はcolor: #db7093;の

6桁のカラーコードをあなたの好きな色のコードに変更してください。

罫線の色や線種を変更する方法

フォローボタンを囲っている周りの罫線は

私が紹介したCSSコードは波線にしてあります。

なので、もしも周囲の罫線を実線にしたいとか

点線にしたいという場合は、以下のコード

border:dashed 1px #555;この部分のdashedを

solidにした場合は実線に

dottedにした場合は点線に

なりますのでそれぞれ打ち替えてください。

また、罫線の太さを変更する場合は

border:dashed 1px #555;この部分の1pxという数字を

2pxや3pxなど、数字を変更してみてください。

そうすると周りの罫線が太くなります。

さらに、勘の良いあなたはもうお分かりだと思いますが

border:dashed 1px #555;この部分の#555という

ここのカラーコードを変えることで

罫線の色を変更することもできます。

ということで色々と試してみてくださいね。

SNSフォローアイコンの色を変える方法

SNSのフォローアイコンに関しては

私のCSSコードはグレーにしてあります。

なので、SNSフォローアイコンの色を変えたいという場合は

以下のコード

上記コードのcolor: #555;のカラーコードを

あなたが好きな6桁のカラーコードに打ち替えてください。

なお、私は現在、インスタとTwitterしか表示させてませんので

ご紹介したコードには２種類のコードしかありませんが

もしもあなたがFacebookやYoutubeのフォローアイコンを

表示させているという場合は、以下のコードを

「追加CSS」に追記して、カラーコードを変更してください。

Facebook

Youtube

Linkedin

Pinterest

※Google＋は、あまり需要がないと思いますので割愛しています＾＾；

背景色だけを変えたいという場合

今、この記事を読んでいるあなたは

もしかすると、罫線とかは付けなくていいけど

とにかく「背景の色だけ変更したい」と思っているかもしれません。

なので、念のため、背景色だけ変更する方法についても

記載しておきますので、

以下のように、

サイトカラーで設定してある色と

違う色を設定したい！というあなたは

こちらのコードをコピペしてください。

追加CSSにコピペ

.widgetProfile__sns {
background-color: #fcbbbb;
}

なお、カラーコードはAfterのサンプル画像と同じ

ピンク色に設定してありますので

背景色の色を変更する場合は

CSSコードにある

background-color: #fcbbbb;の6桁のカラーコードを

あなたの好きなカラーコードに変更してみてくださいね。

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

今回はTHE THORの

プロフィールウィジェットに関するSNSフォロー部分の

デザインをカスタマイズする方法について解説させていただきました。

今回あなたにご紹介したコードは

それほど劇的な変化が得られるカスタマイズではありませんが

それでも、サイドバーウィジェットの最上部に持ってくる人が多い

プロフィールウィジェットのカスタマイズなので

少しカスタマイズするだけでも、だいぶ印象が変わるはずです。

なので、カスタマイズ方法を知らない人がみた場合は

「THR THORにそんなカスタマイズできる設定あったっけ？」

と、おそらくなると思います（笑）

デザインのカスタマイズというのは多くの人が

いろんな部分を一気に全て仕上げてしまおうと思うから

カスタマイズに時間がかかり、良いデザインにもなりません。

しかし、サイト運営しながら

自分が目指す世界観に合わせて少しずつ

できる時に積み重ねていけば

最初とは全然違う、

しかも遥かに良いデザインができたりします。

なので、何事も小さな積み重ねが大きな実を結びますので

何もかも慌ててやろうとするのではなく

できることから少しずつ実践するようにしてみてくださいね。

また、何かTHE THORのカスタマイズで

気になった部分があれば、CSSでカスタマイズして

あなたにもカスタマイズ方法をシェアしていきますので

THE THORのデザインに不満があるというあなたは

ぜひ、これからの記事も楽しみにしていてください。

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