画像を丸く切り抜いて表示させたいな。
丸く枠で囲みたいな。
という時、画像編集ソフトを立ち上げ加工して、画像をアップロードしてという作業をしていると思います。
でも、実はちょっとした画像加工なら、画像編集ソフトは必要ありません(;^_^A
他の記事で、文章の囲み枠、画像を枠で装飾する方法を紹介しましたが、ここでは画像を丸く表示させて、丸の枠の囲み枠で装飾する方法を初心者むけに紹介します♪
初心者向けという事で、仕組みを詳しく説明ではなく、簡単にコピペで使用できるようになっています。
クラシックエディタ、ブロックエディタの順に画像の装飾方法を紹介しています(^^)/
すみません。
CSSを使用します。
CSS難しそうで無理！
とひかないでください。
場所を指定しますので、基本コピペでOKです♪
ご自分で記述を変えるなら、色のコードと線の種類でしょうか。
それもコピペでいけるのでOKです♪
ここではこの画像を使って説明していきます。
wordpress（ワードプレス）で画像を丸くトリミング♪CSSコピペする場所
「外観」 → 「カスタマイズ」の順にクリックして下さい。
「追加CSS」をクリックしてください。
「追加CSS」を記入する画面が表示されます。
行間を広げる作業をしている方の場合は、ここに行間指定のCSSが記入されているかと思います。
枠線を選択したら、書き終えてあるCSS文の後ろにコピペして付け足していきます。
まだ枠を選択していませんので、今は場所の確認だけです。
この場所の事をⓈとしておきます。
コピペしたら、右上にある「公開」ボタンをクリックしてください。
wordpressで画像を丸くトリミング【クラシックエディタ】
wordpressページに丸くトリミングしたい画像を追加する
「メディアを追加」をクリックして、投稿に挿入をクリックして画像をエディタに表示させてください。
正方形の画像を使用することがお約束なので、画像を正方形に加工しちゃいます♪
もちろん、画像編集ソフトは使いません(^^)/
wordpress丸くトリミングしたい画像の詳細設定
エディタに表示された画像をクリックしてください。 この吹き出しが出てきたと思います。
赤丸で囲った鉛筆マークをクリックしてください。
画像詳細画面が表示されます。
（もう一度言いますが、これはクラシックエディタでの設定です）
画面右側にクリックした画像が表示されているかと思います。
その画像の下の「オリジナルを編集」をクリックしてください。
「画像を編集」の下の赤丸で囲ってある、トリミングのボタンをクリックしてください。
画像の右横にある「選択範囲」とい場所で正方形になるように、同じ数字を記入してください。
記入すると、画像が暗い部分と明るい部分に分かれます。
明るい部分をクリックしたまま動かすと、場所を変えることが出来ます。
自分の希望の場所に移動させてください♪
使い痛い画像と、表示させたいサイズがあまりにも違うときは、
上にある「画像縮尺の変更」の「新規サイズ」で希望サイズを記入してください。
画像のどの部分を使うのか選択した後、もう一度画像の上のトリミングのボタンをクリックして下さい。
画像の下にある「置換」をクリックした後、画面右下にある「更新」をクリックしてください。
画像を丸くトリミングwordpress【クラシックエディタ】CSSの名前をコピペする場所
上級者向けの設定 にある 「画像 CSS クラス」の横の空欄にCSSの名前をコピペします。
が、まだ枠線をどれにするか決めてないのでこの場所に記入だとだけ覚えていてください。
この場所の名称をⒷとしておきます♪
あとはコピペ文をそれぞれの場所に張り付けて、画面右下にある「更新」ボタンをクリックしてください♪
画像を丸くトリミングwordpress【ブロックエディタ】画像の設定の説明
画像ブロックを選択して、画像を追加させてください。
ワードプレスで丸くトリミングしたい画像を正方形にする
画僧ブロックをクリックしてメニューを表示させて「トリミング」のアイコンをクリックしてください。
トリミングのアイコンがあったあたりに「縦横比」のアイコンが表示されますのでクリックしてください。
プルダウンメニューの中の「正方形」をクリックしてください。
「適用」アイコンをクリックしてください。
ワードプレスで丸くトリミングしたい画像のスタイルを「角丸」にする
画像ブロックが選択されている状態で、画面右側にある「スタイル」で「角丸」をクリックします。
これで画像が真ん丸になります(^^♪
wordpressCSSの名前をコピペする場所
「高度な設定」の中の「追加CSSクラス」にCSS名を書き込みます。
「角丸」を選択した状態なので、すでに「is-style-rounded」が書き込まれていますので、その後ろに半角スペースを空けてCSS名を記入します(^^♪
画像をどの枠で装飾するか選択してコピペ♪
画像の囲み枠をみて、気に入った画像加工があれば、その画像の下のCSS文をⓈコピペしてしてください。
画像の上のCSS名をⒷにコピペしてください。
丸くトリミングし細い枠線で装飾のコードを説明
CSSの説明
”img.”の後ろの赤字の部分がCSSの名前になります。
紫の数字が半径の値になります。
画像の表示サイズの横幅を指定しています。
元画像のサイズでOKの時はこの横幅の文と縦幅の文を削除してください。
正方形になるように、指定してるので縦と横の幅を同じにしています。
画像の表示サイズの縦幅を指定しています。
元画像のサイズでOKの時はこの横幅の文と縦幅の文を削除してください。
正方形になるように、指定してるので縦と横の幅を同じにしています。
「青字の数字」が枠線の太さになります。
数字の前の「：」を消してしまった場合は「；」と間違わないように気をつけてください。
自分の好きな太さに書き換えてみてください。
スペースを1つ以上開けて、次に色の指定です。
自分の好きな色に変更する時は、 「pink」を自分の好きな色コードに変更して下してください。
色コードがわからない時はこちらで紹介していますので、コピペしてきてください。
【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
「solid」は実線で描くという意味です。
違う枠を使用したい時は「solid」の部分に、下の希望の枠線の文字をコピペしてください。
記述してある「；」と「：」を間違わないように気をつけてください。
| dotted | 点線 |
| dashed | 破線 |
| double | 二重線 |
| groove | 破線 |
| ridge | 飛び出てるような線 |
| inset | 凹んでいるような線 |
| outset | 線の内側が出ているような線 |
| none | 線なし |
丸くトリミングした画像をピンクの囲み枠で装飾
pink_maru_waku
.pink_maru_waku {
border-radius: 50%;
width: 200px;
height: 200px;
border: 5px pink solid;
}
丸くトリミングした画像を水色の囲み枠で装飾
mizu_maru_waku
.mizu_maru_waku {
border-radius: 50%;
width: 200px;
height: 200px;
border: 5px #c7edfc solid;
}
丸くトリミングした画像を緑の囲み枠で装飾
mido_maru_waku
.mido_maru_waku {
border-radius: 50%;
width: 200px;
height: 200px;
border: 5px #c2f2c2 solid;
}
丸くトリミングした画像をピンクの額縁のように装飾
上の装飾とちょっと違って、画像と枠の間に隙間を開けています。
gaku_pink_maru_waku
.gaku_pink_maru_waku {
border-radius: 50%;
width: 200px;
height: 200px;
padding : 5px ; border: 5px pink solid;
}
丸くトリミングした画像を水色の額縁のように装飾
gaku_mizu_maru_waku
.gaku_mizu_maru_waku {
border-radius: 50%;
width: 200px;
height: 200px;
padding : 5px ; border: 5px #c7edfc solid;
}
丸くトリミングした画像を緑の額縁のように装飾
gaku_mido_maru_waku
.gaku_mido_maru_waku {
border-radius: 50%;
width: 200px;
height: 200px;
padding : 5px ; border: 5px #c2f2c2 solid;
}
丸くトリミングした画像の枠の装飾なし
border-radius: 50%;
width: 200px;
height: 200px;
}
コピペOK【画像加工】画像を丸くトリミング♪画像編集ソフトはいらない？ まとめ
今回はCSSを使用しての画像を丸く加工して表示させる方法を「クラシックエディタ」「ブロックエディタ」共に紹介しました。
画像サイズを指定してCSSを登録しておくと、画像のサイズごとにCSSが必要になってしまいますので注意してください。
HTMLコードを追加するだけで画像加工する方法は下の記事でも紹介しています♪
>>>ブログ装飾しましょ♪囲み枠＆トリミング
この記事は、画像加工や囲み枠についての記事をまとめて紹介+追加方法の記事になります。
HTMLのみで画像を枠で囲む方法は追加情報として記載しました(^^♪