コピペOK【画像加工】画像を囲み枠で装飾♪画像編集ソフトはいらない?

画像を枠で囲みたいな。
という時、画像編集ソフトを立ち上げ加工して、画像をアップロードしてという作業をしていると思います。
でも、実はちょっとした画像加工なら、画像編集ソフトは必要ありません(;^_^A

そら
他の記事で、文章でも囲み枠を紹介しましたが、ここでは画像の装飾を初心者むけに紹介します♪

初心者向けという事で囲み枠付きの画像で、囲み枠を選んでコピペ文をコピペするだけで囲み枠が簡単設置できるように紹介しています

ここではクラシックエディタを使用した簡単な画像の装飾方法を紹介しています。
ブロックエディタで使用する場合は、ブロックの「クラシック」スタイルを選択して使用してください。

この記事ではCSSを使用します。
CSS難しそうで無理!
とひかないでください。

そら
THE THOR(ザ・トール)を使っている方には場所を指定しますので、基本コピペでOKです♪

他のテーマを使っている方は、ごめんなさい。
CSSを書き込めるエリアを探してください<(_ _)>

ご自分で記述を変えるなら、色のコードと線の種類でしょうか。
それもコピペでいけるのでOKです♪

画像を囲み枠で装飾の確認1wordpressコピペする場所

「外観」 → 「カスタマイズ」をクリックして下さい。

画像囲み枠のCSSを登録する

下にスクロールをして「追加CSS」をクリックしてください。

「追加CSS」を記入する画面が表示されます。

そら
行間を広げる作業をしている方の場合は、ここに行間指定のCSSが記入されているかと思います。

枠線を選択したら、書き終えてあるCSS文の後ろにコピペして付け足していきます。

まだ枠を選択していませんので、今は場所の確認だけです。
この場所の事をとしておきます。

画像囲み枠のCSSを登録

コピペしたら、右上にある「公開」ボタンをクリックしてください。

画像を囲み枠で装飾の確認2 wordpress画像の設定の説明 


wordpressページに囲み枠で装飾したい画像を追加する

「メディアを追加」をクリックして、投稿に挿入をクリックして画像をエディタに表示させてください。

wordpress囲み枠で装飾したい画像の詳細設定

エディタに表示された画像をクリックしてください。
この吹き出しが出てきたと思います。

赤丸で囲った鉛筆マークをクリックしてください。
画像詳細画面が表示されます。

wordpress【囲み枠で装飾したい画像の表示サイズの選択

画像のサイズを変更したい場合は、真ん中あたりにある「設定を表示」のフルサイズの横の▼をクリックしてください。

サイズが5パターン表示されますので、カスタムをクリックしてください。

wordpress囲み枠で装飾したい画像を小さく表示させる設定

もともとの画像サイズは変更しないで、画像を小さく表示させたい時に使用します。
横幅(px)と高さ(px)が表示されます。
幅か高さのどちらかに表示された、数字より小さい数字を記入してください。
比率をたもってくれますので、どちらかに希望の数字を入れればOKです。

大きな画像を別ページで表示

小さく表示させた画像を、クリックすると別ページで大きく表示させるとき使います。
リンク先 「なし」 の横の 「▼」 をクリックし、「メディアファイル」を選択してクリックしてください。

画像を囲み枠で装飾の確認3 wordpressCSSの名前をコピペする場所

上級者向けの設定 にある 「画像 CSS クラス」の横の空欄にCSSの名前をコピペします。

そら
まだ枠線をどれにするか決めてないので、この場所に記入だとだけ覚えていてください。


この場所の名称をとしておきます♪

コピペしたら、「更新」をクリックしてください。

画像をどの囲み枠で装飾するか選択♪

画像の囲み枠をみて、気に入った画像加工があれば、その画像の下のCSS文をⓈコピペしてしてください。
画像の上のCSS名をⒷにコピペしてください。

そら
そのまま使用してもいいのですが、コピペ文をコピペしてから囲み枠の色、囲み枠の線種、囲み枠の線の幅をお好みに変更して使用してもOK♪

この枠線の種類の見本は文章の囲み枠の方にありますので確認してみてください。

≫コピペOK★WordPress【文章加工】文章を囲み枠で装飾♪基本編

ピンクの枠線で囲む

CSSコード

CSSのコードの説明

pinkwaku{border:5px pink solid;}

  • pinkwaku : これがCSSの名前になります。
  • 5px:線の太さ(border
  • pink :線の色(border
  • solid:線の種類(border

border」の後ろが「」で文の最後が「;」になります。
間違えてを消してしまった場合は「;」と「」を間違わないように気をつけてください。
そして必ず半角で記入してください。

線の色は下の記事で、好きな色のコードをコピペしてきてください。

【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

線は8種類から選ぶ

  • solid:実線
  • double:二重線
  • dotted:丸い点線
  • dashed:棒状の点線
  • ridge/groove:立体的な線
  • inset/outset: 上&左側と下右側の色が濃淡で違う線

画像と枠線との隙間を開けたい時はコードを追加

CSSのコード

画像と枠線の隙間の大きさを指定します。

padding : 数字px か 数字%;

背景色を付けたいならコードを追加

CSSのコード

囲った枠の中に色を付けたいなら「背景色」の指定をします。

background:色コード;

色のコードは下の記事で紹介していますので、好きな色のコードをコピペしてきてください。

【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

囲み枠の四つ角を丸くしたいならさらにコードを追加

囲み枠の四つ角を丸くしたい時に使用します。

border-radius: 数字px か 数字%;

画像を額に入れているように囲む

使用しているコード

グラデーションにしたい時に使用する「linear-gradient

背景をグラデーションにしたい時に使用します。
色のコードを二種類セットして使用します。

コピペOK【画像加工】画像を囲み枠で装飾♪画像編集ソフトはいらない? まとめ

この記事では、クラシックエディタを使用しての画像の装飾方法を紹介しました。
この記事をリライトする前は、見本の囲み枠を何個も用意していたのですが、コードの紹介が重複しているなぁと思い今回、見本を省略しました( ̄▽ ̄;)

最後まで読んでくれてありがとうございました。
一言でもコメントをいただけると嬉しいです(^^♪

ランキングに参加していますのでクリックお願い致します♪

 ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪

私が無料で登録している2つのアフェリエイトの会社です。

どちらもメリットがあるので、アフェリエイトに興味があるなら登録をお勧めします。

そら
私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。

物販のアフェリエイトに興味がある方は、アソシエイトに応募と同時に(保険として)もしもからも申請することをお勧めします♪

物販ならアソシエイトに応募と同時に(保険として)もしもからも申請することをお勧めします♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。

そら
ここは取り扱っている商品が沢山あります!無料の初心者用のアフィリエイトブログ作成の無料セミナーがあるので、ここに登録してセミナーに参加することをオススメします!

アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

A8.netにとうろくして、無料の初心者用のアフィリエイトブログ作成の無料セミナーの参加をオススメします!
最新情報をチェックしよう!
>

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。