【JIN】画像加工で「枠線」だけをつけるカスタマイズを追加してみた！

どうもこんにちは、りゅう（@ryuta_blog）です。

今回は画像加工でシンプルに「枠線」だけをつけるカスタマイズを追加してみました。

クマちゃん

影をつけたり、角丸にするショートコードはあったけど、枠線だけっていうのはなかったよね

既存の影だけをつけるやつ

新しく作ったのはこれ

りゅう

背景が白の画像とかに使うと輪郭が出ていい感じになります！今までは影をつけてたのですが、影だと前に浮き出てくる感じがマッチしない場面もあったので…

早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。

JINをカスタマイズする前に！
【JIN】画像加工で「枠線」だけをつけるカスタマイズ
まとめ

JINをカスタマイズする前に！

カスタマイズする前はなるべくバックアップをとっておいてください。
カスタマイズは必ず子テーマから行ってください（親テーマを編集してしまうと、アップデートした際にカスタマイズが全て消えます）。

▼子テーマを導入していない方は、以下からダウンロードしましょう。

>>JIN【子テーマ】のダウンロードページ

▼子テーマって何や？という方はまずは下記を読みましょう。

⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】

WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】WordPressでブログをやっている皆さん！ちゃんと「子テーマ」を利用していますか？「子テーマ？なにそれ？」となった人は、この記事を参考に子テーマについて理解していってください。子テーマを理解しないままテーマをカスタマイズしてしまうと、場合によっては取り返しのつかないことになります。...

【JIN】画像加工で「枠線」だけをつけるカスタマイズ

２種類のカスタマイズ方法がありますので、お好きな方でどうぞ！

既存のショートコードを使う場合
Add Quicktagを使う場合 ←おすすめ

①既存のショートコードを使う場合

画像加工のショートコードの中から1つを「書き換える形」になります。

使わない画像加工があれば、既存のショートコードからさっと呼び出せて、なおかつCSSにコピペするだけなので楽チンです。

お好きなものをstyle.cssにコピペしてお使いください。

影だけをつける→枠線

/*============================
画像に枠線をつける（影→線に変更）
============================*/
.jin-img-shadow img {
border: 1px solid #ccc;
box-shadow: 0px 0px 0px 0px #eee;
padding: 0px;
}

角丸デザイン→枠線

/*============================
画像に枠線をつける（角丸→線に変更）
============================*/
.jin-img-kadomaru img {
border: 1px solid #ccc;
box-shadow: 0px 0px 0px 0px #eee;
border-radius: 0px;
}

枠ありデザイン→枠線

/*============================
画像に枠線をつける（枠あり→線に変更）
============================*/
.jin-img-waku img {
border: 1px solid #ccc;
box-shadow: 0px 0px 0px 0px #eee;
padding: 0px;
border-top: 1px solid #ccc;
}

丸枠デザイン→枠線

/*============================
画像に枠線をつける（丸枠→線に変更）
============================*/
.jin-img-maruwaku img {
border: 1px solid #ccc;
box-shadow: 0px 0px 0px 0px #eee;
padding: 0px;
border-radius:0;
}

Add Quicktagを使う場合 ← おすすめ

Add Quicktagが使える方はこちらのカスタマイズをおすすめします。

①style.cssに以下のコードをコピぺ

/*======================================
画像に枠線をつける Add Quicktag用
======================================*/
.jin-img-wakusen img {
border: 1px solid #ccc;
}