結論から言うと あんまり良くない ですね (´・ω・｀)
どうしても使うなら 自己責任・一般閲覧者から嫌われるのも覚悟の上 でないと。何故良くないかの説明です。
壁紙・フレームとは
めんどくさいので以下「壁紙」という表現で統一します。実物を掲載したくないのでスクリーンショットです(すみません)
一例です。やっつけで作っただけでもっと凝った作りのものも多いかと。これを 記事単位でやる ってことよね。大抵は 記事全文をこの中に放り込む という感じだと思います。
で、横幅はこれと同じだと思います。Yahoo!ブログの記事横幅最大値は 560px固定 なので、横いっぱいを使い切るなら壁紙の横幅も560pxのはずです。
スマートフォンで横幅超過
FC2ブログではスマホでもhtmlが有効です、というのを先日書きました。
Yahoo!ブログとFC2ブログの記事の書き方・特徴の違いと攻略ヒント
Yahoo!ブロガーさんが口々に「FC2ブログは難しい…」とおっしゃってますね。FC2ブロガーさん的には「… 何が？ (´・ω・｀)」という感じではないでしょうか(笑) システムの違いや慣れの問題もありますが、実際のところは どうすれば良いのか理解できていない だけで、それを「難しい」と表現しているにすぎないような気がします。...
vanillaice000.blog.fc2.com
上記リンク先の記事でも「ちょっと問題あるよ」と注意喚起を行ったわけですが、Yahoo!でのやり方をそのままFC2に持ち込んでしまうと先程のサンプル作品は以下の2パターンです。
①は完全に右側が見切れて見ることができなくなるパターン。②は 画面全体が横スクロール するので見ることはできますが 画面がグラグラして非常に煩わしくなる パターン。部分的なスクロールではなく記事全体がスクロールです。
スマホユーザーが一番見たくないページは②の方です。イライラするだけで一文の得にもならない。
仮に画面内に収まるように修正したとしましょう。以下のようになります。
画面内には収まりましたが、横幅せまっ！！(笑)
サンプルはテキスト量が少ないのでこれで済んでますが、記事内容全部をこの中へ入れてしまうと縦に間延びして非常にかっこ悪いデザインになってしまいます。これをやるなら「メッセージ的利用」で短文掲載に割り切らないとダメでしょうね。これじゃ読みにくくてかなわん (´・ω・｀)
で、この「画面内に収める」というスキルがあるかどうかも不安なんですが、自力修正ができないとなるともう部分的横スクロールにするしかないと思います。
<div style="overflow-x: scroll;"> ここに壁紙ソースコード </div>
壁紙の部分だけが横スクロールになりますので画面全体がガクガクすることはなくなります。とはいえ縦に長いコンテンツの横スクロールは結構苦痛ですので恐らく 誰もスクロールして見てはくれない と思われる。
ブログなんてのは基本は自己満足なんですよ。とはいえ相手方のアクセシビリティ(読みやすさ)を著しく低下させてしまうというのはやりすぎです。自己満の度合いが強すぎ。誰かに見て欲しいから公開するんですよね。ならば相手、特にスマホユーザーの気持ちに立ってコードを組んで頂きたいものです。
Yahoo!ブロガーさんの特徴だと私が感じていることがあるんです。反発・反論あるかと思いますがこの際ですからはっきり書いてしまうと、他人のアドバイスに聞く耳を持たない 方って多くないですか (´・ｪ・｀)
それから 他人のミスを指摘するのはものすごく失礼で意地悪な行為 みたいに思っている方も。
FC2ブロガーさんだと気づいた点は積極的に伝える人の方が多いような。「これ間違ってますよ」「これって誤字じゃないでしょうか」など。こういう指摘を受けた時に「恥をかかされた」と思うようではFC2ブログでやっていけないと思う(笑)
はてなブログなんて絶対無理。
間違えることって別に恥でもなんでもないんですよ。私でもいろんな方にミスの指摘をしてもらってます。「して頂いている」んです。これは好意ですよ。教えてくれているのだから。
先程もざっとYahoo!の新着を覗いてきたんですけども、あきらかな誤情報なんかも散見されます。例えば「FC2ブログにコメント移動できたけどコメンテーターの名前は出ない仕組みです」って書いてあり、スクショも載ってました。でもそのスクショ見るとコメンテーターの名前がちゃんと出てるんですね(笑)
もう誰が見てもあきらかに見落としているだけなんですが、誰も指摘していない。数名のコメントが付いていますが誰一人指摘しない(笑)
えー。気づいてないわけないじゃん… （￣∀￣；）
まぁこういう風潮がどうも好きになれない私です。この記事もたぶん誰も聞き入れないだろうと思いながらも書いています。聞かれたから書いているだけでホントはめんどくさいと思ってます ←
とりあえずここまでのまとめ
- きちんと画面内に収めるようレスポンシブなソースを書く
- 長文を放り込まない
- 壁紙の枠部分に領域を取りすぎない(枠幅を大きくしすぎない)
壁紙は非常に重たい
ほとんどの方がこの壁紙を製作するのに table要素 を用いているようです。table要素というのはdiv要素と比べ、描画が遅い んです。
divは単体で次々に描画されますが、tableには <table> <tbody> <tr> <td> という部品がありますよね。その部品全てを解釈してようやく描画が始まります。だから「遅い」
遅いのと重たいのとはまた少し違うんですが、遅ければ大抵の人は「重たい」と感じてそう表現します。
壁紙は過大な通信リクエストが発生
画像使いまくりますよね。例えばサンプルだと画像数が6です。実際はグラデーション背景はCSSでやっているので5なんですが、たぶんYahoo!の方は全部画像で行うと推測。なので6点。つまり 通信リクエストがこれだけで6回も発生している ということですね。重たくなって当然です。
全文表示タイプを使わないようにする
Yahoo!ブロガーさん、「要約記事タイプ」に馴染みがないようです。web一般の表現だと「リストレイアウト」「カードレイアウト」でしょうか。どうも全文タイプ・昔ながらのレイアウトを選ぶ方が多いような気がします。
全文タイプテンプレートを利用して壁紙の内容を「追記」ではなく「本文」に書いてしまうと、トップページで壁紙が複数ドバっと表示されてしまいます。見た目に鬱陶しいだけでなく めちゃくちゃ重たい ですよ。仮にトップページの表示件数が10だとして、さきほどのサンプルと同じく通信リクエストが6件だとすると単純計算で 通信リクエストだけで60件 ってことになりますよね。重たいに決まってんじゃん (ﾉД`)ｼｸｼｸ
かといってトップ「掲載数1件」なんて極端なことをすると、それってもうトップページの意味が無いんですよ(笑)
要約タイプに変更されてはいかがでしょうか （￣∀￣；）
要約タイプは 個別記事で利用したhtmlはトップページに出てこない 仕組みですから壁紙があっても表示速度がありえなく低下する事態にはなりません。その代りトップページに壁紙は出てきません。つか、出す必要ある？ （￣∀￣；）
absoluteに注意
Yahoo!ブロガーさんrelativeやabsoluteが好きですよね (´・ω・｀)
いわゆる「はみ出し」というやつです。
これそのまま掲載してしまうと左側が記事画面を超過します。するとスマホでの画面超過が確実に起こりますね。absoluteが上下に付いている場合には先行要素・後続養素との干渉が起こります。例えば下にあるSNSアイコンと重なってしまったり、など。ボタン類やリンクに被さるともうそのボタン・リンクは押せませんので閲覧者にとって非常にストレスです。absoluteを利用したら記事からはみ出さないよう処理してください。
ここまでのまとめ
- tableで書かない, divで書く
- 画像を使わなくて済むところはCSSで書く
- 要約タイプテンプレートを設定する
- 全文タイプを利用するなら「本文」には書かず「追記」に書く(引っ越しでは無理です)
- absoluteまたはrelativeは他要素と干渉しない処理を行う(方法は勉強してください)
まとめ
Yahoo!壁紙については以上です。もうこれで終わり。修正依頼とかマジで辞めてくださいね。何故私が他人の書いたソースをちまちま直さなければいけないのか。意味がわかりません。あと なんでもかんでもテンプレートのせいにしないように。
よろしくお願いします(笑)
