実はちょっとした画像加工なら、画像編集ソフトは必要ありません(;^_^A
初心者向けという事で、仕組みを詳しく説明ではなく、コピペで簡単に使用できるように紹介していきます。
- 用意する画像について
- ブロックエディタで画像を丸く表示
- クラシックエディタで丸く表示
用意する画像について
正円にしたい場合は正方形の画像を用意します。
正方形の画像がない場合は、画像をメディアにアップロードしてから加工します。
ブロックエディタで画像を丸くする手順
画像ブロックを選択して、画像を追加してください。
画像ファイルをPCからアップロードするか、メディアライブラリに保存してあるものからか、画像のURL か選択して追加してください。
表示された画像をクリックした後、画面右側の「ブロック」をクリックしてください。
下の画像にあるように「スタイル」が表示されますので「角丸」をクリックしてください。
PR長方形の画像を丸くする手順
画僧ブロックをクリックしてメニューを表示させて「トリミング」のアイコンをクリックしてください。
①トリミングのアイコンがあったあたりに「縦横比」のアイコンが表示されますのでクリックしてください。
プルダウンメニューの中の「正方形」をクリックしてください。
大きさはマウスのスクロールで、位置はマウスでドラックして調整します♪
最後に「適用」アイコンをクリックしてください。
クラシックエディタで画像を丸くする
クラシックエディタで画像を丸くする手順です。
- 丸くするCSSを登録します。
- 画像に登録したCSSを指定します。
丸くするCSSを登録
「外観」→「カスタマイズ」→「追加CSS」の順にクリックしていきます。
※すみません。もしこの順でたどり着けなかった「THE THOR」以外の有料テーマの方は、自力で探してください。
wordpress（ワードプレス）CSSコピペする場所「追加CSS」
「外観」 → 「カスタマイズ」の順にクリックして下さい。
画像では「テーマエディター」とありますが現在のバージョンだと「テーマファイルエディター」となっているかも。
次に「追加CSS」をクリックしてください。
「追加CSS」を記入する画面が表示されます。
この場所に枠線のコードをコピペしていきます！
丸くするCSSのコード
.maru{
border-radius: 50%;
}
コピペが終わったら、右上の「公開」をクリックしてください(*^^*)
画像に登録したCSSを指定します。
画像を表示させてください。
画像をクリックして、鉛筆マークをクリックしてください。
画像詳細を表示させてください。
画像CSSクラスに、コード名「maru」を記入してください。
「更新」をクリックして完了です。
長方形の画像を丸くする手順
この画像を使用して紹介していきます。
画像をクリックして、鉛筆マークをクリックして画像詳細を表示させてください。
画像の下に「オリジナルを編集」、「置換」が表示されますので、「オリジナルを編集」をクリックしてください。
「切り抜き」をクリックしてください。
選択範囲に数値を記入か、画像の周りにある□をドラックするかして画像を正方形にし、「切り抜きを適用」をクリックします。
「編集を保存」をクリックしてください。
【ワードプレス】画像角を丸くトリミング♪画像編集ソフトはいらない？まとめ
使用するイラストも変え大幅に記事を修正しました。前はクラシックエディタを主に記事にしていたのですが、今回はブロックエディタのみにしました。
もちろん私が使用しているのは有料テーマ「THE THOR」です♪
THE THORはブロックエディタに対応してないし・・・と思ってる方！
私は気にせず使えてますよ〜ｗｗｗ
2025.1.27 クラシックエディタで記事を書くようになったので、クラシックエディタでの画像編集を追加して記事を修正しました。(^^;