フリーエリアに置いた写真にリンクを張る
このブログを始めた当初から、サイドバーの中に、例えば自転車のパーツの写真を載せて、それにリンクを張って、みたいなことをやりたいって思っていました。
最初の頃は色々とやり方を探したりしたのですが、どうやら私の知識ではとても無理そうに思えて来たので、その時は諦めていたのです。
ところが少し前に、カテゴリ内の目次を作ってどこかに置いておきたいなって思い、模索している中で FC2 には「フリーエリア」というプラグインがあることを知りました。
で、早速、このフリーエリアを使って、サイドバー内に「目次の目次」を設置することができました。
やり方を調べていく中で、フリーエリア内に写真を置いて、そこにリンクを張るのも簡単に出来そうと分かり、これを利用して、当初からの目論見であった上で書いたようなことをやってみようと思いチャレンジしてみました。
こんな感じで、横に並ばずに縦になってしまうんです。
もちろん、「align="left"」として、上記の通りスペースも 300px で、120px の写真が2枚並ぶには十分な筈なのですが。
原因は、写真の周りに設定してある “余白” の設定です。記事内の全ての写真（イメージ）の周囲には、左右 15px の余白を取るように設定してあります。
普通に表示すると、こんな感じになります。
この2枚の写真の間のスペースが、「15px＋15px＝30px」の余白です。
大元の設定を、そこだけ元に戻す「clear」みたいな html タグはないかとか探したり、画像の左右に余白を設ける「hspace="0"」という属性を追加したり、更に「0」のでなく、「-10」なんてのを入れたり (^_^;) したのですが、ダメでした。
3日ほど悩んだ末に辿りついたのが、目的とする画像に CSS の margin で余白を改めて指定してあげることでした。
具体的には、こんな感じ。（実際には、「style="margin:0;"」で OK なんですが)
その結果が、これです。
どうでしょうか、画像同士の隙間が無くなりました。
うん？ 写真の下に余白ができています。もしかしたら、未だに理解していない padding の影響とかでしょうか？ うーん、分からない。
更に色々と方法を探していたら、css の float というのを見つけました。説明によると、「float は浮くということだから、float を掛けたものは他のタグから独立して、宙に浮いている状態になる」とのことです。
「独立して、宙に浮いている」ってことは・・・・・使えるかも。
ってことで、margin の後ろに float:left を加えてみました。
どうでしょうか。見事に写真の周りの余白が全て消えました。なんか使い方を間違っていそうな気がしますが、表れている結果は望み通りなので、これで良しとしましょう（なので、もしも参考にする方がいましたら、自己責任でお願いしますね）。
出来あがったソースコードを、サイドバーに置くフリーエリアの編集画面の「フリースエリアの内容」にコピペして完成です。
ソースコード
因みに、表の中の表示位置は、「セルのプロパティ」で「セル横の整列：中央」、「セル縦の整列：上」としてあります。
取り敢えず完成だけど、出来ればコメントの行間をもう少し狭めたいな。
最初の頃は色々とやり方を探したりしたのですが、どうやら私の知識ではとても無理そうに思えて来たので、その時は諦めていたのです。
ところが少し前に、カテゴリ内の目次を作ってどこかに置いておきたいなって思い、模索している中で FC2 には「フリーエリア」というプラグインがあることを知りました。
で、早速、このフリーエリアを使って、サイドバー内に「目次の目次」を設置することができました。
やり方を調べていく中で、フリーエリア内に写真を置いて、そこにリンクを張るのも簡単に出来そうと分かり、これを利用して、当初からの目論見であった上で書いたようなことをやってみようと思いチャレンジしてみました。
写真の周りの余白が邪魔で、2枚の写真を横に並べて置けない
写真を置いて、リンクを張るのまでは簡単に出来ました。このブログのサイドバー（右カラム）の幅は、300px なので、横に2枚並べるとして、1枚の画像の大きさを「120×90」としてやってみたのですが。こんな感じで、横に並ばずに縦になってしまうんです。もちろん、「align="left"」として、上記の通りスペースも 300px で、120px の写真が2枚並ぶには十分な筈なのですが。
原因は、写真の周りに設定してある “余白” の設定です。記事内の全ての写真（イメージ）の周囲には、左右 15px の余白を取るように設定してあります。
普通に表示すると、こんな感じになります。
この2枚の写真の間のスペースが、「15px＋15px＝30px」の余白です。
CSS の margin を使って、大元の設定に手を加えずに個別に余白を設定する
といって、この大元の設定を変更するわけにはいかないので、サイドバーに表示する写真だけ、その周りの余白を "0" にすべく、いろいろと調べながら試行錯誤したのですが・・・・・。大元の設定を、そこだけ元に戻す「clear」みたいな html タグはないかとか探したり、画像の左右に余白を設ける「hspace="0"」という属性を追加したり、更に「0」のでなく、「-10」なんてのを入れたり (^_^;) したのですが、ダメでした。
3日ほど悩んだ末に辿りついたのが、目的とする画像に CSS の margin で余白を改めて指定してあげることでした。
具体的には、こんな感じ。（実際には、「style="margin:0;"」で OK なんですが)
その結果が、これです。
どうでしょうか、画像同士の隙間が無くなりました。
表に入れてみると、写真下に不要な余白が現れて
せっかくなので、それぞれの写真を “表” の中に入れてみました。 | |
うん？ 写真の下に余白ができています。もしかしたら、未だに理解していない padding の影響とかでしょうか？ うーん、分からない。
更に色々と方法を探していたら、css の float というのを見つけました。説明によると、「float は浮くということだから、float を掛けたものは他のタグから独立して、宙に浮いている状態になる」とのことです。
「独立して、宙に浮いている」ってことは・・・・・使えるかも。
ってことで、margin の後ろに float:left を加えてみました。
| |
どうでしょうか。見事に写真の周りの余白が全て消えました。なんか使い方を間違っていそうな気がしますが、表れている結果は望み通りなので、これで良しとしましょう（なので、もしも参考にする方がいましたら、自己責任でお願いしますね）。
見栄えを良くしてリンクを張って
最後の仕上げ。- 写真の周りに少し余白を入れ
- バックグラウンドに色を付け
- 写真の下にコメントを入れ
- 写真の元のページにリンクを張る
| 二段になるような長いコメントを書いてみる | 短めのコメント |
出来あがったソースコードを、サイドバーに置くフリーエリアの編集画面の「フリースエリアの内容」にコピペして完成です。
ソースコード
因みに、表の中の表示位置は、「セルのプロパティ」で「セル横の整列：中央」、「セル縦の整列：上」としてあります。
取り敢えず完成だけど、出来ればコメントの行間をもう少し狭めたいな。
- 関連記事
