今回も使用するのは私が描いたイラスト♪
実はちょっとした画像加工なら、画像編集ソフトは必要ありません(;^_^A
ブロックエディタの機能を使えば画像の角を簡単に丸くトリミングできます♪
他の記事で、文章の囲み枠、画像を枠で装飾する方法を紹介しましたが、ここでは画像を丸く表示させて、丸の枠の囲み枠で装飾する方法を初心者むけに紹介します♪
（上記の記事と重なる部分があるかと思います）
初心者向けという事で、仕組みを詳しく説明ではなく、コピペで簡単に使用できるように紹介していきます。
ブロックエディタで画像の角を丸くする手順
画像ブロックを選択して、画像を追加してください。
画像ファイルをPCからアップロードするか、メディアライブラリに保存してあるものからか、画像のURL か選択して追加してください。
表示された画像をクリックした後、画面右側の「ブロック」をクリックしてください。
下の画像にあるように「スタイル」が表示されますので「角丸」をクリックしてください。
＜ PR ＞
画像をトリミングして画像を丸くする手順
画僧ブロックをクリックしてメニューを表示させて「トリミング」のアイコンをクリックしてください。
①トリミングのアイコンがあったあたりに「縦横比」のアイコンが表示されますのでクリックしてください。
プルダウンメニューの中の「正方形」をクリックしてください。
大きさはマウスのスクロールで、位置はマウスでドラックして調整します♪
最後に「適用」アイコンをクリックしてください。
角を丸くした画像に枠線を追加
上の画像のように丸くした画像に枠線をつけることもできます♪
これは使用しているテーマによって違うと思うのですが、私の使用している有料テーマ「THE THOR」だとブロックエディタで画像を丸くして枠線を追加する〜という機能はありません。
無いけど！できないということでは無いです！
これ大事。
できます。
もちろん簡単です！
手順は「追加CSS」という所にコードをコピペしておいて、丸くしたい画像の所にコードの名称を追加するだけです♪
コードはコピペOKですよ〜(*^^*)
追加CSSに枠線のコードを追加（THE THOR）
ダッシュボードの左側のどこに「追加CSS」があるかは、使用しているテーマやプラグインで変わる場合もありますが大体同じかな(^_^;)
「外観」→「カスタマイズ」→「追加CSS」の順にクリックしていきます。
※すみません。もしこの順でたどり着けなかった「THE THOR」以外の有料テーマの方は、自力で探してください。
＜ PR ＞
wordpress（ワードプレス）CSSコピペする場所「追加CSS」
「外観」 → 「カスタマイズ」の順にクリックして下さい。
画像では「テーマエディター」とありますが現在のバージョンだと「テーマファイルエディター」となっているかも。
次に「追加CSS」をクリックしてください。
「追加CSS」を記入する画面が表示されます。
この場所に枠線のコードをコピペしていきます！
コピペが終わったら、右上の「公開」をクリックしてください(*^^*)
ピンクの枠のコピペ文
.pinkwaku {
border: 5px pink solid;
}
この３行を、「追加CSS」にコピペしてください。
すべて小文字です。
一行目の「pinkwaku」がこのコードの名称になります。
枠の名称記入場所
- 丸くした画像をクリック
- 上のメニューバーの右端の三点をクリック
- 「HTMLとして編集」をクリック
次は表示されるコードから画像の名称部分を探して、その後ろにコードの名称を記入します！
探すコツは、後ろの＜/figure＞の前の数字！
「１４」の後ろを隠してしまいましたが、ここの数字の後ろに、半角スペースを入力した後、コードの名称を画像のように記入します。
記入した後、記入したブロック以外の場所をクリックすると「ブロックのリカバリーを試行」というボタンが表示されます。
- 「・・・」をクリック
- 「HTMLに変換」をクリック
「プレビュー」をクリックすると画像が表示されます。
枠線は表示されませんが、右上の「公開」横の「プレビュー」で確認してください。
枠線が表示されていると思います♪
画像に使う枠線のコードの説明♪
.pinkwaku {
「.」の後ろの文字列がCSSの名前になります。
border: 5px pink solid;
「border:」の後ろの数字が枠線の太さにさります。
「pink」これが色の指定になります。
色は英語で記入すれば大体は表示されるかと思います。
英語ではなくコードを入力してもOKです！
色のコードについては下の記事で確認してみてください。
「solid」これは直線でという指示になります。
枠を点線にしたい時は「dotted」に変更してください。
| dotted | 点線 |
| dashed | 破線 |
| double | 二重線（下に例あり） |
| groove | 破線 |
| ridge | 半分に分かれた2色（下に例あり） |
| inset | 左側が暗くした色、下が指定された色（下に例あり） |
| outset | 左側が指定した色、下が暗い色（下に例あり） |
| none | 線なし |
WordPressブロックエディタで丸画像の枠線例
上で紹介した３行のコードの変更例です。
二行目の数字を「５」→「１０」に「solid」を上の表の英字に変更して使用しています。
簡単丸画像の枠の例(dotted二重線)
.pinkwaku_double{
border: 10px pink double;
}
簡単丸画像の枠の例(ridge２色)
.pinkwaku_ridge{
border: 10px pink ridge;
}
簡単丸画像の枠の例(insett２色)
.pinkwaku_inset{
border: 10px pink inset;
}
簡単丸画像の枠の例(outset２色)
.pinkwaku_outset{
border: 10px pink outset;
}
【ワードプレス】画像角を丸くトリミング♪画像編集ソフトはいらない？まとめ
使用するイラストも変え大幅に記事を修正しました。前はクラシックエディタを主に記事にしていたのですが、今回はブロックエディタのみにしました。
もちろん私が使用しているのは有料テーマ「THE THOR」です♪
THE THORはブロックエディタに対応してないし・・・と思ってる方！
私は気にせず使えてますよ〜ｗｗｗ
