Luxeritas　カスタマイズしたプロフィールをサイドバーに設置

2022年1月18日

サイドバーにプロフィールを設置

ダッシュボードから外観、ウィジェットから、サイドバーに、設置していきます。

カスタムHTMLを、プロフィールを自分が配置したい場所に設置。

このカスタムHTMLに、HTMLを書いていきます。

プロフィール画像の準備

200pxの正方形の画像を準備しましょう。

自分のアイコンでも、イラストでも、プロフィールに載せたい画像の準備。

デザインを決めましょう。

私は、サルカワさんのボックスデザインを参考にさせていただきました。

 

デザインが決まったら、プロフィールに使えるように変更していきましょう。

 

変更していくために、参考にさせていただいたのは、綾糸.netさんです。

HTMLを貼っていく。

ダッシュボードから外観、ウィジェットのカスタムHTMLに、貼る。

<div class="profile_box">
<div class="box-title">プロフィール</div>
<div class="profile_center">
<img alt="" src="画像URL" class="profile_figure">
<div class="profile_name">名前</div></div>
<p>説明文</p>

CSSをスタイルシートに貼っていきます。

プロフィール画像のCSS

/*プロフィール画像*/
.profile_figure {
width:150px;
height:150px;
border-radius: 50%; /*丸くする*/
border: solid 3px #好みの色; /*枠線*/
}

画像の大きさだったり、枠線の色だったり、変更できます。

自分が使うボックスのカラーに合わせましょう。

色の名前とコードが一目でわかるWEB色見本【カラーコード】

全体のCSS

/*プロフィール*/
/*枠デザイン*/
.profile_box {
padding: 0.2em 0.5em;
margin: 2em 0;
color: #565656;
background: #ffeaea;
box-shadow: 0px 0px 0px 10px #ffeaea;
border: dashed 2px #ffc3c3;
border-radius: 8px;
}
.profile_box .box-title {
font-size: 18px;
line-height:1.8;
background: #f2c2c2; /*タイトルの背景色*/
padding: 4px;
text-align: center;
color: #FFF; /*文字色*/
font-weight: bold;
letter-spacing: 0.05em;
border-radius: 8px;
}
/*内容*/
.profile_center{
text-align: center;
margin: 10px 15px 0 0;
}
/*プロフィール画像*/
.profile_figure {
width:150px;
height:150px;
border-radius: 50%; /*丸くする*/
border: solid 3px #ffc3c3; /*枠線*/
}
/*名前*/
.profile_name {
padding: 15px 20px;
font-weight:bold;
font-size:16px;
}
/*自己紹介文*/
.profile_box p {
padding: 15px 20px;
margin: 0;
}

出来たプロフィールがこちら。

サイトについての説明をリンクさせる

当サイトについてはこちらの部分は、

<p>当サイトについては<a href="URLを貼る">こちら</a></p>

リンクさせたいURLを貼るんですが、固定ページに飛ばしたい場合は、

固定ページ　➡　リンクさせたいページ　➡　クイック編集　➡　スラッグをコピー

スラッグ部分を貼っても、リンクさせることが出来ます。

以上で、私がやったカスタマイズです。

コピペ可能なデザインを使って、カスタマイズしていきましょう。