３つのエラーメッセージの修正と確認が終わりました。
やはり勝手に消えるデータについては入力し直しの注意喚起が必要でしょうね。
・記事内にutf-8の2byte文字、3byte文字、4byte文字が存在するかを以下の正規表現でチェックしている。
/(?:[\xC0-\xDF][\x80-\xBF]|[\xE0-\xEF][\x80-\xBF]{2}|[\xF0-\xF7][\x80-\xBF]{3})/x
・utf-8の2byte文字はギリシア文字等であるため日本語という意味では3byte文字だけの存在チェックのほうが強いため安全かもしれない。
・また日本語入力チェックは記事の未入力チェックより先に実行されるため未入力の場合は「日本語が無い」のエラーになってしまう。
==> 順番を変えるか？
htmlファイルに記述していたのをbbs.cssに移動しファイル名も
Cluxxx.png から Claxxx.png に修正した。
Greetings! Quick question that's totally off topic. Do you know how to make
your site mobile friendly? My weblog looks weirrd when viewing from
my apple iphone. I'm trying tto find a template or plugin that
might be able tto fix this problem. If you haave any recommendations,
please share. Cheers!
ремонт дороги web site дорожные работы
・返信画面などfont-sizeを大きくする。
・text-shadow を設定してくっきりさせる。
・ボタン名を日本語にする。(Back等)
==追加==
・<body>部の色、背景画像をbbs.cssに記述する。
・背景画像のファイル名を修正する。(CluMuxx ==> ClaMuxx)
==追加==
・「編集」ボタンのpadding-bottomをゼロにして上下方向を中央寄せにした。
「編集」ボタンの文字列であるが、なぜか１ページ目は上下中央寄せにならない。２ページ目はなる。
EdgeやChromeでは２ページ目もならない。
==> 原因不明である。1px程度なのでとりあえず放置する。
==> その頁で実際に編集すると中央寄せになるようであるが他の端末でも再現性はあるのだろうか？
==> Vista端末(IE9)でやってみたが再現せず。Edgeでも再現しない。うーん、何が原因だろうか？？
なお、Edgeでは１ページ目だけが中央寄せで他のページは若干上寄せ。
==> 「編集」ボタンのheightを24pxから23pxに変更してみた。というのはfont-sizeが13pxに指定したので上下の余白の和が偶数になるようにheightも奇数にしてみたわけである。結果は修正前に比べると中央寄りになったように見える。ただしやはり若干上寄りには見えるが…
HTMLタグ内に
class="color green button small"
と書けばCSSセレクタとしてcolor green button smallで定義されたstyleが全て(=OR条件)適用される。同一の項目が重複していれば後勝ちで上書きされる。
CSSファイル内のセレクタとして
.button.color {
}
と書けばclass指定としてbuttonとcolorの両方(=AND条件)が指定されたタグに対して当該styleが適用される。
===> うーん、つぎはぎの仕様ですね。スパッゲティのcodingを生み出す元凶になりかねないと思われますが、オープンな環境で発展してきたものなので仕方ないのでしょうね。
修正テスト
bbs.css内にはセレクタcolorは .button.color の一か所のみである。また htmlファイル側もclassにcolorを指定している箇所は全てclassにbuttonを指定している。従って .color と書いても同じことだったと思われるが、あえて変更はせずにこの書き方に準拠してボタン設定の他のカスタマイズを行うことにした。
※単にcolorとするよりボタンの色という意味で .button.colorのほうが意味が分かりやすいとも思われる。
==修正テスト===
日時が反映されるが表示順は変わらないこと
・画像url(xxxx)にグラデーションをつけるには
background-image: linear-graient(rgba(255,255,255,.3), rgba(255,255,255,0)),
url(xxxx);
とする。上記の例は上から下へ明(30%)から暗(0%)へのグラデーションとなる。
・ボタン画像では上記のurl(xxxx)の部分は以下のようなbase64コーディングの埋め込みデータとなっている。
url(data:image/png;base64,iVBORw0KG…SuQmCC);
この画像は透明度がバラバラな縞模様となっている。
・透明度のある背景画像(background-image)と背景色(background-color)の両方が指定されると透明な部分は背景色が表示される。
・ボタン画像では透明度がバラバラな縞模様＋背景色が指定されている。背景色だけを緑や赤に変えるだけで緑のグラデーションや赤のグラデーションが実現できる。
===> こんな技があったとは驚きであった！