FC2ブログ【画像の枠】設定が追加されました

【ブログ】 画像の枠の設定を追加しました。

平素は、FC2(fc2.com)をご利用いただき、誠にありがとうございます。この度、FC2ブログ(blog.fc2.com)おいて、環境設定に画像の枠の設定を追加しました。

fc2information.blog.fc2.com

borderのカスタマイズ設定ではない

「画像の枠の設定」というとやはり直感的には「簡単カスタマイズ」を予想させてしまうかもしれませんね。FC2ブロガーはそういう感覚は無いかも。旧Yahoo!ブロガーさんには有るかも。

というのはFC2ブログのテンプレートカスタマイズというのはテンプレートのhtml, CSSを編集すればどうとでもなるので、個人設定の中にカスタマイズに関連する項目を作る意味が無いですよね。対してYahoo!ブログはテンプレートのカスタマイズは原則「不可」で、ごく一部分、「ヘッダー画像」であったり「背景色」「文字色」とかその程度しか許可されていないはずです。そしてその変更も「カスタム背景」という名称の 個人設定 として行ってますよね。

FC2ブログではテンプレートの構造や見た目を「個人設定」で気軽に変更、といったことはできないというかしないので、Yahoo!で培われた固定観念を一度壊した方が良いと思います。でないといつまで経っても「FC2ブログは難しい」から抜け出せないと思います ^^;

というわけで今回の「border属性の扱い設定」(が本来の意味です)もやはり説明が必要ではないかと思います。寧ろFC2へお引越しされたユーザーさん向けに。

border属性は廃止されました

今htmlの標準規格が HTML5 に変更されて5年ほど経過しているのですが、html5では border属性は廃止 されています。現在では「使ってはいけない」とされる属性です。

で、FC2ブログはテンプレートが何千もあるわけなんですが、html4.01 あるいは xhtml など、既に規格外になったhtmlで構成されているテンプレートもまだ入手可能な状態なんですね。一度運営の方で思い切って整理したらどうかと思うのだけれど(私が勝手に思ってるだけです)

旧htmlからhtml5に技術移行するにあたり多くの 要素 及び 属性 が廃止されています。その一方で新要素・新属性の追加ももちろんあります。border属性 も廃止された属性のひとつです。html5で制作されているテンプレートでこの属性が書かれていると バリデートエラー (htmlが不正確)というレッテルを貼られることになります。

なのでhtmlやCSSの分野に明るい人などは「border属性をなんとかしてくれ」という要望が前々から有ったんですね。それを受けての今回の改正です。このあたりのweb事情をご存知ない方は「画像の枠… なんのこっちゃ」という感じでしょう。たぶん。

一応このborder属性を使用した時にどうなるかだけ説明しておきます。border="0" というのは文字通り「太さがゼロ」という意味ですからborderは出ません。そもそももうimg周りに勝手にborderが出ることはありませんので不要。

border="5" など数値が指定されている場合、この「5」は太さのことです。border-width が 5 という意味ですね。そして border-style は solid がデフォルトです。border-color は inherit でこれは「継承」を意味します。文字の指定色と同じ色を継承します。

いずれにしろhtml5ではこの廃止属性を利用した装飾は行いません。

border属性でborder装飾

<img src="" alt="" border="2">

CSSでborder装飾

<img src="" alt="" style="border: 1px solid inherit">

imgのborderはCSSで

常に画像に枠を付けたい場合はhtml属性ではなくCSSプロパティで行います。最も推奨される形はCSSをスタイルシートに書くことです。

img {
  border: 数値px スタイル 色;
}

ついでに画像に関する内容は以下のようにしておくと良いですね。

img {
  max-width: 100%; /* 記事から画像がはみ出す人はこのCSSが足りません */
  heigh: auto;
  vertical-align: bottom; /* 画像が縦に並んだ時に隙間が出来る人はこの指定がbottom以外になっています */
}

まとめ

お引越しブロガーさんに「画像がはみ出さないようサイズ調整が大変で〜」という方を時折見かけるんですが、テンプレートの技術が古すぎます。
そういう方は10人中10人がhtml5以前のテンプレートをわざわざ選んでます。最近のテンプレート作者でhtml5以前のバージョンで製作している人は居ませんし、そういう製作者さん方のテンプレートで画像がはみ出すなんて逆に見たこと無い(笑)
つか、はみ出すなら max-width: 100% を追加するだけで解決。

今回border属性については運営の手が入りましたが、他にも廃止要素・廃止属性はたくさんあります。ざっと挙げておきますので使用に心当たりの有る方は早めの修正をおすすめします。(ブラケットの有るものは「要素」ブラケットの無いものは「属性」)

<center> <marquee> <blink> <font> <strike> <big> align background cellpadding cellspacing bgcolor valign frameborder hspace vspace scrolling summary axis marginwidth marginheight

FC2ブログテンプレートの選び方

テンプレート変更の仕方や好みのテンプレートの探し方、という意味ではありません。どんなテンプレートを選んだら良いか、という記事です。 * Yahoo!よりお引越しされた方からの質問など含め立て続けに記事をUPします。ご容赦ください。...

vanillaice000.blog.fc2.com