現在テーマ変更に伴う修正作業中です。一部表示崩れがありご不便をおかけしています。

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

いらっしゃいませ三姉妹育児に奮闘中の主婦、あず(oyakocreate)です。

今回は、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のカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

[kanren id=”458″]

この記事はここまでです。もしお時間があれば、ぜひ他の記事も読んでいってくださいね。

あず(oyakocreate)でした!


広告
>WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

当ブログで使用しているWordPressテーマは「THE THOR(ザ・トール)」です。

THE THOR(ザ・トール)」は機能が豊富で、記事を書く効率が格段にアップ。税込15,984円で何個のサイト・ブログで使用してもOK。

カスタマイズ知識がなくても、設定項目を1つずつ進めていくだけでおしゃれなブログ・サイトが作成できます。

無料・無期限・無制限でのアフターフォローが受けられるので、安心して使用できるイチオシの有料テーマです。

CTR IMG