ブログ

【JINカスタマイズ】自分のプロフィールにリンクを貼り付ける方法

この記事で紹介

  1. JINテーマ【プロフィール】にリンクを貼り付けるためのコード
  2. リンクの色を変更するコード
  3. コードの貼り付け方

 

この記事では、Wordpressのテーマ、【JIN】を利用しているあなたのために、

ウィジェットの『プロフィール』への、

リンクを貼るためのコードとその方法をご説明しています。

 

これを利用すれば、私のプロフィールのように、

詳しいプロフィールが書かれたページをリンクさせることができたり、DM先を載せたり、

カスタマイズの幅も大きく広がること間違いなし!

色を変更できるコードもお教えしますので、ご自身のサイトの色に合わせてカスタマイズしてみてくださいね。

りなきむ
りなきむ
これだけでも、あなたのプロフィールを見てくれる読者さんの数も変わるはず♪

 

ココからは、既に『プロフィール』設定が一通り済んでいることを前提にお話ししていきます。

まだプロフィール設定が終わっていない方は、JINのマニュアルを参考に設定してみてください。

 

またこの記事は、すぷやんさん(@life_buffet)に教えていただいた方法を参考に、

色を付けるコードを自分で付け加えたコードについてのご紹介です。

このプロフィールのリンクコード

では早速ですが、まずはリンクコードからご紹介します。

このコードをご自身用にアレンジし、プロフィール欄に貼り付けるだけで、簡単にリンクを貼り付けることが出来ます。

 

これが、私が実際に使用しているコードです。

 

<a href=”https://rinakimu.com/profile/”><span style=”color: #00a4af;”>詳しいプロフィール</span></a>

オレンジの部分が『リンクを貼るコード』

青い部分が、『リンク文字の色を変えるコード』になっています。

 

これの、URL部分、リンクの文字の部分、さらに色を好きなものに変えればカスタマイズ完了!

 

…なんですけど、いきなりそんなこと言われても、全然わからないですよね。

りなきむ
りなきむ
私も最初は、全然わからなかったし…

 

なので、誰でもオリジナルのカスタマイズが出来るように、

これから上のコードを分解して、少し詳しく説明していきます。

 

リンクを作るためのコード

最初に、リンクを作るためのコードをご紹介します。

これは、先ほど『オレンジ』で示した部分のことです。

 

<a href=”リンクさせたいページのURL”></a>

 

このコードの、=(イコール)以降に、あなたのリンク先のURLをコピペするだけで、

リンクコードは完成します。

 

私のコードの例をとると、

<a href=”https://rinakimu.com/profile/(私のプロフィールページのURL)”></a>

ということ。

りなきむ
りなきむ
ここまでは簡単かな?

 

出来たコードは、あとで『色コード』と合体させるときのために、メモ帳などに貼り付けておくといいでしょう。

 

文字色を変更するためのコード

続いて、色を変更するためのコードを見ていきましょう。

今度は、最初にお見せしたコードから、『青い部分』だけを抜き出してみます。

 

<span style=”color: 色コード;”></span>

 

こちらが、画面に表示させるリンク文字の色を変更させるコードです。

ここの、『色コード』とある部分に、#から始まる色コードをコピペします。

#を忘れないようにだけ、注意してくださいね。

 

私のコードは、この通り。

<span style=”color: #00a4af;”></span>

 

色のコードを参考にできる、原色大辞典というサイトもありますので、色のチョイスに迷った方はぜひ参考にしてください。

サイトに合わせた色にすると、より整ったデザインにできますよ。^^

 

リンク、色、2つのコードを合体させる

さて、上記で解説してきた『リンクを作るコード』、『文字色を変更するコード』の2つですが、

今度はこれら2つを合体させ、1つのコードにしていきましょう。

 

2つのコードを合体させるには、

リンクコードで、色コードを挟み込むように、組み合わせる必要があります。

 

\リンクの合体方法/

<a href=”リンクさせたいページのURL”>!!!</a>

このコードの、!!!のある場所に、色コードをコピペしていきましょう。

↓↓

<a href=”リンクさせたいページのURL”><span style=”color: 色コード;”></span></a>

これで、リンクコードで色コードを挟み込む感じになりましたね。

さらに、このコードにリンク文字を入力するには、色コードの間〇〇〇の部分に好きな言葉を入れればOKです。

↓↓

<a href=”リンクさせたいページのURL”><span style=”color: 色コード;”>〇〇〇</span></a>

これで、リンクコードの完成!

 

今学んだ知識を踏まえて、一番最初にお見せした私のリンクコードをお見せします。

仕組みがきっと、わかると思いますよ。^^

 

<a href=”https://rinakimu.com/profile/”><span style=”color: #00a4af;”>詳しいプロフィール</span></a>

リンク文字が、青いコードで指定した色に変更され、

それがオレンジのコードでリンク化される…

 

いかがですか?

一番最初に見た時よりも、コードの意味が分かってきたんじゃないでしょうか。

つたない説明でしたが、少しでもあなたの参考になると幸いです。

りなきむ
りなきむ
つぎの章では、今学んだコードの貼りつけ方法を説明するよ!

 

プロフィールに、先ほどのコードを貼り付ける

コードがやっと出来上がったところで、さっそく、自分のプロフィールをカスタマイズしていきましょう!

 

ダッシュボードの『外観』から『ウィジェット』を選択

まずは、ダッシュボードの外観、そしてウィジェットを開きます。

 

サイドバー【PC】の『プロフィール』を選択

続いて、サイドバーにある『プロフィール』を選択。

 

『説明』欄に、テキストを張り付ける

『説明』欄に、先ほど作ったコードを張り付けて…

 

最後に、『完了』もしくは『保存』をクリックし完了!

最後に、『プロフィール』一番下の、

完了、もしくは保存をクリックして完成です!

 

『プロフィールにリンク』が完成!

さっそく、サイトのトップ画面を見てみます。

 

【PC版】

PC版は、こんな感じ。

 

【スマホ版(アイフォン6S)】

スマホでは、こんな風になります。

これで、読者さんに詳しいプロフィールを覗いてもらうにも、アクセスしてもらいやすいようになりましたね。^^

 

補足:プロフィール欄に改行を入れるには <br>

ちなみに、今のところ、JINのプロフィール・ウィジェットには、

『改行』を勝手に入れてくれる方法はありません。

りなきむ
りなきむ
私が知らないだけだったらすみません…汗

 

普通はenterで改行を入れてくれるけど、ウィジェットのプロフィール欄には、自分でコードを打ち込む必要があります。

そのコードはこれ。

<br>

これを『改行したいところ』にコピペすれば、私のプロフィール欄のように、改行を入れることも可能になります

 

私の場合はこんな感じで入力されています。

<br><br><a href=”https://rinakimu.com/profile/”><span style=”color: #00a4af;”>詳しいプロフィール</span></a><br><br>

 

空欄の行も入れたかったので、<br>を2つ続けて配置。

1つの<br>で1つ改行、2つあれば、2つ改行してくれますよ。

 

JINカスタマイズ まとめ

今回は、JINプロフィールにリンクを貼り付ける方法をご紹介しましたが、いかがでしょうか。

その方法は、いたって簡単!

  1. コードを作る
  2. プロフィールにコピペ

たったこれだけ♪

 

私のような初心者でもできたカスタマイズ方法ですので、ぜひやってみてください。

詳しいプロフィールページなどをリンクしておいて、サイトに来てくれた読者さんに

どんどんあなた自身をアピールをしちゃいましょう!笑

あわせて読みたい
【ココナラ】アイコンイラストでPV倍増!?アイコンの効果を考察してみた実は、アイコンを変えただけでプロフィール欄まで見てくれる人の数が激増したんです。 まだ弱小ブログですが、それでも、その数が約3倍になり...
あわせて読みたい
ワードプレス記事下の関連記事が消えない!【消し方&エラー対処法】ワードプレス記事下の関連記事の編集方法と、エラーが出てしまった時の対処法です。不必要なものを消し、読者の利便性、サイトの快適性を上げましょう。...

【りなきむ】

ABOUT ME
りなきむ
りなきむ
ワーホリ→そのままシドニー永住となった元旅人。現在は、おうちでノートPCを片手に主婦をしながら、『シドニー すみっこ暮らし』でシドニーの生活情報を発信しています。ときどき、ギリシャ人オットとのあれこれも。 詳しいプロフィールはこちらから。 質問、お仕事の依頼はお問い合わせからお願いいたします。