ブログ

【JINカスタマイズ】プロフィールにボタンを貼りつける方法【簡単】

JIN カスタマイズ

JINのプロフィールにボタンを貼りつけたいと思ったことはありませんか?

▽こういうやつです。

JIN カスタマイズ

先日ようやくプロフィールページを作成したのでプロフィールからリンクさせようとしたのですが、探してもJINのプロフィールにボタンを貼る方法が分らなかったんですよね。

なので、自分で作ってしまいました!

わたしのプロフィールページについては良かったらこちらから見てみてください。

今回はワードプレステーマJINを使っている人に向けて、

コピペでOKの簡単にできるプロフィールページにボタンを貼るカスタマイズ

をご紹介します。

プロフィールにボタンを貼り付けられれば、プロフィールページだけでなく、自分が見せたいページに飛ばすこともできますよ。

JINのカスタマイズをする前に

カスタマイズをする前に注意点があります。以下の2つの点をクリアしていることを確認してください。

  • プロフィール設定の完了
  • バックアップの完了

今回のカスタマイズでは、プロフィール設定が完了していることを前提で進めていきます。JINのプロフィール設定についてはJINの公式HPを見てみてください。

また、今回のカスタマイズではCSSを触ります。必ずバックアップをとってからカスタマイズを行うようにしてください。

また、カスタマイズについてはわたしのページでは確認済みですが、カスタマイズ初心者なので何が起きても自己責任でお願いいたします。

ワードプレスのバックアップについては下記の記事を参考にしてみてください。

ズボラ妻
ズボラ妻
コピペでできるので、初心者でも簡単だよ!

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

とにかく早く、結果を知りたい!という方のために、まとめます。

CSSカスタマイズのページに下記のコード(以下CSSコード)を貼りつけます。

CSSコード

/*プロフィールボタン*/
.square_btn {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #e57f75;
border: solid 2px #e57f75;
border-radius: 3px;
transition: .4s;
}

.square_btn:hover {
background: #e57f75;
color: white;
}

 

JINのプロフィール設定の「説明」に下記のコード(以下プロフィールコード)をコピペしてください。

プロフィールコード

<div align=”center”><a href=”profile” class=”square_btn”>
<i class=”fas fa-chevron-circle-right”></i></i>
詳しく見る
</a></div>

これだけで、プロフィールにボタンを貼りつけることができます。注意が必要なのは、赤字箇所は自分の貼り付けたいページのURLに貼り替えましょう。

https://www.zubora-tsuma.com/profile

URLのうち、後半の赤字部分を入力しましょう!

▽参考にしました!

ちなみにこちらのカスタマイズではURL全てを貼りつけていたのですが、うまくいかなかったので、アレンジして前半部分を削除したらできるようになりました!

JINのプロフィールにボタンをつけるカスタマイズの貼りつけ場所

どこに貼りつけたらいいのかよくわからない!という方のために詳しく説明していきたいと思います。

まず、CSSコードの貼り付け箇所です。

ダッシュボードから「外観」をクリックし、「カスタマイズ」をクリックします。

「カスタマイズ」ボタンをクリックすると出てくる「追加CSS」をクリックし、出てくる四角形の中に先ほどのコードをコピペしてください。

JINカスタマイズ

これでCSSへの貼り付けは完了です。

次は、プロフィールコードの貼り付けです。ダッシュボードの「外観」から「ウィジェット」をクリックします。

JIN カスタマイズ

続いてサイドバー【PC】にある「プロフィール」を選択します。

JIN カスタマイズ

説明の欄に先ほどのプロフィールコードを貼りつけます。

JIN カスタマイズ 最後に「完了」もしくは「保存」をクリックして終了です。

ズボラ妻
ズボラ妻
コピペのみで簡単でしょ?

JINプロフィールにボタンカスタマイズのデザイン変更

JIN カスタマイズ

ボタンの種類を変えたい場合

ボタンの種類を変えたい場合は、サルワカさんの記事を参考にしましょう!

ズボラ妻
ズボラ妻
丸投げすみません…。

下記のページから、好きなボタンを選択してCSSコードはまるっと貼り替えます。

好きなボタンを選んで、CSSコードをコピーして自分のCSSに貼りつけます。

JIN カスタマイズ

引用:CSSで作る!押したくなるボタンデザイン100(Web用)/サルワカ

HTMLコードも同じようにコピーします。

JIN カスタマイズ

引用:CSSで作る!押したくなるボタンデザイン100(Web用)/サルワカ

プロフィールコード

<div align=”center”><a href=”profile” class=”square_btn”>
<i class=”fas fa-chevron-circle-right”></i></i>
詳しく見る
</a></div>

上記プロフィールコードの赤字箇所をコピーしたHTMLコードに貼り換えましょう。

これで好きなボタンに変更が可能です。

ズボラ妻
ズボラ妻
どれも素敵なボタンで迷っちゃうね!

表示させる文字を変えたい場合

ここで紹介しているボタンは「詳しく見る」という文字になっていますが、これを変えたい場合は下記の赤字の箇所を変更してください。

プロフィールコード

<div align=”center”><a href=“profile” class=”square_btn”>
<i class=”fas fa-chevron-circle-right”></i></i>
詳しく見る
</a></div>

ボタンの色を変えたい場合

ボタンの色を変えたい場合はCSSコードの下記の部分を変更します。

★CSSコード

/*プロフィールボタン*/
.square_btn {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #e57f75;
border: solid 2px #e57f75;
border-radius: 3px;
transition: .4s;
}

.square_btn:hover {
background: #e57f75;
color: white;
}

赤字→ボタン枠の色

青字→カーソルを合わせた時のボタンの色

緑字→カーソルを合わせた時の文字の色

となっているので、自分のテーマカラーや好きな色に設定しなおしてください。

▽色はこの中から選ぼう!

ズボラ妻
ズボラ妻
自分好みにカスタマイズできるから嬉しいね!

JINのプロフィールにボタンを設置するカスタマイズまとめ

ブロガーの人ならプロフィールページの作成はおススメです。書いている人がどんな人なのか知りたくなる人って一定数いるからです。

プロフィールページではなくても、おススメ記事などにリンクを飛ばすのもありだと思います。

正直わたしはカスタマイズなど今までほとんどしたことがなかったのですが、JINは沢山の人が使っているので参考になるカスタマイズ記事が沢山ありますね。

参考になれば嬉しいです。

ブロガー必見!数時間でPVが増えたリライトの方法についてまとめています。

ブログのコンサルを無料で受けてみたら、PVアップで効果は抜群でした。無料でブログのコンサルを受けました!コンサルを受けた効果は抜群で、その日からPVがアップしています。わたしが受けた無料のブログコンサル内容を紹介します。これを実践すれば、あなたのブログもPVがアップするかもしれません。...

それでは今回はこの辺で。ズボラ妻(@zubora_tsuma)でした。

ズボラ妻
ズボラ妻
ツイッターではブログ更新情報を発信中!気になる方はズボラ妻(@zubora_tsuma)をフォローしてね♪

これを読んでおけば間違いなし!

 

 

コメントを残す