こんにちは。YOSHITAKA（@YOSHITA19704216）です。
画像の加工をせずにアップロードをしてから
自動的に適度な大きさに表示してくれるカスタマイズをご紹介します。
- アメブロの画像の大きさを自動的に適度な大きさに表示してくれる方法がわかります。
Contents
アメブロの画像の大きさを自動的に適度な大きさに表示してくれる
通常の画像加工の方法
記事に載せる写真は
大きく載せる方が見てもらいやすいです。
（小さい画像よりも大きい画像の方が映えて良いですよね。）
適度な大きさに表示させるためには・・・・・
通常はこういった動きが必要になってきます。
アメブロのアップロードの手順
アメブロにアップロード
↓ ↓ ↓
オリジナルサイズで貼り付ける
という工程が必要になります。
最初の画像加工は
意外とめんどくさいと感じるものですよね。
じゃあこれを自動的にしてくれる
自動的に適度な大きさに表示してくれるカスタマイズがあれば
良いですよね♪
アメブロにコピペして貼る内容
以下の記述をＣＳＳに追記します。
上記の４００pxの値は
３カラムの記事幅とほぼ同じです。
（任意で好みの値に変更可能です。）
CSSコードにコピペして使用する
max-width:400px !important;
max-height:400px !important;
}
CSS解説
これ以上大ききしちゃいけないよ！という絶対的な指令を入れるんですね。
CSSコード解説
- max-width:400px !important;
⇒横幅の大きさのMAXの数値 - max-height:400px !important;
⇒高さの大きさのMAXの数値
補足 CSS編集のデザインテンプレを使っていない場合
ＣＳＳ編集用デザインを使われていない方は
サイドバーのフリースペースに
以下の記述を追記すると適用されます。
CSSコード コピペして使用
<style type=”text/css”>.articleText a.detailOn img {max-width:400px !important;max-height:400px !important;}</style>
フリースペースに貼り付ける場合は
途中エンターキーで改行せず１行で書きましょう。
まとめ
今回は画像の自動縮小についてお答えしました。
最初に設定しておけば
以降は自動的になるので早めに設定しておくことをオススメします。
その他、詳しいことをメルマガで配信していますので
ぜひ登録お願いしますね(^^)
それではまた
