iPadでイラストを描いてます♡
WPカスタマイズ

SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ

▼ 楽しくブログを運営したいあなたに
▼ 英語に興味のあるあなたへ

こんにちは✨
主婦ブロガーのあず(yuuki_azusa )です。

今回は、WordPressテーマ「SANGO」で使える内部リンクボックスをカスタマイズする方法を、ご紹介します。

この記事を読むと、当ブログで使用している上記の内部リンクボックスのように、ラベルを付けたり色を変えたりできます。

いろんな種類のコードも用意しているので、CSSがまったくわからない方でもコピペだけで実装できますよ。

スポンサーリンク

SANGOの内部リンクボックスをカスタマイズ

SANGOでは[kanren id=”記事ID”]というショートコードを使うことで、内部リンクをボックス(カード?)で呼び出すことができます。

デフォルトではこのように表示されます。

シンプルでSANGOらしいのですが、せっかくなので少しオリジナリティを出してみたいと思います。

コードを書くのは、子テーマのstyle.cssです。

あずさん
あずさん
このカスタマイズ方法はstyle.css以外にコードを書くことはありません。

背景の色を変える

.linkto {
    background: #f5f5f5;
}

SANGOの内部リンクボックスは.linktoというclassで、デザインを変えることができます。

上記コードのようにbackground(背景)にカラーコードで#f5f5f5を指定すると、このような背景をつけることができます。

カラーコードを変えると他の色にすることもできます。

内部リンクボックスの枠を変える

同じく.linktoでデフォルトで付いているボックスの枠をカスタマイズすることもできます。

border:none;を指定することで、枠は消えます。

これはborder: 2px dotted #DB9898;を指定した例です。

記事タイトルの前にラベルを付ける

この画像のように記事のタイトル前にラベルを表示するには、.linkto div:beforeでラベルのデザインを指定します。

この例でラベルをつけるために使っているコードは以下の通りです。

.linkto div:before {
content: 'CHECK';
font-size: 0.7em;
font-weight: bold;
color: #ffffff;
background: #5882FA;
width: 5em;
display: inline-block;
padding: 0.2em;
position: relative;
top: -2px;
text-align: center;
margin-right: 0.5em;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
border-radius: 2px;
}

CHECKの部分を関連記事などに変更するのも、わかりやすくてオススメです。

backgroundでラベルの色を指定して、colorでラベルの文字の色を指定しています。

画像の形を変える

.linkto imgborder-radiusを指定することで画像を丸くすることもできます。

画像のようにまん丸にしたい場合は以下のコードがそのまま使えます。

.linkto img{
    border-radius : 50% ;
}


コピペでできる内部リンクボックスデザイン

各コードの説明をざっくりしてみましたが、「デザイン考えるの面倒!」「よくわかんない!」という方は、コード例をいくつか紹介しますので好きなものをコピペして使ってください。

複数のコードをいっぺんに使うことはできないので、どれか1つ選んでくださいね!

スクリーンショットでデザイン例を表示しているので、実際は環境によって色合いが異なる場合があります。

青色ベースの内部リンクボックス

.linkto img{
border-radius : 50% ;
}
.linkto {
background: #f7fcff;
border: none;
}
.linkto div:before {
content: 'CHECK';
 font-size: 0.7em;
 font-weight: bold;
 color: #fff;
 background: #acb0f9;
 width: 5em;
 display: inline-block;
 padding: 0.2em;
 position: relative;
 top: -2px;
 text-align: center;
 margin-right: 0.5em;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}

ピンクベースの内部リンクボックス

.linkto img{
border-radius : 10% ;
}
.linkto {
background: #ffeff3;
border: none;
}
.linkto div:before {
content: 'CHECK';
 font-size: 0.7em;
 font-weight: bold;
 color: #fff;
 background: #ffafc5;
 width: 5em;
 display: inline-block;
 padding: 0.2em;
 position: relative;
 top: -2px;
 text-align: center;
 margin-right: 0.5em;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}

黄色ベースの内部リンクボックス

.linkto img{
border-radius : 10% ;
}
.linkto {
background: #fcffdd;
border: none;
}
.linkto div:before {
content: 'CHECK';
 font-size: 0.7em;
 font-weight: bold;
 color: #fff;
 background: #ffc6a5;
 width: 5em;
 display: inline-block;
 padding: 0.2em;
 position: relative;
 top: -2px;
 text-align: center;
 margin-right: 0.5em;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}

緑ベースの内部リンクボックス

.linkto img{
box-shadow: none ;
}
.linkto {
background: #d3eac5;
border: none;
}
.linkto div:before {
content: 'CHECK';
 font-size: 0.7em;
 font-weight: bold;
 color: #fff;
 background: #76a04d;
 width: 5em;
 display: inline-block;
 padding: 0.2em;
 position: relative;
 top: -2px;
 text-align: center;
 margin-right: 0.5em;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}

カラフルな内部リンクボックス

.linkto img{
border-radius : 50% ;
}
.linkto {
background: -moz-linear-gradient(#fffcd1, #ffa5a5);
background: -webkit-linear-gradient(#fffcd1, #ffa5a5);
background: linear-gradient(to right, #fffcd1, #ffa5a5);
border: none;
}
.linkto div:before {
content: 'CHECK';
 font-size: 0.7em;
 font-weight: bold;
 color: #fff;
 background: #ff6d6d;
 width: 5em;
 display: inline-block;
 padding: 0.2em;
 position: relative;
 top: -2px;
 text-align: center;
 margin-right: 0.5em;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}

モノクロ内部リンクボックス

.linkto img{
        box-shadow: none ;
}
.linkto {
    background: #e5e5e5;
    border: none;
}
.linkto div:before {
    content: '関連記事';
 font-size: 0.7em;
 font-weight: bold;
 color: #fff;
 background: #555;
 width: 5em;
 display: inline-block;
 padding: 0.2em;
 position: relative;
 top: -2px;
 text-align: center;
 margin-right: 0.5em;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}


カスタマイズしてSANGOをさらに可愛がろう

内部リンクボックスは、読者さんにブログ内を回遊してもらうための大事な要素の1つです。

ぜひ、デザインを変えてオリジナリティを出して、思わず押したくなる内部リンクを用意してくださいね。

余談ですが、SANGOのカスタマイズが凄く楽しいです。

当ブログ(あずさんち)のトップページはすでにSANGOの原型がなくなりつつあります(笑)

現在はSANGOを使用していません。

今までに書いたSANGOのカスタマイズ方法は「コピペで簡単にできるSANGOのカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

あわせて読みたい
コピペで簡単にできるSANGOのカスタマイズ方法まとめ WPテーマをSANGOに変えたのをきっかけに、カスタマイズにめちゃくちゃ力を入れています。 SANGOを使っている人のお役に立...

あず(yuuki_azusa ) でした
おしまーい。

有料テーマを1つだけ買うなら

20万円以上を有料テーマ購入に使った私が、「1つだけ」有料テーマを購入したいあなたにおすすめ!

Diver」なら、WordPress初心者でもブログもアフィリエイトサイトも思いのままに作れます。

詳細ページ公式ページ

ABOUT ME
あずさん
あずさん
7歳・2歳・1歳の娘がいる主婦ブロガーです。「あずさんち」では自分の経験を元に、今後同じ悩みを持った主婦やママの助けになるようなブログを書いていきます。在宅ワークという働き方の選択肢を広めたい!

COMMENT

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