💎FC2、画像添付のHTMLコードを理解する

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

💎FC2、画像添付のHTMLコードを理解する

FC2で画像を貼る際には、画像マークをポチッとして、ウィーザードに従えばよいだけなので、とても簡単。

貼るのは簡単だけど、HTMLコードには不慣れなので、サイズを変えたりするのはちょっぴり苦手。

FC2ブログでの画像添付のHTMLコードの構造について、深堀してみました。

サムネイルを使う

サムネイルを使うと、画像ファイルのサイズが軽くなった状態で貼り付けができるようです。

ダウンロードファイルサイズやページを開く速度に影響しそうですから、出来るだけサムネイルを使って貼り付けるのがユーザーフレンドリーでしょうね。

画像をアップロードするときに、サムネイルの横幅と縦幅をピクセルで指定できます。

サムネイルの幅を決める

数値が小さい方に合わせるみたいなので、私は縦幅は適当に大きな数字を入れておいて、横幅でサムネイルのサイズを決めています。

FC2ウィザードのHTMLコードを理解する

まず、サムネイルを使って、画像を貼ってみると、こんな感じ↓

Frostyな朝

HTMLコードは、下記のようになります。

<a href="https://blog-imgs-85.fc2.com/l/a/g/laggy2015/20151124053149c49.jpg" target="_blank"><img src="https://blog-imgs-85.fc2.com/l/a/g/laggy2015/20151124053149c49s.jpg" alt="Frostyな朝" border="0" width="360" height="270" /></a>

ここで出てくるHTML要素は2つ。<a></a>と<img />です。

a要素(アンカー)はリンクを作る要素です。リンク先はhref=""にて指定されています。img要素(画像)を挟んで丸ごとリンクを貼っています。<a></a>の部分を削除すると、どこにもリンクしない画像になります。リンクについては「FC2、ブログにリンクを貼る」に書きましたので、そちらをご覧くださいませ。

そしてa要素の中にパカっと埋まっているimg要素を細かく見ると下記のようになります。

  • src属性は、Address of the resourceという事で、画像ファイルの参照元です。a要素で同じアドレスにリンクを貼っていますので、ポチッとするとこのページに遷移します。
  • alt属性は、画像が表示できない時に差し替えに使う言葉です。
  • border属性は、枠線です。ウィザードでborder="0"(つまり"線なし")が指定されます。しかし、これは最新の記述方法では、装飾的な属性なのでCSSで追加するようにと勧められます。
  • width属性は画像の幅。画像をアップロードするときに指定できます。私は本文に貼り付けてから修正していますケド。
  • height属性は画像の高さ。同上。

記事内での画像の大きさを変更する

最初はサイズの変更の仕方を知らなくて、取り込みサイズ自体を大きくしたり、小さくしたりと面倒なことをしていたのですが、実は本文に貼り付けた後に調整できたのでした…

しかも、かなり簡単に…

まずサイズを大きくしたいときは、width=""の数値を大きくし、height=""の部分を削除します。例えば…

<a href="https://blog-imgs-85.fc2.com/l/a/g/laggy2015/20151124053149c49.jpg" target="_blank"><img src="https://blog-imgs-85.fc2.com/l/a/g/laggy2015/20151124053149c49s.jpg" alt="Frostyな朝、大き目" width="500" /></a>

Frostyな朝、大き目

小さくしたいなら逆にwidth=""の数値を小さくし、height=""の部分を削除します。↓

<a href="https://blog-imgs-85.fc2.com/l/a/g/laggy2015/20151124053149c49.jpg" target="_blank"><img src="https://blog-imgs-85.fc2.com/l/a/g/laggy2015/20151124053149c49s.jpg" alt="Frostyな朝、小さめ" width="150" /></a>

Frostyな朝、小さめ

変えられるのはブログ記事の中での表示サイズなので、画像が荒い時には、やはり取り込み直さないといけないのですが、ちょちょいと変えて、適当なサイズにできるので、作業スピードが早くなりました。

Comment

コメントを投稿する
記事: 💎FC2、画像添付のHTMLコードを理解する

お気軽にコメントをどうぞ~。

  非公開 (管理人のみ閲覧可能)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。