>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

コピペで！ルクセリタスのサイドバーにおしゃれなプロフィール欄を設置

ルクセリタス・カスタマイズ
この記事は約10分で読めます。
     

ルクセリタスにはプロフィール欄を表示するウィジェットや機能はありませんので、

カスタムHTMLウィジェットを使って自力で作るしかないのですが、デザインを考えて作りこんでいくのは面倒なので、コピペで完了するものを作ってみました。

 

プロフィール欄

 

その他にもこの記事で紹介するデザイン＋７パターンを以下にまとめています。

コピペでOK！サイドバーにおしゃれなプロフィール欄を設置：８パターン
プロフィール欄を表示するウィジェットや機能がないテーマにも、CSSとHTMLのみで簡単に設置できるデザインをいくつか。 手順 プロフィール画像を使う場合は画像を用意 プロフィールエリア用のデザインをCSSで記述 カスタムHTMLウィジェット...
ayaito.net
2020.04.12

 


 

手順

  1. プロフィール画像を使う場合は画像を用意
  2. プロフィールエリア用のデザインをCSSで記述
  3. カスタムHTMLウィジェットにHTMLを記述
  4. SNSフォローボタンの設定

プロフィール用画像は、WordPressのアバターで使っているものでもいいですし、作成する場合は、200*200px程度の正方形で。

SNSフォローボタンについては、ルクセリタスの独自ウィジェット「#7 SNSフォローボタン」で設定した内容をそのまま利用します。

 

プロフィールエリアを作る

注意点

上から順番に、デザインに応じたCSSを記述していますので、

必要なものを順番に追記していく形でCSSをコピーしてお使い下さい。

 

CSSは子テーマのstyle.cssに追記して下さい。

子テーマの編集

子テーマの編集：スタイルシート

 

枠のデザイン

枠のデザインはサルワカさんのBOXデザインを参考にしました。
他にもいろいろなデザインがあるのでご参考に。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。
saruwakakun.com

プロフィール欄

CSS

/*枠デザイン*/
.profile_box {
margin: 2em 0;
background: #dcefff; /*内容の背景色*/
}
.profile_box .box-title {
font-size: 18px;
line-height:1.8;
background: #5fb3f5; /*タイトルの背景色*/
padding: 4px;
text-align: center;
color: #FFF; /*文字色*/
font-weight: bold;
letter-spacing: 0.05em;
}
/*内容*/
.profile_center{
text-align: center;
margin: 10px 15px 0 0;
}
/*名前*/
.profile_name {
padding: 15px 20px;
font-weight:bold;
font-size:16px;
}
/*自己紹介文*/
.profile_box p {
padding: 15px 20px;
margin: 0;
}

 

プロフィール欄

背景色なしにする場合は、上記CSSの一番上の「profile_box」の部分を以下に変更して下さい。

CSS

.profile_box {
margin: 2em 0;
border: solid 2px #5fb3f5; /*枠線色*/
}

 

リストを使う

プロフィール欄

 

CSS

.profile_box ul {
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
}
.profile_box ul li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
}
.profile_box ul li:before {
font-family: "Font Awesome 5 Free";
content: "f138";/*アイコンの種類*/
font-weight:900;
position: absolute;
left : 1em;/*左端からのアイコンまでの距離*/
color: skyblue;/*アイコン色*/
}

 

リストのアイコンを変更する場合は、以下も参考にして下さい。

矢印アイコンフォントのコード３２選まとめでサクっとコピー
「Font Awesome」のフリーフォントです。 なんとフリーのものだけで1,500もあるので、よく使う、または使えそうなアイコンフォントのコードをまとめまています。 このページでは「矢印」のアイコンを３２個載せています。 Font Aw...
ayaito.net
2019.02.27

 

画像を使う

プロフィール欄

 

CSS

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

 

CSSは以上です。

 

 プロフィール 内容を設定する

カスタムHTMLウィジェットをサイドバーに追加します。

カスタムHTMLウィジェット

 

 

枠デザイン・名前・自己紹介文のみのHTML

プロフィール欄

 

HTML

<div class="profile_box">
<div class="box-title">プロフィール</div>
<div class="profile_center">
<div class="profile_name">名前</div></div>
<p>自己紹介文</p>
</div>

 

リストを使う場合のHTML

プロフィール欄

 

HTML

<div class="profile_box">
<div class="box-title">プロフィール</div>
<div class="profile_center">
<div class="profile_name">名前</div></div>
<p>自己紹介文</p>
<ul>
<li>性別：</li>
<li>出身地：</li>
<li>趣味：</li>
</ul>
</div>

 

画像を使う場合のHTML

プロフィール欄

 

HTML

<div class="profile_box">
<div class="box-title">プロフィール</div>
<div class="profile_center">
<img alt="" src="https://XXXXXX/XXX.jpg" class="profile_figure">
<div class="profile_name">名前</div></div>
<p>自己紹介文</p>
<ul>
<li>性別：</li>
<li>出身地：</li>
<li>趣味：</li>
</ul>
</div>

 

 

SNSフォローボタン

ついでにフォローボタンを丸くし、ホバーアクションを設定する方法を以下にまとめています。

ルクセリタスのフォローボタンデザインとアクションをカスタマイズ
ルクセリタスの独自ウィジェット「#7 SNSフォローボタン」のボタンデザインとホバーアクションを変更する方法です。 デフォルト 手順 簡単なCSSのみなので、スタイルシートに追記するだけです。 前提 ルクセリタスの独自ウィジェット「#7 S...
ayaito.net
2020.04.12

 

ウィジェットをそのまま配置する場合

プロフィール欄

SNSフォローボタンについては、ルクセリタスの独自ウィジェット「#7 SNSフォローボタン」をプロフィール用カスタムHTMLウィジェットの下に置けば、上図のように表示されるので、プロフィール枠内に入れなくても良い場合は、ここまでになります。

 

プロフィール枠内に入れる場合

プロフィール欄

 

SNSフォローボタンウィジェットを一旦表示

ルクセリタスの独自ウィジェット「#7 SNSフォローボタン」を一旦設定。

#7 SNSフォローボタン

必要なボタンのSNS　URLをセットし保存します。

#7 SNSフォローボタン

 

保存したらサイトに表示されるので、その部分のコードをそのまま利用します。

 

ソースコードをコピーする

SNSボタン部分のソースコードCromeの検証から拾うと速いので、その方法で説明します。

表示されたフォローボタンの上にカーソルを載せて右クリック
「検証」を押しデベロッパーツールを開きます

Cromeからソースコード

 

下図のようにソースコードが表示されます。

Cromeからソースコード

 

例ではツイッターボタンの上で「検証」を押したので、ボタン部分の行が反転していますので、そこからもう少し上を辿っていくと、フォローボタンエリア全体が選択される位置があるので探します。（５～６行上）

その時サイト表示画面では以下のように全体が選択されています。

Cromeからソースコード

ちなみに、以下のコードの行からです。

（id=”thk_follow_button-2″　の数字の部分は変化します）

<div id="thk_follow_button-2" class="widget thk_follow_button">

 

 

そこで右クリックから「Copy」→「Copy element」を選択します

Cromeからソースコード

 

カスタムHTML内に貼り付ける

コピーしたコードをプロフィール用カスタムHTML内の

最後の</div>の前（profile_boxのDIVを閉じる前）に貼り付けます。
<div class="profile_box">
<div class="box-title">プロフィール</div>
<div class="profile_center">
<img alt="" src="https://XXXXXX/XXX.jpg" class="profile_figure">
<div class="profile_name">名前</div></div>
<p>自己紹介文</p>
<ul>
<li>性別：</li>
<li>出身地：</li>
<li>趣味：</li>
</ul>

ここにコピー

</div>

 

実際のサンプル

<div class="profile_box">
<div class="box-title">プロフィール</div>
<div class="profile_center">
<img alt="" src="https://XXXXXX/XXX.jpg" class="profile_figure">
<div class="profile_name">名前</div></div>
<p>自己紹介文</p>
<ul>
<li>性別：</li>
<li>出身地：</li>
<li>趣味：</li>
</ul>
<div id="thk_follow_button-2" class="widget thk_follow_button">
<div id="thk-follow" itemscope="" itemtype="https://schema.org/Person">
<link itemprop="url" href="サイト名">
<meta itemprop="name" content="https://twitter.com/XXXXX">
<ul>
<li><span class="snsf twitter">～略～</span></li>
<li><span class="snsf facebook">～略～</span></li>
<li><span class="snsf instagram">～略～</span></li>
<li><span class="snsf youtube">～略～</span></li>
</ul>
<div class="clearfix"></div></div></div>
</div>

 

一時的に表示した「フォローボタンウィジェット」を削除するのをお忘れなく！

以上です。

コメント

タイトルとURLをコピーしました