ブログ本文のレイアウトについて

ウェブリ酷い

このページの更新履歴


■ブログ本文のレイアウトの修正中


今まで、見やすいようにTABLEタグでブログの本文を構成してきましたが、実際にスマホで自分のブログを見てみてショックでした。TABLEタグが全て無視!!! 文章の区切りも改行もなく、全部の文字が連なって最早見るに耐え難い画面に...。このままでは、ブログを書いても誰も見てくれない、と思ってスタイルシートやJavascriptを勉強してみました。

そういうわけで、申し訳ありません!

同じ記事を何度も修正することがあり、レイアウト崩れなどの不具合で私のブログを見てくださるレアな方々には不愉快な思いをさせてしまうかもしれません。PC版はほとんど問題がない状況まで仕上がっているはずですが、スマホ版は不具合がまだ残っています。

CSSは外部から読込むので、ブログ自体を更新しなくても変更できますが、フリースペースのJavascriptはブログを更新した際に埋め込まれるので、その都度ブログを更新する必要があります※フリースペース更新の都度、ブログも更新されます。そのため、閲覧のタイミングでレイアウトが異なったり、テスト用のメッセージが表示されることもあります。

早期に善処する所存ですが、今しばらくのご容赦をお願いします。

■現在の対応状況


現在はPC版はCSSで、スマホ版はJavascriptでレイアウトを行なっています。ウェブリブログのCSSはスマホでは読込まれませんので、スマホ版はJavascriptで対応せざるを得ません。PC版(CSS)は上記の通り、ほぼ問題なくブログ本文の構成ができるのですが、スマホ版(Javascript)はCSSと同じ処理をするように書いているのですが、なかなか動作しない箇所もあります。2016/03/29 追記→PC版およびスマホ版ともウェブリブログのオプションである「CSS編集」でカスタマイズしたスタイルを使用しています。

【PC版に対してのスマホ版の既知の不具合】


・文字のサイズ
12ptを指定していますが、ウェブリブログ標準の10ptのままです。

・文書の行間
1.7をしていますが、行間は開きません。

・改行位置
改行が2つ分入る箇所があります。

・文書内リンク
URLはスマホ版に変換しているのですが、リンクは飛びません。
【2016/03/19:解消(対処はリンク先参照)

・文字の右寄せ
料理へのリンクやカロリーなどは右寄せにしていますが、寄るときもあれば、寄らないときもあります。

↓2016/03/29 追記
「CSS編集」で作成したユーザーカスタマイズCSSが適用されない
がんばってPC版の見栄えを良くしても、スマホは無残な結果に。
【2016/03/29:解消(対処はリンク先参照)


ブログ本文はPC版ではテーブルの中の一つのセル(TDタグの子供)ですが、スマホ版はDIVタグの子供のようです。それでも、他の要素は動作するのに...。

■CSSとJavascriptの紹介


CSSはそろそろ紹介しても問題のない仕上がりになっているので、近日公開したいと思います。

Javascriptに関しては、最後まで走っていることは確認できているのですが、無視される分の検証がまだまだ必要です。プログラム言語と違って、スクリプト・マクロの曖昧さに苦戦しています。ただのレイアウトなので、できれば、CSSにしたいのですが...。

この記事へのコメント

この記事へのトラックバック