【WordPress】オリジナルのプロフィール用テンプレートの紹介

2024年3月26日2024年3月31日

この記事は 2 分で読めます。

概要

WordPress（ワードプレス）でオリジナルのプロフィールを作るためのテンプレートを紹介します。既存の設定ではなくカスタマイズしてオリジナリティーを出したい方、必見です。本記事ではHTML＆CSS形式にて解説します。

この記事の読者層

オリジナルのテンプレートを作成した人

自己紹介文

WordPress内のウェジェットで標準で搭載されているプロフィールはかゆい所に手が届かないですよね。

筆者も画像の大きさや必要な所に必要な部品がなく困った経験があります。

今回は見栄えが良いプロフィール画面をカスタマイズして使えるテンプレートを紹介します。

コピペで使えるプロフィール用テンプレート

wordPressのウェジェット内に設置

<div class="box prof">
<p class="icatch"><img src="https://wisenetwork.net/wp-content/uploads/2022/08/workdstation-scaled.jpeg" alt="背景画像"></p>
<p class="circle_icon"> <img src="https://wisenetwork.net/wp-content/uploads/2022/10/cat_prof.png" alt="プロフィール画像"> </p>
<p><br></p>
<p class="name">サーバー管理人：かつおぶし工房</p>
<p class="txt" align="left"> 自宅サーバーを10年前に立て、現在は4代目のサーバー機でブログを運用中。気がつけば、サーバー運用歴10年以上、WordPress利用歴5年以上の経歴。</p>
<p class="txt" align="left"> この間培ったノウハウをブログでも発信中。</p>
<p class="txt" align="left"> それとは別に科学系ブログなどでも活躍中です。 </p>
<p>     <!-- ▼SNSボタン（不要なSNSは消してください）▼ -->     </p>
<ul class="icon">
<li class="twitter"><a href="ツイッターのリンク先" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li class="insta"><a href="インスタのリンク先" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li class="of_site"><a href="お好きなリンク" target="_blank"><i class="fas fa-desktop"></i></a></li>
</ul>
<p>     <!-- ▼ボタン▼ -->     </p>
<p class="irai_btn"><a href="https://bonitostudio.net" target="_blank">姉妹サイトもよろしく</a></p>
<p></p>
</div>

テーマファイルのstyle.css内に設置する。

/*--------------------------------------
ウィジェットタイトルに背景画像を設定する
--------------------------------------*/
.prof .icatch{
		margin:0 auto -100px auto;
}
.prof .circle_icon{
		width:150px;
    height:150px;
    border-radius:50%;
    overflow: hidden;
    /*border:3px solid #FF0000;*/
    margin:-50px auto -30px auto;
}
.prof .name{
    padding:0 -100px;/* 15 */
    text-align: center;
		font-size: 20px;
    font-weight:900;
    color:#249bd5;
    margin:0px 150;/* 0px 0 */
}
.prof .icon{
		margin:14px 0 0 0;
    text-align: center;
    padding:0 15px;
}
.prof .icon li{
    display: inline-block;
		margin:0 2px;
		width:45px;/* 60% */
		height:45px;/* 60% */
		border-radius:100%;
		font-size:28px;
		background-color: #6cc655;
		line-height:1.1;/* 1.7 */
}
.prof .icon li a{
    display: block;
    color:#fff;
		transform:translate(0%);/* -25% */
}
.prof .icon li.facebook{
    background:#3b5998;
}
.prof .icon li.twitter{
    background:#55acee;
}
.prof .icon li.of_site{
    background: #f0ad4e;
}
.prof .icon li.insta{
    background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000);
}
.prof .irai_btn{
    margin:-10px auto 0 auto;
}
.prof .irai_btn a{
    display: block;
    width: 270px;
    height: 55px;
    line-height: 50px;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #4ba9d4;
    border-bottom: solid 5px #2c86af;
    border-radius: 5px;
    margin: 0 auto;
}
.prof .irai_btn a:active{
    margin-top: 6px;
    border-bottom: none;
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
}
.prof .irai_btn a:hover {
    background-color: #f9c500;/*ボタン色*/
    border-bottom: solid 6px #f39800; /*下線色*/
}