【ワードプレス】画像角を丸くトリミング♪画像編集ソフトはいらない?

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

 

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

 

 

  1. 用意する画像について
  2. ブロックエディタで画像を丸く表示
  3. クラシックエディタで丸く表示

 

 

 

用意する画像について

 

正円にしたい場合は正方形の画像を用意します。

正方形の画像がない場合は、画像をメディアにアップロードしてから加工します。

 

ブロックエディタで画像を丸くする手順

 

画像ブロックを選択して、画像を追加してください。

 


画像ファイルをPCからアップロードするか、メディアライブラリに保存してあるものからか、画像のURL か選択して追加してください。

表示された画像をクリックした後、画面右側の「ブロック」をクリックしてください。

下の画像にあるように「スタイル」が表示されますので「角丸」をクリックしてください。

 

 

 

長方形の画像を丸くする手順

 

画僧ブロックをクリックしてメニューを表示させて「トリミング」のアイコンをクリックしてください。

①トリミングのアイコンがあったあたりに「縦横比」のアイコンが表示されますのでクリックしてください。

 

プルダウンメニューの中の「正方形」をクリックしてください。


大きさはマウスのスクロールで、位置はマウスでドラックして調整します♪


最後に「適用」アイコンをクリックしてください。

 

クラシックエディタで画像を丸くする

 

クラシックエディタで画像を丸くする手順です。

  1. 丸くするCSSを登録します。
  2. 画像に登録したCSSを指定します。

 

丸くするCSSを登録

「外観」→「カスタマイズ」→「追加CSS」の順にクリックしていきます。

※すみません。もしこの順でたどり着けなかった「THE THOR」以外の有料テーマの方は、自力で探してください。

wordpress(ワードプレス)CSSコピペする場所「追加CSS」

 

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

画像では「テーマエディター」とありますが現在のバージョンだと「テーマファイルエディター」となっているかも。

次に「追加CSS」をクリックしてください。

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

この場所に枠線のコードをコピペしていきます!

 

 

丸くするCSSのコード

.maru{
border-radius: 50%;
}

 

コピペが終わったら、右上の「公開」をクリックしてください(*^^*)

 

画像に登録したCSSを指定します。

 

画像を表示させてください。

画像をクリックして、鉛筆マークをクリックしてください。

 

 

画像詳細を表示させてください。

画像CSSクラスに、コード名「maru」を記入してください。

 

 

 

 

「更新」をクリックして完了です。

 

 

 

長方形の画像を丸くする手順

 

 

この画像を使用して紹介していきます。

 

画像をクリックして、鉛筆マークをクリックして画像詳細を表示させてください。

 

画像の下に「オリジナルを編集」、「置換」が表示されますので、「オリジナルを編集」をクリックしてください。

 

 

「切り抜き」をクリックしてください。

 

 

選択範囲に数値を記入か、画像の周りにある□をドラックするかして画像を正方形にし、「切り抜きを適用」をクリックします。

 

 

「編集を保存」をクリックしてください。

【ワードプレス】画像角を丸くトリミング♪画像編集ソフトはいらない?まとめ

 

使用するイラストも変え大幅に記事を修正しました。前はクラシックエディタを主に記事にしていたのですが、今回はブロックエディタのみにしました。
もちろん私が使用しているのは有料テーマ「THE THOR」です♪
THE THORはブロックエディタに対応してないし・・・と思ってる方!
私は気にせず使えてますよ〜www

 

2025.1.27  クラシックエディタで記事を書くようになったので、クラシックエディタでの画像編集を追加して記事を修正しました。(^^;