JINは内部リンクのURLをペッと貼り付けるだけで、あわせて読みたいボックスに変換されて便利ですよね。

いや~簡単に内部リンクを作れてすごいなぁ

JINの使いやすいポイントだよね
今回は、このあわせて読みたいボックスのデザインを変更しました。
追加CSS(または子テーマ)にコードをペッと貼り付けるだけでOKなので、めちゃくちゃ簡単にカスタマイズできます( ˶ˆ꒳ˆ˵ )
BEFORE

AFTER

JINのボックスのデザインに合わせてみました。テキストリンクもわかりやすく青にして、下に「つづきを読む」を追加しました。
カスタマイズは自己責任でやろう!

カスタマイズは仮に同じテーマであっても、100%成功する補償はありません。
[toc]
Contents
カスタマイズの準備
カスタマイズコードを書く場所は主に2つあります。- 追加CSS(初心者向け)オススメ
- 外観>テーマエディタ>style.css(慣れた人向け)

どっちでも大丈夫です。ちょっとしたカスタマイズだけなら追加CSSでOKです。
カスタマイズのコード
参考に、これが実際の内部リンクです。

JINカスタマイズ|ページャーのデザインを丸から四角にする
ページャー部分を丸から四角に変更するカスタマイズをしてみました。
やさしい四角とは角が少しだけ丸い四角のことです...
んで、こちらがカスタマイズコードになります。
div.blog-card-hl-box {
background-color: #ffffff!important;
}
.blog-card .jin-ifont-post {
font-size: 1rem;
background: #ff6d6d;
width: 35px;
line-height: 35px;
height: 35px;
display: inline-block;
text-align: center;
border-radius: 50%;
margin-right: 5px;
}
.blog-card {
border-bottom: 22px solid;
}
.blog-card .blog-card-hl:after {
color: #ff6868;
width: 140px;
top: 3px;
left: 0;
font-size: 1rem;
font-weight: 500;
}
.blog-card-title {
color: #3aadf4;
}
.blog-card-excerpt {
opacity: .7;
}
.blog-card:after {
content: "つづきを読む";
position: absolute;
bottom: -22px;
right: 7px;
color: white;
font-size: 14px;
}
@media (max-width: 767px){
.blog-card .jin-ifont-post:before {
line-height: 35px;
}
.blog-card-hl-box {
padding: 5px;
top: -24px;
left: 10px;
width: 180px;
}}
@media (min-width: 768px){
.blog-card-hl-box {
padding: 5px;
top: -23px;
left: 20px;
width: 180px;
}}
こちらをコピーして、追加CSSかstyle.cssに貼り付けてください。
カスタマイズの締め
カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。 これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません。
キャッシュ削除
簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。
ここにボックスタイトルを入力