ということで、今日は「カスタムHTML」を使ってプロフィールを作る方法を紹介しますよ⁂
THE THORのウィジェットで「プロフィール」項目を作成する方法
所要時間は10分程度、HTML・CSSのコピペでOKなのでとっても簡単!
この記事を最後まで読んでもらえたらこんな風にサイトのサイドバーやフッターなどに、
「プロフィール」が設定できるようになりますよ。
![04_001_この記事で解決すること](https://yowacoblog.com/wp-content/uploads/2021/02/4ed5cfcccdc1e5b42d58f04f93c8b8bd-1.png)
【コピペで解決】THE THORのウィジェットでプロフィール欄を作成する方法【カスタムHTML】
ではさっそくいきましょう!
今回はプロフィール欄を「サイドバー」に設置するていで進めていきたいと思います。
手順はざっくりこんな感じ。
手順
- WordPressのウィジェットメニューでカスタムHTML項目を追加
- 当記事で配布するHTMLをコピーする
- カスタムHTMLの設定欄へペーストして保存
- 追加CSSでデザインのカスタマイズをする
まずはWordPress管理画面で「外観>ウィジェット」を開くよ
利用できるウィジェットの項目の中からカスタムHTMLを選んで「✓サイドバーエリア」にウィジェットを追加する
![04_002_ウィジェットを追加する](https://yowacoblog.com/wp-content/uploads/2021/02/40719321690be989b186c0fe52180fe2.png)
![04_003_ウィジェットが追加された](https://yowacoblog.com/wp-content/uploads/2021/02/424df76870aaf803c1074d8d098dd9e8.png)
次に、下記の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をコピー](https://yowacoblog.com/wp-content/uploads/2021/02/3de94010b0e2e5b697c835183f16b61c.png)
コピーしたHTMLを 1⃣ で追加したカスタムHTMLの「内容」欄にペーストして、【】で囲まれてる部分を自分用に編集してね
「タイトル」の欄には ” Plofile ” や ” プロフィール ” などタイトル表記させたい名前を入力して「保存」ボタンをクリック
![04_005_HTMLをペーストする](https://yowacoblog.com/wp-content/uploads/2021/02/3c56371c7d7c300b0cfe523202bfc5f5.png)
![04_006_HTMLを編集する](https://yowacoblog.com/wp-content/uploads/2021/02/85ff5177ef4e3aa1ac8105c06df0fb6c.png)
最後にウィジェット追加した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へ移動](https://yowacoblog.com/wp-content/uploads/2021/02/b36aad57dcb8315b0de8d68ca115eac9.png)
![04_008_CSSをペーストする](https://yowacoblog.com/wp-content/uploads/2021/02/6255fa63d905eade31a790e4930ae4d7.png)
これだけです!作業終わり!
サイトトップへ戻ってサイドバーにちゃんと反映されてるか確認してみてみましょう~✿
![04_009_プロフィール設置の完了](https://yowacoblog.com/wp-content/uploads/2021/02/2cef1843d101455e83e75b61ce050e3a.png)
今回は、SNSアイコンには「Twitter」「お問い合わせメール」の2種にしましたが
「instagram」「Facebook」など別のSNSも加えたい場合は
HTMLとCSSを追加すればアイコンを増やすことができますよ~!
![04_010_SNSの追加](https://yowacoblog.com/wp-content/uploads/2021/02/fe07e2975755aa50d4b83827c02e13f5.png)
![04_011_SNSの追加](https://yowacoblog.com/wp-content/uploads/2021/02/5ea49b4fe71a966ad9950a6d66f45300.png)
今日はこの辺で。
次回また会いましょう~✿