【THE THOR】プロフィールを活用する！【設置方法・応用・カスタマイズ】

みなさんこんにちは。

THE THORユーザーの Jonyと Ai (@10to1_travel)です。

みなさん人のサイトに訪問した時、そのサイトは「どんな人が書いてて、どんな内容のサイトなのか」気になったことありませんか？

Jony

わしらはしょっちゅうあるな！

それを一目で説明できるのがプロフィールだよね！

プロフィールひとつでリピーターを増やすこともできますし、サイトの PV数を上げることもできます。

プロフィールは重要な要素なんです！

THE THORにはプロフィールを設置する機能があります。
ですが、ちょっと分かりにくかったりするんですよね。

そこで本日は THE THORを使ってる私たちが、THE THORのプロフィールの設置方法、応用、カスタマイズを一挙に説明します！

私たちは THE THORのカスタマイズが大好きです。

THE THOR(ザ・トール)を本格的にカスタマイズしたい方は、HTML・CSSの勉強にオススメの本8冊｜ブログをもっとカスタマイズ！をご覧ください。

1 THE THOR プロフィール【作成編】
2 THE THOR プロフィールをサイドバーエリアに【設置編】
3 THE THORのプロフィール【応用編】
4 THE THOR プロフィール【カスタマイズ編】
5 THE THOR プロフィールの活用【設置・応用・カスタマイズ】まとめ

THE THOR プロフィール【作成編】

THE THORのプロフィールの設置は簡単です。

まず下準備として、プロフィールの画像作成と、文章を準備しましょう。

手順は以下の順番で行います。

プロフィール画像を作成する
プロフィール画像をアバターとして登録
プロフィール文を作成

簡単ですのでサクッと済ませましょう。

① プロフィール画像を作成する

プロフィール画像を作成します。

私たちは撮った写真をそのままアバターとして使用してますが、顔出し NGの人や、可愛いイラストを使用したい人もいると思います。

オススメな方法としてはココナラを使ってデザイナーさんに依頼するのが、簡単でおしゃれなイラストを安く作れます。

費用の相場

1,000〜 3,000円
※デザイナーのスキルによります。

ココナラはサイトロゴやトップページの作成にも使いますので、
まずは登録だけでも行っておきましょう。(※登録自体は無料です)

→ 無料登録はこちら

イラストを作成する必要の無い人は、写真を準備すれば OKです。

THE THORにプロフィール画像を設置する

続いて準備したプロフィール画像を THE THORにアバターとして設定します。

設定はプラグインを使って行います。

WP User Avatar | User Profile Picture

① WP User Avatar ｜User Profile Pictureを「今すぐインストール」 → 「有効化」する。

② 「ユーザー」→「プロフィール」に進み、「画像の選択」からプロフィール画像を設定する。

③「プロフィールを更新」して完了です。

THE THORのプロフィール文を書く

THE THORに設置するプロフィールの文章を書きます。

ホーム → ユーザー → プロフィール

と進みます。

下の方に「プロフィールの情報」と言う蘭があるので、好きな自己紹介文を書いてください。

プロフィールに書く内容例

このサイトについて(何を発信してるサイト)
自己紹介(経歴や実績など)
サイトを読むことによって読者にどんなメリットがあるか
今後どうして行きたいか(夢や目標)

これで完了です。

※ここで書いたプロフィール文は改行されません。
改行の方法は後半で紹介します。

改行の方法を見る

THE THOR プロフィールをサイドバーエリアに【設置編】

上記の画像のように、THE THORのプロフィールをサイドバーエリアに設置する方法です。

① ウィジェットの設定画面に行く。

ホーム → 外観 → ウィジェット

②「 [THE]著作者情報」を「サイドバーエリア」に移す。

設置できるウィジェット一覧のところに [THE]著作者情報と言うウィジェットがあるので、設置したいところに表示させます。

仕様にもよりますが、ドラッグ&ドロップか、選択式でできると思います。

タイトルなど細かい設定は好みにアレンジしてください。

以上で設置は完了です。

THE THORのプロフィール【応用編】

THE THORのプロフィールを応用してもっと見やすくします。

【詳細はコチラ】を設定する方法
プロフィール文章を改行する方法
プロフィール下のアイコン設定

ひとつずつ紹介していきます。

【詳細はコチラ】設定する方法

THE THORのプロフィールはデフォルト設定だと、「記事一覧」になっています。

ここを【プロフィールの詳細】に変えたいと思った人いませんか？

THE THORには設定する機能は無いので、ここで紹介します。

手順 1.プロフィールを普通に設置

上記で紹介した手順でまずはプロフィールをサイドバーエリアに設置してください。

簡単ですね。

手順 2.プロフィールのHTMLをコピー

① 設置が完了したらブラウザにサイトを表示してください。

② そのまま裏側の HTMLを表示します。

Mac：「command ＋ option ＋ i」を同時に押す
Windows：「F12」

③ 以下の画面のように「Elements」をクリックして「矢印マーク」をクリックしてください。

④ そのまま先ほど設置したプロフィールをクリックします。

⑤ 以下の画面のように、この部分をコピーしてください。

ショートカットキーでコピーできます。

Mac：「command ＋ c」
Windows：「Ctrl + c」

手順 3.カスタム HTMLを設置

サイドバーエリアに「カスタム HTML」を設置してプロフィールを完成させます。

ホーム → 外観 → ウィジェット

と進み、サイドバーエリアに「カスタム HTML」を設置します。

「カスタム HTML」の内容のところに先ほどコピーした HTMLをペーストしてください。

手順 4.リンクURLの修正

このままだとデフォルトのままなので、ボタンのURLを書き換えます。

上記の画像のURLの部分を任意の URLに書き換えてください。

→ 固定ページのプロフィールの場合はその URLをペースト。

以上で【詳細はコチラ】の設置は完了です。
ボタンタイトルは自由に変更してください。

例)

プロフィールをみる
詳しくみる
もっと詳しく

ちなみに当ブログは「詳しくみる」にしてます。

プロフィールの文章を改行する方法

プロフィールの文章を改行する方法です。

この設定をしないと、文章は Twitterのプロフィールのように全て繋がって読みにくいです。

設定は簡単です。

上記で設置した HTMLの文章の、改行したい部分に<br>を入れるだけです。

プロフィールのアイコンを設定する方法

THE THORのプロフィールのアイコン蘭の設定方法です。

こちらは THE THORの機能を使って簡単に行えます。

ホーム → ユーザー → プロフィール

と進んで、以下の画像の部分に指定の URLを記入してください。

「プロフィールを更新」をクリックして完了です。

THE THOR プロフィール【カスタマイズ編】

最後に THE THORのプロフィールを CSSでおしゃれにカスタマイズします。

※ カスタマイズは自己責任でお願いします。

完成図は以下の通りです。

おしゃれになりましたね♪

このカスタマイズはヒノさんのカスタマイズを参考にさせていただきました。

THE THORのプロフィールのデザインで一番しっくりきてました。
とても分かりやすく、オススメです。

カスログ for THE THOR

【THE THOR】サイドバーのプロフィールエリアのカスタマイズ

サイドバーのプロフィールエリアに、プロフィールページやコンタクトフォームへのリンクも一緒に置けるようにカスタマイズする方…

以下のコードを「追加 CSS」にコピペしてください。

ホーム → 外観 → カスタマイズ → 追加 CSS

THE THORの「追加 CSSの方法」についてもっと詳しく知りたい方は以下の記事をご覧ください。

簡単！THE THOR「追加 CSS」でカスタマイズする方法

みなさんこんにちは。 THE THORのデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ！】ってタイトルありますよね。でもコピペってどこに？追加 CSSって何？どうやって[…]

/*プロフィールのカスタマイズ*/
.widgetProfile{
margin-top:80px;
margin-bottom:40px;
border:2px solid #ccc;/*プロフィールの囲い枠線*/
border-radius:10px;}

.widgetProfile__img{
margin-top:-60px;
}
.widgetProfile__sns {
padding: 0 10px 15px 10px;
}
.widgetProfile__snsItem .widgetProfile__snsLink {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 20px;
color: #505050;/*SNSボタンのアイコン色*/
background: #fffff9;/*SNSボタンの背景色*/
border: 1px solid #505050;/*SNSボタンの枠線色*/
}
.widgetProfile .widgetProfile__sns {
background-color: transparent;
}
.widgetProfile__snsTitle {
color: #999;
}
.widgetProfile__text{
padding:10px 20px;
}
.widgetProfile__snsLink:hover.icon-user {
background: #eebbcb;/*アイコンにカーソルを乗せた時の色*/
}
.widgetProfile__snsLink:hover.icon-mail5 {
background: #aaa;/*メールアイコンにカーソルを乗せた時の色*/
}