JINカスタマイズ｜内部リンクのデザインを変更

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

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

JINの使いやすいポイントだよね

今回は、このあわせて読みたいボックスのデザインを変更しました。

追加CSS（または子テーマ）にコードをペッと貼り付けるだけでOKなので、めちゃくちゃ簡単にカスタマイズできます( ˶ˆ꒳ˆ˵ )

BEFORE

AFTER

JINのボックスのデザインに合わせてみました。テキストリンクもわかりやすく青にして、下に「つづきを読む」を追加しました。

カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらを読んでくださいね。

for men

カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズは仮に同じテーマであっても、100％成功する補償はありません。

[toc]

Contents

カスタマイズの準備
カスタマイズのコード
カスタマイズの締め

カスタマイズの準備

カスタマイズコードを書く場所は主に2つあります。

追加CSS（初心者向け）オススメ
外観＞テーマエディタ＞style.css（慣れた人向け）

はじめての方は追加CSSがおすすめです。使い方はこちらを参考にしてください。

for men

ブログのカスタマイズを加速させる「追加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;
 }}