WordPressで記事内の画像にだけ枠線を自動でつける方法(30秒で完了)

以前書きました、「画像に枠線を追加する方法」は、画像を編集して画像そのものに枠線を追加する方法でした。

無料で画像に枠線を追加する一番簡単な方法。Mac、Windows両方OK!

2018.08.23

簡単に画像加工はできるのですが、記事内の画像全部とか加工数が多くなっていくととてもめんどくさいです。

 

そこで今回は、

1回設定するだけで自動で記事内の画像だけに枠線を追加する方法

を紹介します。

 

田舎アフィリ
作業自体は30秒くらいで終わるので超簡単です。

 

 

【注意点】

  • 今回の方法は画像が直接編集されることはなく、見た目だけ変化します。
  • CSS」という機能を使って自動で追加します。
  • この設定をすると、いままで作成されたすべての記事内の画像に枠線が付きます
  • 今回設定した内容を消せばすぐにもとに戻りますので、安心してください。
  • 記事内の画像とは、正確に言うと、WordPressの記事作成画面の「メディアを追加」で挿入した画像のことです。

 

 

CSS(シーエスエス)
正式名称:Cascading Style Sheets(カスケーディング・スタイル・シート)

すべてのWebサイトで使われていますが、表に出ることはない、サイトの裏側のコードの一つです。

プログラムとかその類のものなので、苦手意識が強い人も多いと思います。デザイン専用のプログラムだと思っていただければ大丈夫です。

後半で今回のCSSの意味を解説しているので見ていただくと、わかりやすいと思います。

 

2ステップ30秒で設定完了する超簡単な方法です。

CSSのことがわからなくても大丈夫。この通り作業するだけで設定完了します。

田舎アフィリ
多くの方が使っていると思われるWordPressプラグインの「Jetpack」がインストールされている前提で「2ステップ30秒」になります。

もしインストールしていない場合は事前準備から始めてください。

 

事前準備:「Jetpack」のインストールと有効化

CSSを簡単に編集できるようになるプラグインの「Jetpack」をインストールして有効化してください。

↑↑画像で解説するとこのようになります。インストール後に自分のサイトの管理画面へのログインアカウントとは別に「WordPress.comのアカウント」で承認することで設定完了になります。

 

Jetpackのインストールから設定まで動画にしたのでわからないときは御覧ください。↓↓↓

 

 

 

自動で枠線を追加する方法を動画で解説

コピペするCSSコード

img.alignnone{
border:solid 1px #ccc
}

 

 

①WordPress管理画面の「外観」→「CSS編集」を開く

プラグイン「Jetpack」の設定が完了していないと、「CSS編集」が表示されません。

 

 

②以下のCSSコードをコピペするして公開する

↓↓↓CSSコードはこれです。

img.alignnone{
border:solid 1px #ccc
}

↓↓↓ 「CSS編集」をクリックするとこちらが開くのでCSSコードをコピペして、公開ボタンをクリック。

 

 

CSSコードの意味を知って、カスタマイズしてみましょう

より深く理解したい方のために、今回コピペした「CSSコード」の意味を動画で解説します。

CSSの意味がわかれば枠線の色や太さも自由にカスタマイズできるのでやってみてください〜

動画解説

 

 

画像解説

動画のほうがわかりやすいと思いますが、画像でも解説します。

赤で囲った部分でデザインの対象を指定します。今回は、「alignnone」という識別コードが入った「img」=画像にデザインを施しなさい。という命令式です。

※識別コードのことを、本当はクラス(class)と言います。WordPressの記事作成時に「メディアを追加」から画像を挿入すると思いますが、そのときに自動で「alignnone」というclassが追加されます。

{ }で囲われている青線の部分がデザインの内容です。

 

 

デザインの内容についてですが、「:」の前がデザインの種類で、「:」の後が指定したデザインの細かい設定です。

  • 青線:枠線を引きなさい
  • 赤線:枠線は1本線を引きなさい
  • 橙線:枠線の太さは1px(ピクセル)にしなさい
  • 緑線:枠線の色は#CCCにしなさい

このようになっているので、カスタマイズしたいときはそれぞれを変更してください。

例えば、枠線の色を変えたいときは、「#CCC」を変更します。「#999」はこれくらい濃い色です。

※今回は3文字のカラーコードですが、6文字のカラーコードもあるので6文字で書いても大丈夫です。

 

変更に便利なコード集を関連リンクで紹介しますのでご活用ください。

↓↓↓↓

CSSカスタマイズの関連リンク
枠線のCSSコード一覧:クイックリファレンス
色コード検索:カラーコード

 

まとめ

今回はWordPress専用のCSSコードで、記事内の画像だけに枠線を追加する方法でした。

作業自体はとても簡単で、CSSの入門にはわかりやすいと思います。CSSの考え方がわかればそんなに難しくないので拒否反応せずやってみてください!

田舎アフィリ
解説動画も随時公開していくのでよろしければYouTubeチャンネル登録もお願いしますm(_ _)m

にほんブログ村 小遣いブログ アフィリエイトへ アフィリエイトランキング

2 件のコメント

  • はじめまして。
    ランキングからきました。
    分かりやすい説明ありがとうございました!
    拒否反応せず、試してみたいと思いました!

  • Manohiroと申します。
    ブログランキングから訪問させて頂きました。

    >記事内の画像だけに枠線を追加

    勉強になりました。

    チャレンジします。

    また、訪問します。

    ポチしました。

  • コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください