ブロックエディタ（Gutenberg）を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ
ポチップ
THE THOR ザ・トール アイキャッチ 画像の角を丸くする 【 角丸 】
当ページのリンクには広告が含まれています。
ポチップ
当サイトではワードプレスの有料テーマ THE THOR を利用しています。
THE THOR は優れたデザイン性が売りですが、細かい部分は自分の好みに合わせて変更していきたいと思います。
今回はアイキャッチ画像の角を丸くする方法。
アイキャッチ画像に丸みを持たせることでサイトを優しく親しみやすい雰囲気に変更することができます。
THE THOR の導入はこちら
Google が推奨する最新の機能を搭載した「THE THOR」を導入する。
※ THE THOR の詳細・ダウンロードについては公式サイトをご覧ください。
レンタルサーバー/ドメインは設定や管理がわかりやすい ConoHa WING を推奨します。
サーバー移行は 専門の業者にお願い することもできます。
目次
アイキャッチ 画像の角を丸くする
カスタマイズには追加CSSを利用するのが簡単。追加CSSにコードをコピペするだけで完成します。
操作手順
外観 → カスタマイズ → 追加CSS
外観 → カスタマイズ → 追加CSS
コピペするコードは以下の通り。
/*アイキャッチ角丸*/
.eyecatch {
border-radius: 8px;
}
数値の部分が角丸の半径になるので大きくすると大きな角丸になります。
角の縦横ごとに半径の大きさが指定できるので細かく指定すると視覚効果の高い枠を作り出すことができます。
※px指定以外にもパーセンテージで指定することもできます。
これが↓
こうなります↓
8px
こういうのも出来ます↓
50% 50% 50% 70%/50% 50% 70% 60%
＼CSSは書籍で学ぼう／
[wpap service=”with” type=”detail” id=”B06WW9LHKX” title=”HTML5 & CSS3 デザインレシピ集”]
あとがき
全てのアイキャッチ画像が角丸になるのでご注意ください。
ブロックエディタ（Gutenberg）を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ
ポチップ
この記事が気に入ったら
フォローしてね！
ブログテーマ選びについて
この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。
- THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る - THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る - 自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト
コメント