【DIVER】カエレバのデザイン変更(CSS)と画像サイズの変更方法

こんにちは。バイリンガルママのSofiaです。

今回は、カエレバの画像サイズとデザインの変更方法をまとめました。DIVER以外のテーマをお使いの方にも有効ですので、是非参考にして下さい。

スポンサーリンク

画像の変更

カエレバの画像は選択可能です。デスクトップで見るとそこまで変わらないのですが、スマホユーザーが多いサイトだと画像のサイズは大切です。 スマホで見ると、画像小は128×128で小さい。画像中は320×320で逆に大きい印象を持ちました。 そこで、簡単に画像を変える方法です。 ずばりカエレバのコードにある数字を書き換えるだけです!上から3~5行目あたりにある数値を書き直します。

画像のサイズ変更方法
_ex=128x128 ⇒この128部分を好きなサイズに書き直す

自分が一番しっくりくると感じるサイズにすることが可能です。以下に、参考例を載せました。私は200×200が好きなので、200×200に設定しています。

デザイン変更

DIVERにはカエレバのデザインが標準装備されています。詳細は公式HPでご確認下さい。 私もブログ開始直後は、カエレバのコード張るだけでボタンに色がついて喜んでいたのですが、ある時自分のブログをスマホで確認するとちょっとデザインに違和感を覚え始めました。 スマホで見ると画像が小さいのとボタンが左に寄っていて大満足!という感じでは無かったんですよね・・・

そこで、DIVER公式サイトに質問して教えて貰ったCSSがこちらです。これを、DIVER>外観>カスタマイズ>追加CSS(一番下)に貼るだけです。

CSS
@media screen and (max-width: 480px){
.kaerebalink-link1>div{
    width: 100% !important;
    margin: 0 0 5px;
}
}
※これをDIVER以外のテーマに利用して同じ結果になるかは未検証です・・・。DIVERにはデフォルトでカエレバのデザインを変えるCSSが含まれている(例えば楽天やアマゾンをボタンにする等)ので、恐らく同じ結果にはならないと思います・・・。自己責任でよろしくお願いします(_ _)
スポンサーリンク

画像サイズとデザイン変更の参考例

カエレバデフォルトのamazlet風(改)1の場合

●amazlet風(改)1 写真小(128×128)

●amazlet風(改)1 150×150に変更

●amazlet風(改)1  200×200に変更

●amazlet風(改)1  画像中(320×320)

●amazlet風(改)2 画像小 (128×128)

●amazlet風(改)2 200✖200

●amazlet風(改)2 画像中(320✖320)

カエレバの画像とデザインの変更方法をまとめましたが、如何でしたか。

 

デザインはブログ運営上大切になってきます。少し時間に余裕が出来たときに、お好みの画像サイズとデザインに変更して下さいね。 以上、【DIVER】カエレバのデザイン変更(CSS)と画像サイズの変更方法でした。

 

●こちらもオススメです

スポンサーリンク

Twitterでフォローしよう

おすすめの記事