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

admin

今回は、プロフィール欄にボタンを埋め込む方法です。詳細なプロフィールに飛ばしたいときに便利。ボタン色や中の文字列も変更OK。JINマニュアルでも記載されている方法ですが、考慮ポイントなども補足してご紹介します。

Contents

設定前の準備
プロフィールボタンの設定方法
- HTML
- 追加CSS
設定で得られる効果

設定前の準備

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

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

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

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

HTML

コードの中身

<div class="wp-block-jin-gb-block-box simple-box4">
<pre class="wp-block-code"><code><div id="profile_link">
<a href="【プロフィールページのURL】">プロフィール</a>
</div></code></pre>
<p></p>
</div>

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

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

貼り付け先

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

追加CSS

コードの中身

<div class="wp-block-jin-gb-block-box simple-box4">
<pre class="wp-block-code"><code>/* プロフィールボタン */
#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;
}</code></pre>
<p></p>
</div>