どうもこんにちは、りゅう(@ryuta_blog)です。
今回は画像加工でシンプルに「枠線」だけをつけるカスタマイズを追加してみました。


背景が白の画像とかに使うと輪郭が出ていい感じになります!今までは影をつけてたのですが、影だと前に浮き出てくる感じがマッチしない場面もあったので…
早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。
目次
JINをカスタマイズする前に!
- カスタマイズする前はなるべくバックアップをとっておいてください。
- カスタマイズは必ず子テーマから行ってください(親テーマを編集してしまうと、アップデートした際にカスタマイズが全て消えます)。
▼子テーマを導入していない方は、以下からダウンロードしましょう。
▼子テーマって何や?という方はまずは下記を読みましょう。
⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】

【JIN】画像加工で「枠線」だけをつけるカスタマイズ
2種類のカスタマイズ方法がありますので、お好きな方でどうぞ!
- 既存のショートコードを使う場合
- 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;
}
②Add Quicktagに以下のように追加する

- ボタン名*:画像に枠線をつける
- 開始タグ:<div class=”jin-img-wakusen”>
- 終了タグ:</div>

あとは画像に登録したコードを指定してやればOKです!
カスタマイズがうまく反映されない場合
一度ページのキャッシュを空にしてから、再度ページを更新してみてください。
- safari:「開発」タブから「ページのキャッシュを空にする」をクリック
- InternetExplorer:「ツール」→「インターネットオプション」→全般タブの「閲覧の履歴」セクションで「削除」をクリック
- Chrome:ブラウザ右上のメニューから「設定」「閲覧履歴データの削除」をクリック
まとめ
できればAddQuicktag使いましょう!
その場合は、コピペした部分を削除すれば、元に戻るかと思います。
▼こちらのカスタマイズもおすすめ!




プロがどのようにサイトを育てているのか…
どのように収益化しているのか…
気になりませんか?
そんな方のニーズを満たす新感覚コミュニティ…
その名も「NOZOKIMI」を始動しました!
サイト設計&戦略を全公開
収益&アクセスデータを毎日公開
メディアのYouTube攻略も全公開
自社商品販売までの過程を全公開
どんな質問でも無制限し放題
メンバー同士の交流チャット付き
チーム会議も全公開(Zoom&チャット)
サイトを伸ばす過程を生で体感できる新感覚コミュニティです。
詳しくは下記をチェック!