wordpress画像を囲み枠で装飾♪画像編集ソフトはいらない?

画像を枠で囲みたいな。

という時、画像編集ソフトを立ち上げ加工して、画像をアップロードしてという作業をしていると思います。

でも、実はちょっとした画像加工なら、画像編集ソフトは必要ありません(;^_^A

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

初心者向けという事で、仕組みを詳しく説明ではなく、簡単にコピペで使用できるようになっています。

ここではクラシックエディタを使用した簡単な画像の装飾方法を紹介しています(^^)/

すみません。

CSSを使用します。

CSS難しそうで無理!

とひかないでください。

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

他のテーマを使っている方は、ごめんなさい。

(CSSを書き込めるエリアを探してください<(_ _)>)

ご自分で記述を変えるなら、色のコードと線の種類でしょうか。

それもコピペでいけるのでOKです♪

ここではこの画像を使って説明していきます。

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

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

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

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

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

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

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

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

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

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

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

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

エディタに表示された画像をクリックしてください。

この吹き出しが出てきたと思います。

赤丸で囲った鉛筆マークをクリックしてください。

画像詳細画面が表示されます。

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


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

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


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


もともとの画像サイズは変更しないで、画像を小さく表示させたい時に使用します。

横幅(px)と高さ(px)が表示されます。

幅か高さのどちらかに表示された数字より小さい数字を記入してください。

比率をたもってくれますので、どちらかに希望の数字を入れればOKです。

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

小さく表示させた画像を、クリックすると別ページで大きく表示させるとき使います。

リンク先 なし の横の ▼ をクリックし、「メディアファイル」を選択してクリックしてください。

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

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

が、まだ枠線をどれにするか決めてないのでこの場所に記入だとだけ覚えていてください。
この場所の名称をとしておきます♪

あとはコピペ文をそれぞれの場所に張り付けて、画面右下にある「更新」ボタンをクリックしてください♪

④画像をどの囲み枠で装飾するか選択してコピペ♪

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

細い枠線

CSSの説明

img.pinkwaku {

”img.”の後ろの赤字の部分がCSSの名前になります。

border: 5px pink solid;

「青字の数字」が枠線の太さになります。

数字の前の「」を消してしまった場合は「」と間違わないように気をつけてください。

自分の好きな太さに書き換えてみてください。

スペースを1つ以上開けて、次に色の指定です。

自分の好きな色に変更する時は、

pink」を自分の好きな色コードに変更して下してください。

色コードがわからない時はこちらで紹介していますので、コピペしてきてください。

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

solid」は実線で描くという意味です。

実線じゃない枠を使用したい時は「solid」の部分に、下の希望の枠線の文字をコピペしてください。

最後に記述してある「」も「」と間違わないように気をつけてください。

dotted点線
dashed破線
double二重線
groove破線
ridge飛び出てるような線
inset凹んでいるような線
outset線の内側が出ているような線
none線なし
画像をピンクの囲み枠で装飾

pinkwaku

img.pinkwaku {
border: 5px pink solid;
}

画像を水色の囲み枠で装飾

mizuwaku


img.mizuwaku {
border: 5px #c7edfc solid;
}

 
画像を緑の囲み枠で装飾

midowaku

img.midowaku {
border: 5px #c2f2c2 solid;
}

画像をピンクの額縁のように装飾

gaku_pinkwaku

img.gaku_pinkwaku {
padding : 5px ; border: 5px pink solid;
}

画像を水色の額縁のように装飾

gaku_midowaku

img.gaku_midowaku {
padding : 5px ; border: 5px #c2f2c2 solid;
}

画像を緑の額縁のように装飾

gaku_midowaku

img.gaku_midowaku {
padding : 5px ; border: 5px #c2f2c2 solid;
}

画像を丸くして装飾

画像を丸くするのはここでは1パターンだけの紹介をます。

画像を丸くして、枠線で囲むなどの紹介は別記事でさせていただきます。

>>>wordpress【THE THOR】画像を丸くトリミングして表示♪画像編集ソフトはいらない?

maru

img.maru {
border-radius: 50%;
width: 180px;
height: 180px;
}

wordpress画像を囲み枠で装飾♪画像編集ソフトはいらない?まとめ

この記事を書くのにとても時間がかかりました(;^ω^)
それは、ブロックエディタで画像の装飾が出来ないかと、調べまくりました(笑)
しかし、私の頭では見つけることができませんでした。
プラグインをしようすればできそうなのですが、プラグインを入れないで出来ないかを試行錯誤していました( ̄▽ ̄;)
むだなあがきでした・・・。

 

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪

人気ブログランキング

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

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

/TOP/