【コピペで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

注文住宅で「後悔しない家づくり」をするには


まず第1に、ハウスメーカー選びが大切です。
そのうえでハウスメーカー各社の比較検討はかかせません。

とはいえ1社ずつ資料を集めるのには非効率的です。

そこで便利なのが一括資料請求サービス「タウンライフ家づくり」

各社の【プラン計画】【見積もり費用】をイッキに無料請求し効率的なハウスメーカー選びが可能に。

まずは簡単な質問に答えてハウスメーカー診断してみませんか?

CTR IMG