Recent Entries

スポンサーサイト

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

FC2ブログの画像挿入でwidthとheightが付くようになったよ。

FC2ブログで記事内に画像を挿入する時のimg要素にwidht(幅)とheight(高さ)が追加されるようになりましたね。私は特に投稿設定などは弄ってないのでFC2ブログの仕様が変わったんですよね?
というよりも私の知る限りでは挿入する画像にこのような設定するところも無いです。

img要素のwidth属性とheight属性

何のこっちゃわからないと困るので一応例を書いてみます。
[ファイル挿入]ボタンで画像を挿入すると以下のようなタグが記事欄に記述されます。

<a href="http://blog-imgs-24.fc2.com/m/i/r/miracleblues/mangrove-world.png" target="_blank">
<img src="http://blog-imgs-24.fc2.com/m/i/r/miracleblues/mangrove-world.png" alt="mangrove-world.png" border="0" width="550" height="302" /></a>

画像がaタグでリンクされているのは、私が自分で行っている設定です。
[各種設定]-[投稿設定]-[画像のリンク]-[画像を記事に挿入する際に「元画像にリンクさせて」挿入]。
※slimboxで画像演出する際に使うのです。

また、border="0"は画像の枠を消す為の属性です。
まぁこれは付けてくれて全然構わないんだけど。大助かりな方もたくさんいそうだし。

コードに「width="550" height="302"」という部分があると思います。
これが今回新たに追加されたimg要素のwidth、height属性です。
画像のサイズを明示的に書いてます。別に無くても画像はちゃんと表示されます。
※かなり古いブラウザでは表示されない事があった・・・。

私はいつもこのタグはつけません。
キャプチャした画像のサイズを確認するのが面倒な為・・・。
大体は横幅のみ把握しているという感じです(;´Д`)
(少し小さめの画像にする時もwidthのみ指定します。)

widthやheightを付けるメリットある?

まぁ別にあっても無くても良いのですが、何故にして今頃追加したのでしょう?
古いブラウザへの配慮でしょうか。今更な感じがしますねぇ。
HTML4.01やXHTML1.0のtransitional(うち)、strictも、このwidthやheightに関しては任意だそうですよ。

メリット
画像スペースを確保する為レンダリングがスムースになる事。
でも、これって体感できるレベルの事なんでしょうか。よくわかりませんねぇ。

デメリット
記述が面倒なところやサイズ違いの画像を差し替える際にwidthやheightを書きなおさなきゃならないなど。今回のFC2ブログの件に関して言えば、記述が面倒だという点はクリアしてますが・・・。

画像にwidthやheightを指定するならやっぱCSSかっ!
と一瞬思ったりもしますが、個別に指定したのではCSSがえらいこっちゃですね。
さぁどうしたものか。とりあえず付けたまんまで行きますか!
どうせなら付けたり外したり出来るという選択肢がほしいなぁ。

スポンサーサイト

FC2ブログのページ移動関連の変数っておかしくないかい?

FC2ブログのページ移動関連の変数についてのお話です。
前のページや次のページに移動するリンク(ページ移動変数)に関しての変数が非常に紛らわしいので記事にします。まぁ、今更な感じですが良かったらついでに変数も覚えていってください。。

FC2ブログのページ移動関連の変数とは?

まずはじめにFC2の変数をまったく知らない方の為に簡単に説明します。
詳しくはテンプレート用 変数一覧|FC2ブログ公式マニュアルの「ページ移動関連の変数」を参照してください。

<!--nextentry--> ~ <!--/nextentry-->

表示中のエントリより、一件以後のエントリ情報を表示させるブロック変数と書かれてます。
でも、実際は前に投稿したページ(古いページ)が表示されるブロック。

<!--nextentry--> ~ <!--/nextentry-->内で有効な単変数

  • <%nextentry_url> : URLを表示
  • <%nextentry_title> : タイトルを表示
<!--preventry--> ~ <!--/preventry-->

表示中のエントリより、一件以前のエントリ情報を表示させるブロック変数と書かれてます。
でも、実際は後に投稿したページ(新しいページ)が表示されるブロック。

<!--preventry--> ~ <!--/preventry-->内で有効な単変数

  • <%preventry_url> : URLを表示
  • <%preventry_title> :タイトルを表示
<!--nextpage--> ~ <!--/nextpage-->

表示中のページより、一件以後のページを表示させるブロック

  • <%nextpage_url> : URLを表示
<!--prevpage--> ~ <!--/prevpage-->

表示中のページより、一件以前のページを表示させるブロック

  • <%prevpage_url> : URLを表示

ブロック変数はエントリやコメントなど各エリアを表示させる為の変数です。
単変数はブロック変数の中で有効になる変数です。
テンプレート内に配置された変数はそれぞれの意味を実際のhtmlに書き出します。

nextentryとpreventryが逆じゃないかい?

このページ移動に関する変数を使うと次と前が反対になっていると思うのですが…。
頭がパニックになります。
http://miracleblues.blog46.fc2.com/blog-entry-305.html(新しいページ)
http://miracleblues.blog46.fc2.com/blog-entry-304.html(基準ページ)
http://miracleblues.blog46.fc2.com/blog-entry-303.html(古いページ)とします。

テンプレートのページナビ部分に以下のように記述したとします。

<ul>
<!--preventry--><li>Previous Entry : <a href="<%preventry_url>"><%preventry_title></a></li><!--/preventry-->
<!--nextentry--><li>Next Entry : <a href="<%nextentry_url>"><%nextentry_title></a></li><!--/nextentry-->
</ul>

Previous Entryにはひとつ前のエントリーへのリンクを表示するつもり。
Next Entryには、次のエントリーへのリンクを表示するつもり。

基準ページ(blog-entry-304.html)を見てみます。
変数の説明通りだとPrevious Entryにはblog-entry-303.htmlがリンクされ、Next Entryにはblog-entry-305.htmlがリンクされるはずなんですが、実際はその逆になってます。

Previous Entryにblog-entry-305.htmlがリンクされます。
Next Entryにblog-entry-303.htmlがリンクされます。
基準ページから考えれば表示するエントリが逆じゃないですかね?
nextentryが古い方ってのがあり得ないんですけど…。

正しく書くとこうなります。

「Next Entry」に新しいページ(blog-entry-305.html)をリンクします。 「Previous Entry」に古いページ(blog-entry-303.html)をリンクします。 このように書き出すには以下のように記述します。

<ul>
<!--nextentry--><li>Previous Entry : <a href="<%nextentry_url>"><%nextentry_title></a></li><!--/nextentry-->
<!--preventry--><li>Next Entry : <a href="<%preventry_url>"><%preventry_title></a></li><!--/preventry-->
</ul>

nextとprevという文字があるだけに、何だか紛らわしい。
まぁ、前と次という日本語も曖昧な部分があるかもしれませんが・・・。
私の考えでは、基本的に「前のページ(prev)」といった場合は古いページで、「次のページ(next)」といった場合は新しいページだと思います。
また、変数の説明の「以前」と「以後」もめちゃくちゃな気がします。

なんでそんな書き方なんだろって不思議に思います。
一般的にブログの利用方法が常にTopページ(新しいページ)から戻っていくような形をとる事が多いからでしょうか。
だとしたら、変数の名前にnextやprevを使わずに、newやoldの方がわかりやすいですね(*´д`*)

というわけで、変数の名前を見てnextentryだから次のエントリ、preventryだから、「前のエントリ」だと思って使わないようにしましょう!