無料プレゼント中！
- デザインセンスが皆無
- ブログをおしゃれにしたいけど、どうしていいか分からない
- 自分で画像を作りたいけど具体的に何をしたらいいの？
ブログデザインでお悩みのあなた、「ブログデザイン向上サポート」を受けてみませんか？
Webデザイナーとして制作会社に3年勤務していた、当ブログ管理人のアズサがサポートいたします。
無料で3ヶ月間質問し放題。デザイン以外でも、ブログに関するご質問なら全力でお答えしますよ。
現在もサポートしていまして、定員に達したら募集を一旦終了します。お早めにご応募くださいね。
WordPressテーマ「JIN」には、プロフィールウィジェットが用意されてます。
ウィジェットとは、ブログ上に設置したサイドバーやフッターなどのパーツを簡単に編集できる機能のこと。
プロフィールウィジェットは、その名の通り、プロフィールを表示させるウィジェットのことです。
プロフィールウィジェットを使うと、プロフィール画像にプロフィールページへのリンクが自動で設定されるシステムになってます。
しかし、画像にリンクがついてることに気づかない人もいるはず。わたしも3か月間気づかなかったw
「プロフィール」と書かれたボタンがあれば、プロフィールページを読んでもらえる可能性が上がりますよね。
続きを読めば、プロフィールウィジェットに「プロフィールボタン」を設置できるようになります。
プロフィールへのアクセスが増え、あなたのファンになってもらえる可能性が上がりますよ。
カスタマイズ完了後のイメージ
カラーボタンに白い文字という組み合わせ。マウスを合わせるとボタンの色が薄くなる、ベーシックなタイプのボタンを作ります。
実はプロフィールのボタン、JINのデモサイトに設置されてるんです。
学びはマネからなので、勉強させてもらいましょう。コピペ&ちょっと変更だけでできますよ。
準備：子テーマダウンロード＆有効化
WordPressテーマをカスタマイズする場合、子テーマをダウンロードし、有効化しておいてください。
バージョンアップで親テーマを更新すると、カスタマイズした内容が消えてしまいます。
でも、子テーマを有効化しておけば大丈夫。親テーマをバージョンアップしても、子テーマでカスタマイズしてるなら問題ありませんよ。
サイドバープロフィールの記述
以下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;
}「ボタンカラー変更」の「#bbb」の部分（カラーコード）を変更するとボタンの色が変わります。
色は自分のブログに合わせて決めてくださいね。
追加場所
「外観」「カスタマイズ」「追加CSS」
これでボタン設置完了！
今回は以上です。
プロフィールを読んでもらうと親近感を持ってもらえます。
リピート訪問してくれる可能性が上がるので、プロフィールへの導線は増やすといいですよ。
JINカスタマイズ記事は他にも書いてるので、よかったら読んでみてくださいね。
[jin_icon_arrowdouble color="#4b8eaf"]JIN記事一覧
ではでは。
