画像を枠で囲みたいな。
という時、画像編集ソフトを立ち上げ加工して、画像をアップロードしてという作業をしていると思います。
でも、実はちょっとした画像加工なら、画像編集ソフトは必要ありません(;^_^A
初心者向けという事で囲み枠付きの画像で、囲み枠を選んでコピペ文をコピペするだけで囲み枠が簡単設置できるように紹介しています。
ブロックエディタで使用する場合は、ブロックの「クラシック」スタイルを選択して使用してください。
この記事ではCSSを使用します。
CSS難しそうで無理！
とひかないでください。
他のテーマを使っている方は、ごめんなさい。
CSSを書き込めるエリアを探してください<(_ _)>
ご自分で記述を変えるなら、色のコードと線の種類でしょうか。
それもコピペでいけるのでOKです♪
画像を囲み枠で装飾の確認１wordpressコピペする場所
「外観」 → 「カスタマイズ」をクリックして下さい。
下にスクロールをして「追加CSS」をクリックしてください。
「追加CSS」を記入する画面が表示されます。
枠線を選択したら、書き終えてあるCSS文の後ろにコピペして付け足していきます。
まだ枠を選択していませんので、今は場所の確認だけです。
この場所の事をⓈとしておきます。
コピペしたら、右上にある「公開」ボタンをクリックしてください。
＜ PR ＞
画像を囲み枠で装飾の確認２ wordpress画像の設定の説明
wordpressページに囲み枠で装飾したい画像を追加する
「メディアを追加」をクリックして、投稿に挿入をクリックして画像をエディタに表示させてください。
wordpress囲み枠で装飾したい画像の詳細設定
エディタに表示された画像をクリックしてください。
この吹き出しが出てきたと思います。
赤丸で囲った鉛筆マークをクリックしてください。
画像詳細画面が表示されます。
＜ PR ＞
wordpress【囲み枠で装飾したい画像の表示サイズの選択
画像のサイズを変更したい場合は、真ん中あたりにある「設定を表示」のフルサイズの横の▼をクリックしてください。
サイズが5パターン表示されますので、カスタムをクリックしてください。
wordpress囲み枠で装飾したい画像を小さく表示させる設定
もともとの画像サイズは変更しないで、画像を小さく表示させたい時に使用します。
横幅(px)と高さ(px)が表示されます。
幅か高さのどちらかに表示された、数字より小さい数字を記入してください。
比率をたもってくれますので、どちらかに希望の数字を入れればOKです。
大きな画像を別ページで表示
小さく表示させた画像を、クリックすると別ページで大きく表示させるとき使います。
リンク先 「なし」 の横の 「▼」 をクリックし、「メディアファイル」を選択してクリックしてください。
画像を囲み枠で装飾の確認３ wordpressCSSの名前をコピペする場所
上級者向けの設定 にある 「画像 CSS クラス」の横の空欄にCSSの名前をコピペします。
この場所の名称をⒷとしておきます♪
コピペしたら、「更新」をクリックしてください。
画像をどの囲み枠で装飾するか選択♪
画像の囲み枠をみて、気に入った画像加工があれば、その画像の下のCSS文をⓈコピペしてしてください。
画像の上のCSS名をⒷにコピペしてください。
この枠線の種類の見本は文章の囲み枠の方にありますので確認してみてください。
≫コピペOK★WordPress【文章加工】文章を囲み枠で装飾♪基本編
ピンクの枠線で囲む
CSSコード
|
1 2 3 |
.pinkwaku { border: 5px pink solid; } |
CSSのコードの説明
．ｐｉｎｋｗａｋｕ｛ｂｏｒｄｅｒ：5ｐｘ ｐｉｎｋ ｓｏｌｉｄ；｝
- pinkwaku : これがCSSの名前になります。
- 5px:線の太さ（ｂｏｒｄｅｒ）
- pink ：線の色（ｂｏｒｄｅｒ）
- solid：線の種類（ｂｏｒｄｅｒ）
「ｂｏｒｄｅｒ」の後ろが「：」で文の最後が「；」になります。
間違えてを消してしまった場合は「；」と「；」を間違わないように気をつけてください。
そして必ず半角で記入してください。
線の色は下の記事で、好きな色のコードをコピペしてきてください。
≫【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
線は８種類から選ぶ
- solid：実線
- double：二重線
- dotted：丸い点線
- dashed：棒状の点線
- ridge/groove：立体的な線
- inset/outset: 上＆左側と下右側の色が濃淡で違う線
画像と枠線との隙間を開けたい時はコードを追加
CSSのコード
|
1 2 3 |
.gaku_pinkwaku { padding : 5px ; border: 5px pink solid; } |
画像と枠線の隙間の大きさを指定します。
ｐａｄｄｉｎｇ ： 数字ｐｘ か 数字％；
背景色を付けたいならコードを追加
CSSのコード
囲った枠の中に色を付けたいなら「背景色」の指定をします。
|
1 2 3 4 5 |
.gaku_pinkwaku_haikei{ padding:10px; border:5px solid pink; background-color:#f5e1ec; } |
ｂａｃｋｇｒｏｕｎｄ：色コード；
色のコードは下の記事で紹介していますので、好きな色のコードをコピペしてきてください。
≫【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
囲み枠の四つ角を丸くしたいならさらにコードを追加
囲み枠の四つ角を丸くしたい時に使用します。
ｂｏｒｄｅｒ－ｒａｄｉｕｓ： 数字ｐｘ か 数字％；
画像を額に入れているように囲む
使用しているコード
|
1 2 3 4 5 6 7 |
/*額縁*/ .gakubuti{ background: linear-gradient(#80634d, #330000); padding:20px; border:15px outset #471d1a; border-radius: 5px; } |
グラデーションにしたい時に使用する「linear-gradient」
背景をグラデーションにしたい時に使用します。
色のコードを二種類セットして使用します。
コピペOK【画像加工】画像を囲み枠で装飾♪画像編集ソフトはいらない？ まとめ
この記事では、クラシックエディタを使用しての画像の装飾方法を紹介しました。
この記事をリライトする前は、見本の囲み枠を何個も用意していたのですが、コードの紹介が重複しているなぁと思い今回、見本を省略しました(￣▽￣;)
最後まで読んでくれてありがとうございました。
一言でもコメントをいただけると嬉しいです(^^♪
ランキングに参加していますのでクリックお願い致します♪
私が無料で登録している2つのアフェリエイトの会社です。
どちらもメリットがあるので、アフェリエイトに興味があるなら登録をお勧めします。
物販のアフェリエイトに興味がある方は、アソシエイトに応募と同時に（保険として）もしもからも申請することをお勧めします♪
A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。
アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/
