Article page

by
  • Comment:4
  • Trackback:0

Tag:HTML5CSS
sample
テンプレ製作段階なので読みづらくてごめんなさいね (*_ _)

現在「Validに書く」というのを自己テーマにしてやっているわけですが
(啓蒙してくださったSakulaさん感謝です)
大変なジレンマを抱えております((((笑)

FC2には『独自変数』というものが存在しますよね
カスタマイズ経験のある方はご存知ではないかと思います
この『変数』とっても便利なのですが チョロチョロと問題も抱えているのですね (´・ω・`)
『問題』って何が問題なのかというと 個人が問題視するから問題なのであって
フツーに利用するのに困ることはありません(笑)

というのを踏まえた上で ゴチャゴチャ綴ろうと思います


webページを制作するには HTML という言語を使用しますよね
ブラウザやOSにバージョンが存在するように HTMLにもバージョンがあります
現在のweb標準とされているのは

HTML5

2014/10/28
HTMLを統括する総本山である W3C(World Wide Web Consortium ワールド ワイド ウェブ コンソーシアム)が正式勧告を出しました
それまで広く利用されていた HTML4はこの日を持って旧バージョンということになったわけです
「5を利用するのは時期尚早である」「まだHTML4ユーザーフォローに専念すべきだ」
という声もありますが
長い目で今後の展開を考えると 5で構成するのが最善策である
というのが私の個人的見解です

と ここまで前置きなので読み飛ばしてください(えぇ?!)

んで
W3Cの検定を受けることができますよ
合格するとバナーの貼り付けが許可されますよ
正しいソース構成になっている というお墨付きがもらえますよ

といった内容を先日記事に致しました
ところがねー FC2独自変数のおかげで どうやっても満点って取れないんです(笑)
代表的なエラーに

『alt属性が入っとらんやんけ ちゃんと書け』

ってのがあるんです (´・ω・`)
(エラー = 間違ってるから直しなさい 警告 = ダメとは言わんがあんま良くない)

alt属性 というのは
みなさんが記事に画像を添付しますよね
その『画像』が『何を表しているのか』の端的な説明であり
何らかの原因で画像アドレスが消失した際に表示される『代替テキスト』の役割も持っています

このalt属性 HTML4では「必須」とされていましたが
5では " 無理に設定しなくとも良い " という草案だったはずなのですが…
バリデート結果を見るとどうも必須要件になっているようです

FC2で画像を表示させる変数
私が知る限り 3つあります

① %topentry_image
② %topentry_image_w300
③ %topentry_image_w70


③はモバイル専用サムネイル表示です
①と②の違いもやはり サムネイル表示か元画像表示かの違い
w300がサムネイルサイズですね

トップページの記事表示タイプは大きく分けて二つありますよね

・ 全表示タイプ (追記を使った制限可)
・ 要約タイプ

全表示タイプは上の変数を使う必要がありません
記事をそのまま表示すれば良いだけなので
要約タイプの方ですよね 問題は
追記以降は無視されますが 追記以前の文章内に画像がある場合
上記変数を利用して抽出を行います

w300 の変数を使用しますと ページ自体は軽く仕上がります
通常の %topentry_image を利用した場合には元画像を縮尺で表示することになりますので
画像容量自体は変化が無いんです
だから元が大きいとページも重たい という仕組み
回避するには w300 を利用するのが良いですね

しかし w300 というのは事前に 四方300のサイズが確定しますので
どうしても見切れが起こってしまいます
「見切れ」というよりも 短い方の辺が短いままで四角表示って言うんですかね?
こんな ↓

%topentry_image

sample

%topentry_image_w300

sample

これ避けられないんですね
なので通常は %topentry_image の方で指定することが多いです
そしてサムネイルは動画GIFが強制的に静止画になります

altの話しどこ行ったんや (´・ω・`)

この三者に共通するのは

FC2がalt書いてくれてない!!!

ってことなんです(笑)
変数内容の操作というのはユーザー側では叶いません
altが無ければ無いままで使わざるを得ないってことです (´・ω・`)
そしてこの『alt無し』がバリデーションでエラー結果を引っ張りだすわけですよ
ヤッダー 超ジレンマemo

このalt必須が厄介なんですよねemo

今ここで私が絵文字使いましたよね
この絵文字も「画像」なんです
W3Cは「絵文字にもalt入れろ」って言うんですね これ(笑)
ですから既にここで一つエラー出現してるってことになります
記事内で10個絵文字使ったらその時点でエラー10確定((((笑)
絵文字にalt使わんやろフツー ( ̄∀ ̄;)

修正する方法はありますよ
記事作成中 絵文字の部分はカギカッコに emoji-数字 って出てますよね
一旦投稿して記事修正を開くと この絵文字の変数が実際のタグに変わってますので
手入力で alt を追加する と(笑)
めんどくせーわemo

altはHTML4で必須だった と書きましたが
実際にはほとんどの方がこのalt属性を軽視していた(いる) と言いましょうか
FC2では記事内に画像を添付する際にはalt付けてくれてますが 変数の方には付けてくれてない (´・ω・`)
altをちゃんと書いておくと SEO対策になる…
この辺りのことは常に情報が錯綜しており
「altとSEOなんて無関係だから無視して良い」という方もいれば
「altは大事!書かなきゃダメ!」という方も
ただ最近はアレがありますよね『Google画像検索』ってのが
altをきちんと設定していると
Googleのクローラー(検索対象を探すロボット)が確実にインデックス(検索結果に乗ること)してくれる
しかも比較的短時間で
というのは体感としてありますね

でー!
私が仮にValidで書くことにこだわるあまり
みなさんの画像に無理やりaltを追加するとなると
Javascriptを使うことになりますよね
んでもって 既にaltを持っている画像に対しては重複が起こるので書き換え(override)させる必要が出てきますから
更にJavascriptで…
これが果たして良策なんだろうか と (´・ω・`)
これは本末転倒な話しで ユーザビリティを損ねることになると思うのです

というわけでね 一応Valid目指しますが
FC2変数によるalt抜けは多めに見てもらうってことでお願いします(笑)
これ結局FC2がalt入れる仕様に変更してくれれば全て解決です
してくんないかなー (´・ω・`)
あとまだ変数については若干古いタグでの構成になっているので
(language属性(廃止要素)が入っていたりとか border属性(廃止要素)が入っていたりとか色々)
そこもそのうちきっと そうきっと変更してくれるはず
たぶん ^^;
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 4

-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/04/14 (Tue) 13:39 | EDIT | REPLY |   
Akira  
To 内緒の「c」さん

そうでしたか。
やっぱり人気となると色々あるんでしょうね。
責任感の強い方ほどキレる場面も多いと思います ^^;
上手く折り合いを付けてやっていけると良いな、と思います。
ありがとうございますe-454

2015/04/15 (Wed) 16:48 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/04/18 (Sat) 19:34 | EDIT | REPLY |   
Akira  
To 内緒の「ま」さん

わー嬉しいですe-257
お越し頂いてありがとうございますe-446

そうなんです。
ページ送りも悩ましいe-263
こうしてコメント欄で使う絵文字もしかり(笑)

ブログ拝見しました。
あのデザインの発想は私にはありません。
すげーe-451とっても素敵e-257
場違いコメントになりそうですのでこちらで失礼します。
また色々教えてくださいませ (*_ _)

2015/04/19 (Sun) 01:05 | EDIT | REPLY |   

Leave a reply

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