ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【WordPressマナブログコピー】画像横幅の調整:アイキャッチ以外の画像が横幅いっぱいになってしまう問題を解決

基本デザイン設定

こんにちは、ごま吉(@Lv1gomakichi)です。

Manablog Copyでは、グーテンベルクで投稿すると画像が横幅いっぱいになります。ここでは、アイキャッチ以外の投稿画像について、横幅いっぱいに掲載したくない場合の方法を紹介します。

Manablog Copy 画像の横幅調整

デフォルトの状態で画像を投稿(グーテンベルクで投稿)すると下記のようになります。

この現象は、Gutenbergを使って画像挿入すると「wp-block-image」というクラスタグが入ってしまい元々設定されていいたimgへのCSSが効かなるためです。

こちらで全然気にならない人は、設定を変更する必要はありません。

私は、アイキャッチは横幅100%で良いと思うのですが、その後記事内の画像はメリハリをつけるためにも、少し横幅を縮小した方がより良いと考えています。

画像横幅のCSSの追加

本来ですと、WordPressテーマ内に実装されているstyle.cssを修正すべきでしょうが、初心者には元データのCSSの変更は難易度高いので、より簡単な方法でご紹介します。

WordPressには、カスタマイザー機能がありCSSを簡単に追加できる機能があります。本来は臨時的にコードを追加していく領域ですが、こちらを活用したほうが事故が少ないので、こちらにCSSコードを追加していきます。

カスタマイザー追加CSSの順にアクセスします。

追加するCSSコードは以下です。
横幅が若干小さくおさまるように、90%で設定します。

.wp-block-image {
width: 90%;
margin: 10px auto;
}

完成後のイメージ

画像提供:Freepik – jp.freepik.com によって作成された background ベクトル



\将来につながるプログラミング/

エンジニアとして活躍したい人
プログラミング未経験でも安心
WordPressにもっと詳しくなれる
無料体験レッスン受講後に受講料が1万円引に!




注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定