HTML&CSS

【JINカスタマイズ】プロフィールにボタンをつける

【JINカスタマイズ】プロフィールにボタンをつける

こんにちは!Webデザイナーのアズサ(@azusascom)です。

Webデザイナーっぽいこと書くぞ!

ということで、当ブログのWordPressテーマ「JIN」のカスタマイズ記事です。

今回は、サイドバーにあるプロフィールのボタンを設置します。

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

プロフィールボタンの見本

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

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

JINデモサイトのプロフィールボタン

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

準備:子テーマダウンロード&有効化

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

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

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

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

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

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

HTML

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

追加場所

「外観」「ウィジェット」「プロフィール」

サイドバープロフィールのHTML追加場所

説明文のいちばんうしろにペーストしてくださいね。

【プロフィールページのURLを入力 】という文字を削除し、自分のプロフィールページのURLを入力します。

追加CSSの記述

続いてCSSもコピペ。

CSS

/***プロフィールボタン***/
.profile_link a{
display:block;
text-align:center;
padding:8px 10px;
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」

CSSを追加する場所

CSS枠内をコピペしてくださいね。

「ボタンカラー変更」の「#bbb」の部分(カラーコード)を変更するとボタンの色が変わります。

色は自分のブログに合わせて決めてくださいね。

これでボタン設置完了!

今回は以上です。

プロフィールを読んでもらうと親近感を持ってもらえます。リピート訪問してくれる可能性が上がるので、プロフィールへの導線は工夫するといいですよ。

今後ボタンのデザインパターンを増やす・・・・かも。

ではでは。

ABOUT ME
アズサ
アズサ
逃げまくりフリーターからWebデザイナーになり、3年間Web制作会社に勤務。 現在はブログ運営とハンドメイド販売をしてます。 ブログ開設のお手伝いや、おしゃれなブログにする方法のご提供など、無料で全力サポートします。

当ブログでは、無料でWebデザインのお悩み相談を受け付けてます。

  • Webデザイン関連:画像作成・配色など
  • WordPress関連:テーマ・プラグイン・操作方法など
  • HTML・CSS関連
  • ブログを始める方法

どんな些細なことでも構いませんので、お気軽にご連絡くださいね。

お悩み受付ページはこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です