こんにちは、パソコンインストラクターの川上雄大です。
こちらの過去記事
『【再アップ記事】サイドバーにスライドショーを設定するには』
に、
コメントをいただいております。
うまくできたとのこと。良かったです^^!
しかしなにやら別のご質問も書いている???
「マウスオーバーで画像が大きくなるように」
ということですが、このようなこと↓
でしょうか。
(スマホ、iPhoneで見られている方、何を言っているのかわからなくてすいません。PCでご確認くださいませ。)
もしも、こういうこと(上の画像にマウスをのせると、画像が大きくなる)でよければ、
CSSに、次のコードを追加して、
(アメブロのデザインが「CSS編集用デザイン」の方のみとなります。→『CSS編集用デザインって』)
.scale img:hover {
transform: scale(1.15,1.15);
}
※( )内の数値は縮尺を表しています。自由に変えてくださいませ。1.2や1.3など。
大きくしたい画像のHTMLソースを、
(画像挿入後、「HTML表示」に切り替えて)
<p style="text-align: center;"><a href="https://stat.ameba.jp/user_images/20171114/10/sumitak1329/3a/72/j/o0579030414070148781.jpg"><img alt="" contenteditable="inherit" height="304" src="https://stat.ameba.jp/user_images/20171114/10/sumitak1329/3a/72/j/o0579030414070148781.jpg" width="579"></a></p>
先頭の「<p」の後に、
class="scale"
をコピペするとOKです。
ただし、
pとclassとstyleの間は、半角スペースを入れてくださいませ。
<p class="scale" style="text-align: center;"><a href="https://stat.ameba.jp/user_images/20171114/10/sumitak1329/3a/72/j/o0579030414070148781.jpg"><img alt="" contenteditable="inherit" height="304" src="https://stat.ameba.jp/user_images/20171114/10/sumitak1329/3a/72/j/o0579030414070148781.jpg" width="579"></a></p>
あ、「プレビュー」画面では事前にチェックできませんので、あしからず^^;
<追記>
この記事では、特定の画像に指定する場合のことを書きましたが、
記事内全部の画像を拡大するのであれば、次のCSSコードになります。
●プロフィール画像が四角いデザインの場合
.skinArticle img:hover {
transform: scale(1.15,1.15);
}
●プロフィール画像が丸いデザインの場合
.skin-entryBody img:hover {
transform: scale(1.15,1.15);
}
以上、アメブロ便利技でした。
1年振りの東京ライブになります。
日時:11月17日(金)18:30 Open、19:00 Start
場所:Leaf room豪徳寺
東京都世田谷区豪徳寺1-23-12
コンフォート豪徳寺3F
(小田急線「豪徳寺駅」より徒歩2分)
TEL050-1369-5567
ライブチャージ:2,500円(税込)(ドリンク代別)
お申し込みはこちらから
LIDS札幌・ライフデザインスクール
川上 雄大