【JIN】プロフィールにボタンをつける｜おいでよ！ブログはじめてさん

JINユーザーのあなた、プロフィールウィジェットを使ってますか？

ウィジェットとは、ブログ上に設置したサイドバーやフッターなどのパーツを簡単に編集できる機能のこと。

プロフィールウィジェットは、その名の通り、プロフィールを表示させるウィジェットのことです。

プロフィールウィジェットを使うと、プロフィール画像にプロフィールページへのリンクが自動で設定されるシステムになってます。

しかし、画像にリンクがついてることに気づかない人もいるはず。わたしも3か月間気づかなかったw

「プロフィール」と書かれたボタンがあれば、プロフィールページを読んでもらえる可能性が上がりますよね。

そこで今回は、プロフィールウィジェットに「プロフィールボタン」を設置する手順をご紹介します。

カスタマイズ完了後のイメージ
準備：子テーマダウンロード＆有効化
サイドバープロフィールの記述
- HTML
- 追加場所
追加CSSの記述
- CSS
- 追加場所

カスタマイズ完了後のイメージ

カラーボタンに白い文字という組み合わせ。マウスを合わせるとボタンの色が薄くなる、ベーシックなタイプのボタンを作ります。

実はプロフィールのボタン、JINのデモサイトに設置されてるんです。

学びはマネからなので、勉強させてもらいましょう。コピペ&ちょっと変更だけでできますよ。

準備：子テーマダウンロード＆有効化

WordPressテーマをカスタマイズする場合、子テーマをダウンロードし、有効化しておいてください。

バージョンアップで親テーマを更新すると、カスタマイズした内容が消えてしまいます。

でも、子テーマを有効化しておけば大丈夫。親テーマをバージョンアップしても、子テーマでカスタマイズしてるなら問題ありませんよ。

【JIN】子テーマダウンロード

サイドバープロフィールの記述

以下3行をコピペしてくださいね。

HTML

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

追加場所

「外観」「ウィジェット」「サイドバー」「プロフィール」

説明文のいちばんうしろにペーストし、【プロフィールページのURLを入力】という文字を削除したら、自分のプロフィールページのURLを入力します。

追加CSSの記述

続いてCSSもコピペ。

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;
}