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

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

FC2ブログのあれこれ
2019/04/16 2
vanillaice (Akira)
vanillaice (Akira)
初心者向け HTML CSS Education Information Validation

ようやくかー (´・ω・`)
「画像の枠設定」というのはFC2ブログエディターで画像を掲載した時にくっついてくる border属性 をどうするか、というものであって、枠(border)の「種類や太さや色を簡単に指定できる」といったカスマイズに係る設定ではありません ので注意。

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

平素は、FC2(fc2.com)をご利用いただき、誠にありがとうございます。この度、FC2ブログ(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-width5 という意味ですね。そして border-stylesolid がデフォルトです。border-colorinherit でこれは「継承」を意味します。文字の指定色と同じ色を継承します。

いずれにしろ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します。ご容赦ください。...

 2

There are no comments yet.
ロビンソン
>ようやくかー

こんにちは。
この記事にあるFC2ブログエディターでのborder属性に関してはAkiraさんが何度も過去記事で指摘されていて、私自身も質問への返信コメントで注意していただいたこともありました。
ですから冒頭の「ようやくかー」という言葉も実感がよく伝わります(笑)
またFC2検索バーについても悩みの種だったのが(こちらはテンプレートのデザイン的には変わらないかもですが)、改善されたようですね。
Akiraさんの地道な努力が実りつつあるのなら、本当に嬉しく思います。
あとは、独自変数でのサムネイルの画像サイズも、運営さん側がリクエストに応えてくれることを願っております。

P.S. ブログアドレスを空欄にすると送信できない設定みたいですね(爆)

2019/04/19 (Fri) 12:21
vanillaice (Akira)
Akira
To ロビンソンさん

ロビンソンさん、こんにちは ('0')/

サムネイル変数ほしいですよねー ( ̄∀ ̄;)
仮に現存の300と72にalt属性が付くようになったとしてもこのサイズは要らないわ。要素にするのやめてほしい。URL取得だけで十分です。制作サイドとしては(笑)

公式ブログを覗いたら「borderの枠設定?なにそれ?」というコメントがあって、やっぱり意味が通じない方も居るのだなぁ、と。なので滅多にしないトラックバックをしておきました。まずもう稀にしかしないトラックバック(笑)

-----
> ブログアドレスを空欄にすると送信できない〜

そうなんですー (´・ω・`)
気を使ってくださるロビンソンさんのような方もいらっしゃいますので本来は任意にしておきたいんですが、テンプレート質問でURLを入れてくれない方があまりに多すぎて必須にさせてもらいました ^^:

2019/04/19 (Fri) 17:37

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

FC2ブログのあれこれ