ブログデザイン

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

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

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

クマちゃん
クマちゃん
影をつけたり、角丸にするショートコードはあったけど、枠線だけっていうのはなかったよね
既存の影だけをつけるやつ
新しく作ったのはこれ
りゅう
りゅう

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

 

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

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

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

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

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

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

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

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

 

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

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

  1. 既存のショートコードを使う場合
  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です!

>> AddQuicktagのインストール方法&使い方

カスタマイズがうまく反映されない場合

一度ページのキャッシュを空にしてから、再度ページを更新してみてください。

キャッシュを空にする方法
  • safari:「開発」タブから「ページのキャッシュを空にする」をクリック
  • InternetExplorer:「ツール」→「インターネットオプション」→全般タブの「閲覧の履歴」セクションで「削除」をクリック
  • Chrome:ブラウザ右上のメニューから「設定」「閲覧履歴データの削除」をクリック

 

まとめ

できればAddQuicktag使いましょう!

りゅう
りゅう
あくまで個人的なカスタマイズなのと、独学の素人ですので、不具合が出ましたら申し訳ありません

その場合は、コピペした部分を削除すれば、元に戻るかと思います。

 

▼こちらのカスタマイズもおすすめ!

【JINカスタマイズ】ボックススタイルの横幅を広げる方法【簡単】今回は、WordPressテーマ「JIN」に備わっているボックススタイルの、横幅を広げるカスタマイズを紹介します。非常に簡単な内容になっておりますので、ぜひお試しあれ! ...
【JIN カスタマイズ】見出し3「タイプ3」をカスタマイズしてみた!今回はWordPressテーマ「JIN」のカスタマイズで、見出し3「タイプ3」を僕好みにいじってみました。角丸をとって線を細く長くしてみました。 かっちりした印象が好きな方はぜひどうぞ!...
【JIN カスタマイズ】リストスタイルを左寄せ&マークを大きくしてみた今回はWordPressテーマJINより、リストスタイルを簡単にカスタマイズしてみます!デフォルトがかるく右寄せだったので、左に寄せてみました。 あとマークも大きくして、よりハッキリした印象にしてみたよ!...
ABOUT ME
アバター
りゅう
2つのサイトを運営するブロガー。 「好きなことでお金は稼げる」ことを証明するために、日々奮闘中! 新卒で入社したIT企業を半年で退職し、「あ、俺組織向いてないわ」と完全に開き直り、今後の人生で自分が楽しいと思える事しかしないと心に誓う。
新感覚コミュニティ「NOZOKIMI」を立ち上げました!

プロがどのようにサイトを育てているのか…
どのように収益化しているのか…

気になりませんか?

そんな方のニーズを満たす新感覚コミュニティ…
その名も「NOZOKIMI」を始動しました!

サイト設計&戦略を全公開
収益&アクセスデータを毎日公開
メディアのYouTube攻略も全公開
自社商品販売までの過程を全公開
どんな質問でも無制限し放題
メンバー同士の交流チャット付き
チーム会議も全公開(Zoom&チャット)

サイトを伸ばす過程を生で体感できる新感覚コミュニティです。

詳しくは下記をチェック!

NOZOKIMI詳細はこちら