アメブロCSSでマウスオーバー画像拡大　フリープラグイン(スクリプト)不要

アメーバブログ(以後アメブロ)は、現在SSL接続へ移行している最中です

それによって、今後はアメーバが指定した企業以外のプラグイン(スクリプト)が使えなくなります

詳細【常時SSL化以降、ご利用可能なプラグインについて】

さまざまな企業が提供しているブログパーツ、アメブロガーさんたちが個人で作成したプラグイン(常時メッセージボード表示や、コメント欄ピグ表示)などが使えなくなります

ティナが困るのが、画像にマウスを重ねる(マウスオーバー)と、画像が拡大するプラグインが使えなくなること

ティナはブログ記事で、それなりに画像を多用しています
　しかし、大きな画像は記事の面積を取るので、画像の貼り付けサイズを小さくしています

あとは読者さんがよく見たい画像があれば、画像にマウスオーバーして、拡大した画像を見る
という感じがベストと思い、クリックなしで画像拡大できるプラグインを入れてるわけですね

そんなわけで、SSL化でプラグインが使えなくなったあとも、画像拡大できないかなと思い、少し対処方法を考えてみました

【アメブロのカスタマイズできるデザイン】

アメブロのデザインのうち、「CSS編集用デザイン」のみが対象です

　「CSS編集用デザイン」以外は、これから説明するカスタマイズはできません

デザインの変更ページで、現在の適用中のデザインを確認

上のデザインのように「CSS編集用デザイン」以外の場合は、これから説明するカスタマイズはできません

「CSS編集用デザイン」の選び方

デザインの変更ページから、「カスタム可能」リンクをクリック

カスタム可能デザインから、いくつかある「CSS編集用デザイン」を選ぶ

CSS編集用デザインを選び、カラム設定を確認後、「適用する」ボタンでCSS編集用デザインになり、カスタマイズ可能になります

【画像サイズを元画像のサイズに拡大】

　このCSSコードをコピーして、CSSファイルの最後に貼り付けて保存
　これで、ブログ記事内の画像にマウスオーバー(カーソルを重ねる)と、サムネイル(縮小画像)が、元画像のサイズ(原寸大)になります

★見栄えを整える
　それだけだと、画像にカーソル(ポインター)を乗せると、手の形に変わります

　それだけでなく「拡大する」のフキダシ画像もジャマになります

これらが気になる場合は、下記のコードを使います

【手順1　画像拡大CSSをコピー】

下記のコピペ用コードをコピーします コードの文頭から、全行(11行分)ドラッグして、コピー(右クリックからコピー)

★cssコピペ用コード

【手順2　画像拡大CSSを貼り付け】

コピーしたコードを、CSSファイルの一番最後にペースト(右クリックから貼り付けを選ぶ)

⇒ ブログのCSSファイルにアクセス

※設定しているブログデザインが、カスタム用でない場合は、CSSを変更できません

参考画像　このようにコピーしたコードをペースト(貼り付け)

※ペースト後、CSSファイルの保存ボタンを押すのを忘れずに

【手順3　画像拡大の確認】

CSSファイル保存後、自分のブログにアクセス
　CSS変更前のキャッシュが残っていると、CSSの変更が反映されないので、ブラウザをリロード(キャッシュの上書き)

自分のブログの画像にマウスを重ねてみて、画像のサイズが元画像のサイズになればOK

参考　拡大前（カーソルを乗せる前）

参考　拡大・実寸化

インターネットキャッシュが容量上限に近いと、リロードしてもCSSが切り替わらない場合もあります

自分のブログ記事内の画像にマウスを乗せて、画像サイズが変わらない場合は、キャッシュを削除してみてください

※Cookie ・クッキー(パスワードやIDをブラウザに保存しているファイル) は、消さないでOKです

ちなみに、CSSで画像拡大する方法は、他にもいくつもあります

スムーズに拡大したり、サイズを変えずにズームアップしたりと、いろいろな効果を付けることもできます

しかしアメブロで使えること(フリープラグインが使えなくなる)だけでなく、CSSの用語や意味(セレクタやid、クラスなど)分からない初心者も多いでしょう

ティナ自身がCSSに詳しくなく、ネットで情報を得るくらいで、習ったりCSS関連の本を見たこともありません

そんなわけで、CSSを殆ど知らなくてもできることや、複雑なコードを紹介して質問されても答えられないなどの理由から、今回は簡単なコードを紹介することにしました

大丈夫だとは思いますが、不都合が起きた場合は、CSSに追加したコードを削除して保存しなおしてください

紹介したコードを使ってみて、成功でもダメでも、感想などをコメントいただけると嬉しいです