アメブロの記事に表示される画像を自動的に適度な大きさにしてくれるCSSの編集方法

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
アメブロの画像を自動的にはみ出ない用にすることってできるんですか?

よしたか
指定したらできますよ。

画像の加工をせずにアップロードをしてから

自動的に適度な大きさに表示してくれるカスタマイズをご紹介します。

この記事を読むことで
  • アメブロの画像の大きさを自動的に適度な大きさに表示してくれる方法がわかります。

アメブロの画像の大きさを自動的に適度な大きさに表示してくれる

通常の画像加工の方法

記事に載せる写真は

大きく載せる方が見てもらいやすいです。

(小さい画像よりも大きい画像の方が映えて良いですよね。)

 

適度な大きさに表示させるためには・・・・・
通常はこういった動きが必要になってきます。

 

アメブロのアップロードの手順

パソコン上で画像を縮小加工する
↓ ↓ ↓
アメブロにアップロード
↓ ↓ ↓
オリジナルサイズで貼り付ける

という工程が必要になります。

最初の画像加工は

意外とめんどくさいと感じるものですよね。

 

 

じゃあこれを自動的にしてくれる

自動的に適度な大きさに表示してくれるカスタマイズがあれば

良いですよね♪

 

 

アメブロにコピペして貼る内容

以下の記述をCSSに追記します。

上記の400pxの値は

3カラムの記事幅とほぼ同じです。

 

(任意で好みの値に変更可能です。)

CSSコードにコピペして使用する

.articleText a.detailOn img {
max-width:400px !important;
max-height:400px !important;
}

CSS解説

これ以上大ききしちゃいけないよ!という絶対的な指令を入れるんですね。

CSSコード解説

  • max-width:400px !important;
    ⇒横幅の大きさのMAXの数値
  • max-height:400px !important;
    ⇒高さの大きさのMAXの数値

補足 CSS編集のデザインテンプレを使っていない場合

CSS編集用デザインを使われていない方は

サイドバーのフリースペースに

以下の記述を追記すると適用されます。

CSSコード コピペして使用

<style type=”text/css”>.articleText a.detailOn img {max-width:400px !important;max-height:400px !important;}</style>

フリースペースに貼り付ける場合は

途中エンターキーで改行せず1行で書きましょう。

まとめ

 

今回は画像の自動縮小についてお答えしました。

最初に設定しておけば

以降は自動的になるので早めに設定しておくことをオススメします。

 

その他、詳しいことをメルマガで配信していますので

ぜひ登録お願いしますね(^^)

 

それではまた

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事