|
熱血ネタがないから、思いつきでｗ
何かすごい久しぶりのブログデザインカテゴリーｗ
ブログ本文に画像を挿入した場合、あるサイズを超えると自動で縮小されるのは、以前［記事内の画像サイズについて］や［続・記事内の画像サイズについて］で書きましたが、その記事でも書いたとおりHTML編集で［ id ］と［ name ］の記述を削除することで、縮小させずに表示することが出来ました。
しかし、ブログのレイアウトを崩さずに表示できる最大幅が、2カラムの場合650px、3カラムの場合419px までで、それ以上の幅の画像はレイアウトが崩れてしまいます。
ゲームのSS等、最大幅を前述のサイズに合わせた場合、文字などがつぶれて肝心な部分が分からない何てことも。
添付ファイルとして記事に添付したり、フォトとして投稿したりして、そちらを見てもらうと言うのももちろんアリですが、複数の画像を連続して説明したい場合等では、「これが添付画像の一番目で・・・」とか説明入れないと、どれがどの画像か分かりませんよね？
そこで今回は、本文に表示される画像は縮小表示のままで、画像をクリックすると元のサイズで表示されるようにする方法をご紹介します。
まず、普通に本文に画像を挿入し、記事を一通り書いてしまいます。
ここで投稿して記事を保存するわけですが、保存後に修正を行うので、公開レベルを［非公開］にしておきましょう。
次に投稿した記事の［修正］ボタンを押して編集ページに入り、［HTML］ボタンを押してHTML編集モードにします。
HTML編集モードにすると、挿入した画像の部分が以下のようになっていると思います。
<P><IMG id=photo_img7 name=photo_img7 src="画像のURL"></P>
この部分を以下のように書き換えます。
<P><a href="画像のURL" target="_self">
<IMG id=photo_img7 name=photo_img7 src="画像のURL" alt="クリックで拡大">
</a></P>
<a href=・・・ >〜</a>はHTMLのハイパーリンクで、メニューにある［リンク］ボタンと同じものです。
つまり、縮小画像に同じ画像へのリンクを貼ったわけです。
target= で指定しているのはそのリンクをどう開くかを指定するもので、上記で指定している［_self］はいま開いている同じウインドウで開くと言う意味です。target= に何も指定しなかったり、target= 自体を書かない場合も［_self］と同じ扱いになります。
もし、ブログ自体はそのままで別のウインドウ（または別のタブ）で開きたい場合は、［_self］では無く［_blank］と記述します。
※実際はブラウザの設定により動作が異なります。
上記ではIMGタグに alt= を追加していますが、これは元々は画像の代替テキストなんですが、画像の上にカーソルを持っていくと、そこに記述したテキストを表示してくれるので、「クリックしたら拡大されますよ」みたいな説明にも使用できます。
ただ、最近のブラウザ（IE7以降も）は標準では代替テキストを表示しない設定になっている場合も多く、代替テキストではなく、本文にちゃんと書いておいたほうが良いかもしれません＾＾；
書き換えが終了したら、もう一度［HTML］ボタンを押して通常編集モードにして、［確認］ボタンで投稿すれば終わりです。
このとき公開レベルを解除するのを忘れずに(｡´・ω-)bネッ
最後に、画像のHTMLを編集する場合は、必ず一度投稿してから編集するようにしてください。
以前の記事でも書いたとおり、id や name は一旦投稿しないと挿入されず、画像のURLも仮のものとなるので、そのまま編集してしまうと、正常に画像が読み込めなくなる場合があります。
|
ゲーム
