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

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

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

カスタム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>
  • profile boxは、CSSのclass 指定で使います。
  • box titleは、タイトル部分になります。
  • profile_centerは、真ん中を指定。
  • 画像を貼って。
  • ニックネームや、名前を書く。

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

定型文吹き出し7

プロフィール画像のCSS

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

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

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

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

tonton
tonton
私は、全体の中に貼りました。

全体の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;
}
  • profile_box の部分は、枠デザインのCSSを貼ります。サルカワさんでは・box番号になっています。その部分を profile_boxに変更し、使っていきます。
  • profile_box .box-titleは、タイトル部分になります。サイドバーの大きさとバランスが悪くならないように変更してください。
  • 内容部分は、センターに来るようになっています。
  • 名前と自己紹介文は、文字の大きさなど、変更できるので、自分好み大きさを変更してカスタマイズしてください。

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

プロフィールカスタマイズ2

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

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

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

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

プロフィールカスタマイズ3

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

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

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

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