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

この記事は 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; /*下線色*/
}

まとめ

本記事のまとめ

✔ WordPressのWedget内の設置するHTML形式の自己紹介文のコードを紹介しました。

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です