【コピペで10分解決】THE THORのウィジェットでサイドバーにプロフィールを作成する方法

いっぬ
THE THORのウィジェット機能でプロフィールを作るにはどうすればいいの?
よわこ
そうそう、THE THORで 「利用できるウィジェット」 の項目の中には「プロフィール」って実はないんだよね。。
よわこ
でも「カスタムHTML」を使えば、簡単に作れるよ!

ということで、今日は「カスタムHTML」を使ってプロフィールを作る方法を紹介しますよ⁂

 

THE THORウィジェットで「プロフィール」項目を作成する方法
所要時間は10分程度、HTML・CSSのコピペでOKなのでとっても簡単!

 

この記事を最後まで読んでもらえたらこんな風にサイトのサイドバーやフッターなどに、
「プロフィール」が設定できるようになりますよ。

04_001_この記事で解決すること

 

 

 

【コピペで解決】THE THORのウィジェットでプロフィール欄を作成する方法【カスタムHTML】

ではさっそくいきましょう!
今回はプロフィール欄を「サイドバー」に設置するていで進めていきたいと思います。

手順はざっくりこんな感じ。

 

手順

  1. WordPressのウィジェットメニューでカスタムHTML項目を追加
  2. 当記事で配布するHTMLをコピーする
  3. カスタムHTMLの設定欄へペーストして保存
  4. 追加CSSでデザインのカスタマイズをする

 

1

まずはWordPress管理画面で「外観>ウィジェット」を開くよ

利用できるウィジェットの項目の中からカスタムHTMLを選んで「✓サイドバーエリア」にウィジェットを追加する

04_002_ウィジェットを追加する
04_003_ウィジェットが追加された

 

2

次に、下記のHTMLをまるっとコピーする(右の「+」を押すとHTMLが表示されるよ)

コピペ用HTML
<div class=”faceicon”><img src=”【アイコンimgのURL】”></div>
<br>
<p style=”text-align: center;”><span style=”font-size: 14pt; color: #545353;”><span class=”look_bold”>【名前を入力】</span></span></p>
<br>
<br>
<p style=”text-align: left;”><span style=”color: #707070;”>【1行目】</span></p>
<br>
<p style=”text-align: left;”><span style=”color: #707070;”>【2行目】</span></p>
<br>
<p style=”text-align: left;”><span style=”color: #707070;”>【3行目】</span></p>
<br>
<p style=”text-align: left;”><span style=”color: #707070;”>【4行目】</span></p>
<br>
<div class=”followme” align=”center”>
<span style=”color: #ababab;”>\ Follow me /</span>
<br>
<div class=”snsbtn_tw”><a class=”icon-twitter” href=”【TwitterアカウントのURL】” rel=”noopener”> </a></div>
<div class=”snsbtn_mail”><a class=”icon-mail5″ href=”【お問い合わせページのURL】” rel=”noopener”> </a></div>
</div>
04_004_HTMLをコピー

 

3

コピーしたHTMLを 1⃣ で追加したカスタムHTMLの「内容」欄にペーストして、【】で囲まれてる部分を自分用に編集してね

「タイトル」の欄には ” Plofile ” や ” プロフィール ” などタイトル表記させたい名前を入力して「保存」ボタンをクリック

04_005_HTMLをペーストする
04_006_HTMLを編集する

 

4

最後にウィジェット追加したHTMLのデザインをCSSでカスタマイズするよ

WordPress管理画面で「外観>カスタマイズ>追加CSS」を開き、そこへ下記CSSをコピペする

(下記右端「+」ボタンでCSSが表示されるよ・HTMLと同じ要領で表示されたCSS記述を追加CSSへコピー&ペースト)

CSS
/*—プロフィール用SNSボタン— */
.snsbtn_tw{
display: inline-block;
position: relative;
background-color:#86c2f0;
border:solid 1px;
border-color:#86c2f0;
border-radius:20px;
height:40px;
width:43px;
margin-top:15px;
margin-right:3px;
}
.snsbtn_tw a{
color:#fff;
font-size:23px;
text-decoration:none;
padding-left:5px;
line-height:39px;
}
.snsbtn_mail{
display: inline-block;
position: relative;
background-color:#d9b8ad;
border:solid 1px;
border-color:#d9b8ad;
border-radius:20px;
height:40px;
width:43px;
margin-top:15px;
}
.snsbtn_mail a{
color:#fff;
font-size:23px;
text-decoration:none;
padding-left:5px;
line-height:39px;
}/*—プロフィール用
* * フェイスアイコン枠— */
.faceicon {
margin-left: auto;/*センター配置 */
margin-right: auto;/*センター配置 */
width: 170px;
}
.faceicon img{
width: 100%;
height: auto;
border: solid 2px #d6d6d6;
border-radius: 50%;
}

 

04_007_外観カスタマイズで追加CSSへ移動
04_008_CSSをペーストする

 

これだけです!作業終わり!

サイトトップへ戻ってサイドバーにちゃんと反映されてるか確認してみてみましょう~✿

 

04_009_プロフィール設置の完了

 

今回は、SNSアイコンには「Twitter」「お問い合わせメール」の2種にしましたが

「instagram」「Facebook」など別のSNSも加えたい場合は

HTMLとCSSを追加すればアイコンを増やすことができますよ~!

 

04_010_SNSの追加
04_011_SNSの追加

 

今日はこの辺で。

次回また会いましょう~✿

Sponsored Link
04_アイキャッチ_768px
最新情報をチェックしよう!

最強のWordPressテーマ「THE THOR」

本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております!

CTR IMG