最近の記事・締切・開催中の催しをチェック
画像サイズを元画像のサイズに拡大用のカスタマイズ
記事内の画像にマウスカーソルを当てる
（マウスオーバーする）と、
画像を元の大きさまで拡大して表示
このカスタマイズは、
アメブロ第3世代のカスタマイズ方法です
（自分のアメブロデザイン世代の確認は後述）
- 画像拡大効果は、ブログ記事内のみ
- 画像が元サイズより小さい場合に、元画像サイズまで拡大
（サムネイルと画像の元サイズが同じ場合は拡大しない） - 画像がリンク付き、リンク無しに関わらず拡大
- アメブロにアップしている画像は、最大横幅800pxまで拡大
- 記事幅が元画像のサイズより狭い場合は、記事枠を超えて画像を表示
- 画像をクリックしても画面変移を防止
- 画像がリンク付き、リンク無しに関わらず拡大(最大横幅800pxまで)
- リンク付き画像のマウスオーバー時の光り（透過）を防止
- 旧デザイン（第二世代デザイン）用コードはこちら
- 旧(第二世代)デザイン画像拡大
記事執筆時の注意
元サイズが大きな画像は、横に並べないように注意
複数の画像が並んでいると、
画像をマウスオーバーで拡大時したときに、
一列に画像が収まり切らないために、
カラム落ちや表示がブレてしまいます
参考 横幅の大きな画像を横に並べた例
右側の画像にマウス―バーすると、表示がブレます
悪い例 大きな画像を横に並べる
大きな画像は、下記のように、改行して並べること
自分の使っているブログデザインの世代を確認
第1世代～第2世代のデザインは、
下記のカスタマイズはできません
- 自分のアメブロの世代を確認リンク
CSS編集用デザインか、通常デザインか確認
上記のブログデザイン各世代ごとに、
カスタム用に特化した「CSS編集用デザイン」と、
それ以外の通常デザイン（ブログスキンとセット）があります
「CSS編集デザイン」か、通常のデザインかで、
カスタマイズ用のコードの書き方が変わります
カスタマイズのコードは、
CSSファイル、フリースペース、フリープラグイン、
書く場所によって、多少記述方法が変わりますが、
この3ヶ所のうち、1ヶ所に書けばOK
アメブロ第三世代 CSS編集用デザインの場合のコード
※コードはご自由にご利用ください（許可不要）
※コードの無断転載はご遠慮ください
紹介したい場合は、リブログやリンクでお願いします
/*画像クリックしてもページを切り替えない 不要なら削除 */
.skin-entryBody a:focus img{
pointer-events: none; /* リンク付き画像のクリック無効 */
}
/* 画像にマウスオーバー時の設定 */
.skin-entryBody img:hover{
position: relative;
width: auto;
height: auto;
cursor: default; /* カーソルの形を変えない */
max-width: 800px; /* 拡大時に記事枠を超えて表示する横幅 */
z-index: 999; /* 拡大画像をサイドバーより優先で表示*/
}
/* リンク付き画像マウスオーバー時の光り防止 */
.skin-entryBody a:hover{
opacity: 1.0;
}
注意点
※コピーするときに「.」「;」「{」「}」などの記号や文字が抜け無いように
文字列すべての行をドラッグして色反転させて、
キーボードの「Ctrl」キーを押しながら「C」キーを押してコピー
または、全文字列をドラッグ（色反転）後、
右クリックして、コピーを選ぶ
このCSSコードをコピーして、
CSSファイルの最後に貼り付けて保存
※テキストエディタによっては、コピーした文字列が、文字化けする場合もあるので、コピー後の文字をよく確認！
CSSファイルの最後に貼り付け
コードをフリープラグインや、フリースペース、
メッセージボードやプロフィールなど、
CSSファイル以外に貼り付けても、効果ありません
- CSSファイルのリンク（アメーバにログインが必要
※設定しているブログデザインが、
カスタム用でない場合は、CSSファイルにアクセスできません
これで、ブログ記事内の画像に、
マウスオーバー・ロールオーバー(カーソルを重ねる)すると、
サムネイル(縮小画像)が、元画像のサイズ(原寸大・最大で横幅800px)になります
アメブロ第三世代 カスタム用デザイン以外でカスタマイズ
CSS編集用デザインでなくても、
第三世代デザインなら、カスタマイズはできます
カスタマイズのコードは、
CSSファイル、フリースペース、フリープラグイン、
書く場所によって、多少記述方法が変わりますが、
この3ヶ所のうち、1ヶ所に書けばOK
フリースペースに記述する場合
下記を改行しないで、コピーして一行で書き加えます
(文字数制限を減らすために、指定コメントなどを消しています)
<style>.skin-entryBody a:focus img{pointer-events:none;} .skin-entryBody img:hover{position:relative; width:auto; height:auto; cursor:default; max-width:800px; z-index:999;} .skin-entryBody a:hover{opacity: 1.0;}</style>
コピー後、フリースペースに貼り付け、保存
（ブログのサイドバーにフリースペースの設置が必要）
注意点
※コピーするときに「.」「;」「{」「}」などの記号や文字が抜け無いように
文字列すべての行をドラッグして色反転させて、
キーボードの「Ctrl」キーを押しながら「C」キーを押してコピー
または、全文字列をドラッグ（色反転）後、
右クリックして、コピーを選ぶ
フリープラグインや各ブログページに記述する場合
フリースペースと同様に、
改行なしで1行で書いても良いですが、
見た目を整理したい場合は下記のように
<style>
.skin-entryBody a:focus img{
pointer-events:none;
}
.skin-entryBody img:hover{
position:relative;
width:auto;
height:auto;
cursor:default;
max-width:800px;
z-index: 999;
}
.skin-entryBody a:hover{
opacity:1.0;
}
</style>
注意点
※コピーするときに「.」「;」「{」「}」などの記号や文字が抜け無いように
文字列すべての行をドラッグして色反転させて、
キーボードの「Ctrl」キーを押しながら「C」キーを押してコピー
または、全文字列をドラッグ（色反転）後、
右クリックして、コピーを選ぶ
コピー後、フリープラグインに貼り付け、保存
（フリープラグインは、ブログのサイドバーに設置が必要）
対応ブラウザ・画像拡大の確認
カスタマイズが反映されて見えない場合もあります
コード追加後、自分のブログにアクセス
キャッシュが残っていると、
カスタマイズが反映されないので、
ブラウザをリロード(キャッシュの上書き)
自分のブログの画像にマウスを重ねてみて、
画像のサイズが元画像のサイズになればOK
アメブロ側の仕様変更で使えなくなる場合も
アメブロは運営側で、仕様変更が多々行われています
そのため、このカスタマイズに限らず、
今まで出来ていたものが、
ある日から突然できなくなる場合もあります
カスタマイズに伴う不具合が発生した場合は、
カスタムコードを消して保存すれば問題ないですが
もし修正が必要になったときは、
ブログ1記事ごとにコードを書いていると、
各記事ごとに修正が必要なので、大変面倒です
コードを使う場合は、CSSファイル、
フリースペース、フリープラグインの、
いずれかの場所に書いておくのが良いです
アメーバ外サービスの画像を使う場合の注意
アメーバ外ブログサービスの画像は、
リンクと画像の構成がアメーバと違う場合、
マウスオーバーで拡大できない場合があります
リンク先が大きな画像で、サムネイルが小さい画像の場合です
アメーバ外サービスの場合は、
リンク先の画像が大きいため、画像拡大にクリックが必須
一方、現行のアメーバブログエディタで、
記事内に画像を挿入した場合は、
貼り付けサイズが小さい表示でも、
画像の元サイズを保持しています
そのためアメブロ内では、
リンク先の画像の参照は不要（クリック不要）
なので、アメーバ外の画像が多い場合は、
記事内の画像リンク無効のコードを入れた場合、
アメーバ外の画像をクリックして拡大できなくなるので注意
外部画像で拡大に画像クリックが必須の場合は、
コードから下記の部分を削除
/*画像クリックしてもページを切り替えない 不要なら削除 */
.skin-entryBody a:focus img{
pointer-events: none; /* リンク付き画像のクリック無効 */
}
アメブロの画像にマウスオーバーで拡大できない原因
当ページのコードは、実サイズが大きくても、
記事内で小さく表示しているサムネイル画像を、
実サイズで表示するためのものです
サムネイル画像の実サイズが小さい場合は、
もともと小さいので、拡大しません
現行のアメブロエディタでの画像貼り付け時は、
元々の画像サイズを加工せずに、
記事内で見本画像（サムネイル）を小さく見せているだけです
サムネイル画像が小さく見えても、
実サイズは大きい場合は、
マウスオーバーで実サイズに拡大表示されます
ところが、昔のアメブロエディターは、
現行のエディタと少し勝手が違っていました
昔のエディタでの画像の貼り付け時は、
元の画像サイズを小さく見せるだけでなく、
縮小表示用のサムネイル画像が、わざわざ作られます
その小さなサムネイル画像のリンク先が、
実サイズ画像になっていました
つまり、昔のアメブロエディタで貼り付けた画像は、
記事内の実サイズの画像自体が小さいために、
マウスオーバーしても拡大しません
当コードは、あくまでも現行のアメブロエディタで、
貼り付けた画像を実サイズに表示するもの、
と思って使うと良いでしょう
現行のアメブロ（プラグイン使用不可）では、
画像のタイプによって、拡大表示できません
昔のアメブロエディタで貼り付けた画像を、
クリックできるようにしておく場合は、
上記の他ブログサービスの画像の例と同様
画像クリックが必須の場合は、
コードから該当の部分（前述）を削除