JIN

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

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

メンくん
いや~簡単に内部リンクを作れてすごいなぁ
くま
JINの使いやすいポイントだよね

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

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

BEFORE

AFTER

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

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

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらを読んでくださいね。
くま
カスタマイズは仮に同じテーマであっても、100%成功する補償はありません。

[toc]

カスタマイズの準備

カスタマイズコードを書く場所は主に2つあります。
  • 追加CSS(初心者向け)オススメ
  • 外観>テーマエディタ>style.css(慣れた人向け)
はじめての方は追加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を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。

ここにボックスタイトルを入力

 

関連記事