header
カスタマイズ

【JIN】カスタマイズしたい!プロフィールボタンを埋め込む方法

今回は、プロフィール欄にボタンを埋め込む方法です。詳細なプロフィールに飛ばしたいときに便利。ボタン色や中の文字列も変更可!

JINマニュアルでも記載されている方法ですが、考慮ポイントなども補足してご紹介します。いいなぁと思ったら是非真似してくださいね。

こんな風になります。

設定前の準備

WordPressテーマを初めてカスタマイズする場合は、子テーマをダウンロードして有効化してください。親テーマのバージョンアップ時にカスタマイズした情報が上書きされて消えてしまうことを防ぐためです。

→ 子テーマのダウンロードページ

プロフィールボタンの設定方法

設定するのは2か所です。

HTML

コードの中身

<div id="profile_link">
<a href="【プロフィールページのURL】">プロフィール</a>
</div>

上記のコードをコピーしたら、プロフィールの文字を記入する部分にそのまま貼りつけましょう。【プロフィールページのURL】の部分は、ご自身のブログサイトのURLに書き換えてくださいね。

a href – /a までの部分で挟まれている「プロフィール」の部分は、ボタンの中に表示させる文字列です。「詳細はコチラ」等に変えてもOK。

貼り付け先

貼り付け先はこちら(外観 > ウィジェット > プロフィール)。

追加CSS

コードの中身

/* プロフィールボタン */
#profile_link a{
display:block;
text-align:center;
padding:0.7em 1em;
background:#bbb; /*ボタンカラー変更*/
width:50%;
margin:0 auto;
margin-top:20px;
border-radius:20px;
border:3px double #fff;
font-size: .75rem;
color:#fff;
}
#profile_link a:hover{
opacity:0.75;
color:#fff;
}

貼り付け先

貼り付け先はこちら。(外観 > カスタマイズ > 追加CSS)

設定で得られる効果

プロフィール欄に情報を集約することができます。そして緩急をつけることができます。

例えばブログ運営者のアピールは控え目にしたい場合がありますよね。知りたい人にだけ詳しく伝えたい、という場合。さらっと見せつつ詳しい人にだけクリックするという導線を作ることができます

もしメニューに「プロフィール」と項目を作っている方は、ボタンを採用するときにはメニュー項目にも「プロフィール」が必要かどうかを見直すこともおすすめ。プロフィール情報を一か所に集約した方が全体にまとまりが出ることもありますよ。

ブログ全体のバランスも見ながら設定しましょう。