当サイト(ブログ含む) のドメインを変更しました。2019/02 までは自動転送されますが、それ以降は旧ドメインではアクセスできなくなります

本ブログの新アドレスは blog.alphaziel.info となります

2018/08/28(火) 追記

DNS 逆引きでホスト名が不明な IP ドレスはアクセス拒否するよう設定致しました。該当する方は DNS サーバー設定確認をお願いします。そもそも、既にこのページ自体が見れないから、この告知は意味を成しませんね (・ω<) てへぺろ

I changed the domain of this site (including blog). Until 2019/02 will be forwarded automatically, but after that it will be inaccessible in the old domain

The new address of this blog will be blog.alphaziel.info

2018/08/28 (Tue) Additional NOTICE

We decided to deny IP dress whose host name is unknown by DNS reverse lookup. Please check the DNS server setting if applicable. In the first place, since this page itself can not be seen already, this announcement does not make sense (· ω <) Tohpeiro

またもや PHP でブログパーツなるものを作ってみました。サイドバーに表示されているお天気アイコンがそうです

いい加減、カオス気味の此処のスタイルシートを何とかしないと…('A`)

標準の table 要素で行うカレンダーは気に入らないので PHP で自作しました。表示フォントはちょっとオサレに Georgia を使っています。Windows, Mac の人もオッケーだと思います

話はチョット変わって、此処のブログシステムの事ですが、フッターに表示している様に WordPress ¹ を使用しています。先の記事で、記事の移行はあっさりと終ったと書きましたが、実はあの後に色々とありました…('A`)

1. 記事の中の div 要素がことごとく p 要素になってる！
   

   ところが phpMyAdmin ² にてデータベースの中身を除くと、ちゃんと div 要素としてデータに入っています…WordPress Japan のフォーラムを検索すると、こんな記事が…WordPress Japan :: トピックを表示 - 記事投稿でCSS....【エディタの不具合？仕様？】・・解決 と言う訳で、早速ダッシュボードのユーザー設定にて ビジュアルエディタを使用する のチェックを外して、この問題は解決

2. ピリオド(.)が 3つ連続してあると全角の 3点リーダー(…) に置き換わってしまう
   

   データベースの中は置き換わっていないので、表示する際のフィルターの問題でしょう。それにしても、此れは大きなお世話。この問題は解決していませんが、時間ある時に調べてみます

3. blockquote 要素の中に注意！
   

   この要素の中に以下の文字が入っていると、表示の際に勝手に別の文字に置き換わってしまいます

   1. シングルクォート(')
      全角っぽいシングルクォートに勝手に置き換わる
   2. ダブルクォート(")
      全角っぽいダブルクォートに勝手に置き換わる
4. phpMyAdmin のインポートしたデータに改行を入れた所が \r\n という文字列に置き換わっている
   

   これ、表示の際に復帰改行に変更しているんですが、文字コードで言うならば、0x0d 0x0a を出力している為、UA によっては br 要素と同じように復帰改行してしまう…

上記の 1番以外の問題は恐らく表示する際のフィルター問題でしょう。時間ある時にソースコードを追っかけて調べてみたいと思います。取り敢えず、今は文字参照やキャラクターエンティティを使用して回避しています。改行の問題も文章間に改行を入れないようにして回避しています。いずれも運用で回避できる問題ですが…

1. WordPress を使用しています。PHP で書かれているので、私にとっては改造が楽です
2. MySQL をブラウザで管理できるように PHP で書かれた MySQL 管理ツールです。多言語サポートしています。参照 »» phpMyAdmin | MySQL Database Administration Tool | www.phpmyadmin.net

JUGEM のとんでもない仕様変更で移行を決意し、移行作業はほぼ無事に終了しました。まだ、カレンダーとか機能していない部分もありますが、徐々に修正していきたいと思います

例のユーザーの事を考慮していないような仕様変更前に既に、ドメイン名、サーバーは確保していたので、データベースの設定、ブログシステムのインストール、記事の移行はあっさり終ったんですが、テンプレートのシステムがまるで違うので、この辺でかなりの時間を取られました

あ、あと、ニックネームが変わっています。以前のブログから使用しているニックネームとは同一人物です

CSS 関連の記事はほとんどが IE では意味ないので悪しからず。さて、件の通り CSS の content プロパティの counters を使用した事を書いていきたいと思います。この件で検索すると例を載せた詳しい解説は山の様にあるのですが、親子孫(入れ子構造、ネスト構造とも言う) 関係を考慮した開始番号を指定して自動連番を行うという手法が見当たらなかったので、記事にします

実際、Panels UI Commands reference : 私的マニュアル の記事でこの手法を使っています。この記事の中で使用している ol 要素の CSS に自動連番を行っています。ダラダラと前置きが長くなるので、サッサと本題に入りましょう

1. ol {
2.   counter-reset: item 9;
3. }
4. li ol {
5.   counter-reset: item;
6. }
7. ol li {
8.   display: block;
9. }
10. ol > li::before {
11.   content: counters( item, "." )". ";
12.   counter-increment: item;
13. }

文章は一般的には 章 > 節 > 項 といった親子孫関係と言ったネスト構造となっています。新しい項が開始される際には、項は 1 から始まり、また、同様に新しい節が開始される際には、節は 1 から始まります。章は大元なので一つの章が終了しても、章番号は継続されなければなりません

上記サンプル CSS 1～3行では、カウンターの開始番号を指定しています。章番号は 10 番から開始したいので 9 と指定しています。しかし、このままだと 節、項 の番号も 10 番から開始されてしまうので、4～6 行にて大元の親以外の ol 要素にカウンターのリセットを指定しています。li 要素の中に含まれる全ての ol 要素を対象としているので、大元の ol 要素には適用されません

太字で記述されている部分が、カウンターにする任意の名称です。同一の HTML 文書において一意な名称にする事をお薦めします。斜体文字の部分は開始する番号を指定します。この例ですと 10 番から開始される事になります

item って、同じ名前使ってるじゃん。おかしくならないのか？と、疑問に思われる方もいると思いますが、CSS3 Generated and Replaced Content Module ここの記述からも解るように、ネスト構造の場合は内部的に自動的に新しいカウンターを生成します。プログラミングで言うならば、ローカル変数のスコープ範囲と言った所でしょうか