写真の表示など

写真表示など

　改めて説明するまでもないことかも知れませんが、ここでは、写真や枠の左右・中央寄せや、拡大表示をするやり方などを簡単に説明しておきます。

要素の、左右・中央寄せなど

　写真ようなものや、アフィリエイトリンク、表などのブロックの横に文字を回り込ませたり、中央寄せしたりするときの考え方は、QHMの場合と同じです。
　「独自CSSやJavascript追加」のやり方で、cssに下のようなクラスの定義を加えておきます。

.right{
  float:right;
}
.left{
  float:left;
}
.center{
  display: table;
  margin:0 auto;
}
.clear{
  clear:both;
}

　これを使う時は、例えば、

<div class="right">
　(ここに画像リンクを挿入)
</div>

のように記述します。

回り込みの解除

　画像や枠の横の文字が少なく、次にまた画像が来る場合などは、回り込み指定のまま解除をしないでおくと、表示がおかしくなります。そのような場合は、回り込みを解除しておかなければなりません。
　回り込みの解除は、上で css にクラスを指定してあるので、回り込みを解除させたいタグのところで、clearクラスを追加で指定します。
　下の例では、青枠を指定するところで、clearクラスも追加しています。

<div class="bluebox clear">
　（内容）
</div>

写真を拡大表示できるようにする

　色々なページを見ていると、左の写真のように、縮小画像をクリックすると、拡大した画像が表示されるようなものがよくあります。

<div class="left">
<a href="https://www.neko01.com/pc/AccordeonMenuCK4-m.jpg" target="_blank"><img src="https://www.neko01.com/pc/AccordeonMenuCK4-ss.jpg" border=0 alt="クリックすると拡大画像を表示します" /></a>
</div>

　前が拡大表示画像、後ろが縮小画像です。
　このように、縮小画像に対して、拡大へのリンクを貼ります。この縮小画像の作り方についてはリンクを参考にしてください。
　私はいつも、以前使ったこのような記述をコピーして、アドレスだけを変えて使いまわしています。

写真を加工する

　いらぬ余白を取り除いたり、ホームページ用にファイルサイズ・大きさを縮小したりするツールとその使い方についてはリンクを見てください。

パソコン画面の写真

　上の拡大する写真のように、パソコンの画面を表示しているページを、よく見受けます。これを作るには、表示したい画面が出ているときに、キーボード右上の、[Print Screen]ボタンを押します。
　これで、パソコンのクリップボード（バッファー）に画像がコピーされているので、PHOTOSHOPなどを使って、「ﾌｧｲﾙ>新規>ｸﾘｯﾌﾟﾎﾞｰﾄﾞからの画像」で、読み込みます。
　この画像には、表示したくないパソコン画面の上下などが含まれていますから、これらを「ｲﾒｰｼﾞ>切り抜き」で、必要部分だけにカットしてjpgで保存します。