みなさんこんにちは。
JonyとAi(@10to1_travel)です。
みなさん人のサイトに訪問した時、そのサイトは「どんな人が書いてて、どんな内容のサイトなのか」気になったことありませんか？
プロフィールひとつでリピーターを増やすこともできますし、サイトの PV数を上げることもできます。
プロフィールは重要な要素なんです！
THE THORにはプロフィールを設置する機能があります。
ですが、ちょっと分かりにくかったりするんですよね。
そこで本日は THE THORを使ってる私たちが、THE THORのプロフィールの設置方法、応用、カスタマイズを一挙に説明します！
私たちは THE THORのカスタマイズが大好きです。
THE THOR(ザ・トール)を本格的にカスタマイズしたい方は、HTML・CSSの勉強にオススメの本8冊｜ブログをもっとカスタマイズ！をご覧ください。
THE THOR プロフィール【作成 編】
THE THORのプロフィールの設置は簡単です。
まず下準備として、プロフィールの画像作成と、文章を準備しましょう。
手順は以下の順番で行います。
- プロフィール画像を作成する
- プロフィール画像をアバターとして登録
- プロフィール文を作成
簡単ですのでサクッと済ませましょう。
① プロフィール 画像を作成する
プロフィール画像を作成します。
私たちは撮った写真をそのままアバターとして使用してますが、顔出し NGの人や、可愛いイラストを使用したい人もいると思います。
オススメな方法としてはココナラを使ってデザイナーさんに依頼するのが、簡単でおしゃれなイラストを安く作れます。
費用の相場
1,000〜 3,000円
※デザイナーのスキルによります。
ココナラはサイトロゴやトップページの作成にも使いますので、
まずは登録だけでも行っておきましょう。(※登録自体は無料です)
→ 無料登録はこちら
イラストを作成する必要の無い人は、写真を準備すれば OKです。
THE THORにプロフィール 画像を設置する
続いて準備したプロフィール画像を THE THORにアバターとして設定します。
設定はプラグインを使って行います。
① 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のプロフィールのデザインで一番しっくりきてました。
とても分かりやすく、オススメです。
サイドバーのプロフィールエリアに、プロフィールページやコンタクトフォームへのリンクも一緒に置けるようにカスタマイズする方…
以下のコードを「追加 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;/*メールアイコンにカーソルを乗せた時の色*/
}
/*プロフィールの囲い枠線*/の 2pxの数値を大きくすると線が太くなります。
また、#cccのカラー数値を変えると好みの色に変更できます。
あとはカラーの部分を好みの色番号に変えるだけで好きなデザインに変えることができます。
考えたヒノさんすごいですね。
以上でカスタマイズは完了です。
お疲れ様でした。
THE THORのおすすめ カスタマイズ一覧
私たちはカスタマイズが大好きで、THE THORの色んなパーツを日々いじって研究してます。
そんな私たちのカスタマイズ案です。
THE THOR プロフィールの活用【設置・応用・カスタマイズ】まとめ
本日は THE THORのプロフィールの活用を設置・応用・カスタマイズに分けて紹介しました。
プロフィールはブログに訪問してくれた読者にアピールする大切な部分です。
最後まで読んでいただきありがとうございます。
おわり