Studio TA Subsite の案内とお知らせ

<   2014年 04月 ( 16 )   > この月の画像一覧

明石公園 2014.04.29 

2014年 04月 29日
b0174191_17524110.jpg
b0174191_17524478.jpg
b0174191_17524828.jpg
今日は、キッズ4個と半分、ママ7個と半分、ハトと私は0個。



EOS7D + EF70-200mm F4L IS USM で撮影、画像はクリックで拡大表示します。





[PR]
by Ataron | 2014-04-29 17:55 | 鳥さんの写真 | Comments(0)

明石公園 2014.04.27 コートを渡る黒い風

2014年 04月 27日
日曜、晴れ、夕方、人は少なめ。

今日は林の道のない斜面をぬけて一直線にテニスコートの裏へ。 妙な直感があたり、ばったりとママに出会いました。 暗い林の中の私を見て、ママは少し驚いていた様子。 しかし、パンをとり出すと警戒を解いて、ほどなく物資輸送を開始できました。
b0174191_20531585.jpg
こちら側には隠せる場所が沢山ありそうですが、ママは必ずコートを西に渡ってPointOldに物資を運びます。キッズもやって来てパンを取ると、コートを渡って行きます。 こちら側もママ達の日常の活動エリアなのは確かそうですが。 
b0174191_20532395.jpg
茂みが深くてママが見失った物資を探していると、ぷいとママ達は行ってしまいました。 物資を残したくないので PointOldへ。 予想通り、いつもの様にママ達が居て残りをゲットしてゆきました。 途中でいなくなる時は、慌てて隠したのをメンテナンスに行っている様に思えます。 下はおっちらと近付くキッズです。
b0174191_20533135.jpg
今日は、キッズ3個 ママが7個 私が1個 茂みにロスト1個 という按配。
最近のママは、キッズに取られない様に焦ってる様子 ^^;



EOS7D + EF70-200mm F4L IS USM で撮影、画像はクリックで拡大表示します。







[PR]
by Ataron | 2014-04-27 21:10 | 鳥さんの写真 | Comments(0)

明石公園 2014.04.25 ツグミ達もいなくなった

2014年 04月 25日
私にとっては久しぶりの晴れた公園。 ツグミ達は居なくなった様子で、一羽も見かけませんでした。

いつものPointOldに近付くと、最初にキッズが水場の上を小旋回して樹にとまりました。更に近付くとママも別の場所に陣取ってます。晴れてどこか遠出するかもと思っていましたが、今はここに餌が豊富なのでしょう。
樹の上のキッズ。最近は少し積極的にパンを取りに来ます。
b0174191_20223988.jpg
ママは頭に枯れ葉を付けてますが、これが一向にとれません。
b0174191_20245980.jpg
こちらに向かって着地、今日はハト達を追い払いながらで忙しい。
b0174191_20251143.jpg
物資伝達が終わり日向に寝転んでいたら、あいそをつかされましたが、帰る時は私を少し見届けている様です。 Pointから少し離れてもう会わないと思っていたら、テニスコート端の木に2羽の影が。 確かにママとキッズで、枯れ葉で判りました。
b0174191_20251783.jpg
右がママで、どうやらここは貯蔵庫らしく、パンをひっぱり出しました。 キッズはもらえるのやら?

コートを超えて東の林に向かって、ママ達が飛ぶのを良く見るので、東側の林に夜は居るのかもしれません。 今日は初めてコートの東にいるママを見つけました。 先から3~4分しか経っていません。 パンは移動させただけ?
b0174191_20252028.jpg
やはり、枯れ葉を付けています。 標識があれば見分けがいかに簡単なことか。 ママも私に気付いてますが、Pointと違ってすましてます。 こちらでの様子も気になるところです。 樹の根の下でなにやらしていて、ここも貯蔵庫なのかも。



EOS7D + EF70-200mm F4L IS USM で撮影、画像はクリックで拡大表示します。








[PR]
by Ataron | 2014-04-25 20:44 | 鳥さんの写真 | Comments(0)

リンク修飾の順序による違い と 特殊ページリンク / エキサイトブログ

2014年 04月 25日
ここの内容はエキサイトブログ(新管理画面)での原稿編集を前提にしています。
他ブログの編集システムでは以下の内容通りでない場合も考えられます。
更に、私のスキン設定では、投稿文中のリンク文字のフェイスは濃い紺(黒と見分けにくい程度)、HOVERは黒に淡い影としています。 リンク文字への原稿編集時の修飾による効果は、スキン設定により印象の違いがあることを勘案ください。
 
+

通常編集でURLのペーストで、自動的にリンク書式が記入されるのは便利だが、思い通りに行かない場合もある。

➀自分の他記事へ相対リンクを書込む場合は、自動付加される「http://」をHTML編集で消しなおす必要がある。 相対リンクは「/xxxxxxxx/」のシンプルな8桁記事番号だけを利用する方法。
②特殊リンク記述である『このページ自身へのリンク「.」』を再確認。書き込みは➀と同じ作業が必要。( Test Post Field (23)を参照)



③エキサイトの「通常編集」画面は、リンクフェイスの表現が投稿後とは異なる。 投稿後のフェイスは「プレビュー」で確認する必要がある。

④ブログの原稿編集時に、「リンク設定」「文字色修飾」「アンダーライン付加」の操作の順序が違うと、投稿後のフェイスの結果にばらつきが生じる。
以下に設定の適応順序による実際のフェイスの違いを整理。 これは、エキサイトの投稿編集システムの関与の可能性もある。

HTMLでは「子要素優先」が原則的に働く。
編集時に「サンプル」という文字を 123 の順序で修飾した場合、生成されるHTMLは、
<p style 1><p style 2><p style 3>サンプル</p></p></p>
と、後の指定ほど入れ子の「子要素」側となる様に設計されている。
つまり、エキサイトの編集画面では、後指定優先となる。
下の結果は、その通りになっているだろうか。

※対象の文字は「●サンプル●」 
※リンクはこの記事自身。( HTMLは <a href=".">●サンプル●</a> ) 
※以下は、一行目 文字修飾の内容と順番 、下行にその結果 という形式。

0) 普通の文字
  ●サンプル●   
  色指定(ライトブルー)
  ●サンプル● 
  アンダーライン 色指定 
  ●サンプル●    
  色指定 アンダーライン 
  ●サンプル●    
         ________  アンダーラインが後指定優先でラインに着色するらしい?

 1) リンク設定のみ
  ●サンプル●
 2) 色指定 リンク設定
  ●サンプル●    
         ________ 1) 2) は全く同じで文字はリンク色。
         文字色はリンク設定(文字色指定あり)が後指定優先となるため。    
 3) リンク設定 色指定
  ●サンプル●     
         ________ 3) 色設定が後指定優先。

 4) アンダーライン リンク設定
  ●サンプル● 
 5) リンク設定 アンダーライン
  ●サンプル● 
 6) アンダーライン 色指定 リンク設定
  ●サンプル●
 7) 色指定 リンク設定 アンダーライン
  ●サンプル● 
         ________ 4) 5) アンダーライン設定はリンク設定と
         干渉しない。(リンク設定はアンダーライン指定が無いため)
         6) 7) は 2)の原理で 4) 5) と同じ結果になった。

 8) 色設定 アンダーライン リンク設定
  ●サンプル●
         ________ 色設定がアンダーラインに反映... 0) 参照。
         リンク設定の後指定優先で文字色はリンク文字色。

 9) アンダーライン リンク設定 色指定
  ●サンプル●
10) リンク設定 アンダーライン 色指定
  ●サンプル● 
         ________ アンダーラインとリンク設定は干渉しない。
         色設定が後指定優先の場合、ラインの着色なし... 0) 参照。

11) リンク設定 色指定 アンダーライン
  ●サンプル●
         ________ 文字色は後指定優先で色指定が反映。
         アンダーラインが後指定優先の場合、ライン着色... 0) 参照。

以上の様に、なかなか覚え難そうな優先順位があり、結果は数パターンとなる。

そもそも、文書内リンクフェイスはCSSで「定型化」してきたのに、文字色設定を追加し始めた所に問題があると反省。
※リンクが目立ち難いため「アンダーライン」付加を「定型」として来たが、これは受け継ぐ。(アンダーラインとリンク設定の前後は問われない)
※リンク文字の着色は、可能なら避ける。
これは、リンク文字フェイスの定型化を乱さないルール。




[PR]
by Ataron | 2014-04-25 16:54 | スキン等の覚書き | Comments(0)

ギター楽譜用 転調盤 の話

2014年 04月 25日
最近のことですが、友人の子供さんがロックに興味を持ち、その機材の相談を受けたりしています。 そんなことがあって、今日ひょっこり思い出した転調盤の話。(移調盤が正しいか?)

私が少年の頃は、ちょうど『青春デンデケデケデケ』の様なもので、ギターを抱えたまま寝てしまうこともありました。 例にたがわずビートルズの楽譜の本を買い込み、ギターを真似て弾こうとするのですが、楽譜に載ったコードはひねくれたコードだらけなのです。 下は当時の楽譜本の一例で「Any Time At All / The Beatles」の最初です。

b0174191_22594475.jpg

レコードの音から正しいギターコードを探し、ギター少年は鉛筆やボールペンで書き込んでいます。 きっとギターを抱えながらで、下手な字が更に度を増してます。 最初の頃は知識がなく、ビートルズの演奏と楽譜のコードが違うのが判らず、なんと難しい運指が要るのだと思っていたもんです。 そのうちに、楽譜が違っていて移調すれば良いと気が付きました。 それからせっせと上の様な修正作業を始めたのです。 移調すればなんと殆どの曲が難なく弾け、レコードに合わせてやれるではありませんか。 練習は一気に進み出し、ギター少年は狂喜したのでした。

当時の楽譜本はなんでこんな不親切なコードを載せていたのか判りません。上の楽譜本もですが、当時のものは演奏通りのコードでない楽譜が殆どでした。 その後何年も経ってから、次第にオリジナルに忠実な楽譜本が出版される様になりました。 その頃には耳コピが出来る様になっていて、楽譜本は参考程度になっていましたが...  ビートルズ等を輩出した時代のギター少年は、たぶん皆、こんな遠回りをさせられたはずです。

70年代になると、高度な運指テクニックを教授する楽譜本も出て来ました。 とりまく環境も本格的なギタリストを輩出する条件が進み、過去のスーパーテクニックは次の時代の普通のテクニックとなっていった様に感じます。 現在は、YouTube で曲ごとの細部の運指を伝授する人まで出て来ました。 これは素晴らしい進歩です。 「どうやって弾いてるのだろう」と、何日かけても判らなかった運指が、そこに示されているのですから。 今のギター少年達には、更に先へ進む条件が加わったというべきですね。



さて私は、ことあれば楽譜本の移調作業に勤しんでいたわけですが、毎回ギターのバレーポジションを数えてコードを書換えるより、もっと良い方法を思い付きました。 それが下の「転調盤」です。

b0174191_13480058.png

転調盤の表記で、「C#」は「D♭」でも同じことですが、楽譜では「D♭」より「C#」が多用されていて、それが私の慣用にもなっていました。 そのため、「♭」「♯」は良く使う方のみを書いてますが、反対側が出てきても別に困りませんね。

コードの文字は時計周りに半音(1フレット)ずつ進む様に書いてあり、12個の半音で1オクターブ進んで最初のコードに戻ります。 この様な青の文字盤(大)と、赤の文字盤(小)の円盤を作り、2枚を重ねて中心を小ネジで止めて、文字盤が回転できる様にしたものでした。

使い方は、楽譜のコード「G」が正しくは「B」のコードだと判ったら(これは曲を流して判り易い場所で、ギターで音探しをします)、赤盤の「G」を青盤の「B」に合わせます。 この状態で、その楽譜の他のコードも、楽譜は赤文字→正しいコードは青文字、と置き換えていけます。 転調盤自体が換算表になるわけです。

当時、私はこの転調盤はボール紙で作ったのですが、「Beatles100曲集」なんてあったので、修正に大貢献したものでした。 簡単で便利なものなので、ちょっと気のきいたプラ製のものでも販売されないかと思っていましたが、製品を見たことはありません。 今日は気になり調べたのですが、同様のグッズの紹介は各所にあり、こんな綺麗なのを作ってる人もいました。

まあでも、オクターブ上がると元の音に戻るという点で、音楽というのは不思議なものです。



[PR]
by Ataron | 2014-04-25 00:40 | DIY一般 | Comments(0)

エキサイトブログのメニュー構造は色々 /ボトムメニュー篇

2014年 04月 24日
ワンカラムタイプ(メニューはボトムメニュー)は、画面がスッキリしているのが良いですが、ボトムに配置されるメニューは、人によってはバランスが変になってしまう傾向がある様です。 メニュー項目で、縦幅の長い項目と短い項目の差が大きいと、空白が出来て、秩序がなくなってしまう感があります。
メニュー項目の順序を入れ替えて、縦幅の近いものを並べると良さそうですが、スクロール表示の導入も有効かと思います。

もちろん、整理の仕方はユーザーの好みや主義があるでしょうから、スキンアレンジ上のヒントに留めます。



テクスチャ
新着スキンに入ってますが、落ち着いていい配色です。 本文もメニューの背景で良かったのにと思ってますが。
ボトムメニューの「以前の記事」だけスクロールバーを表示させました。(年月日がみな同じなのは、便宜上、私がサンプルのHTMLを書換えて行を増やしたからです)
b0174191_21212293.png
下図はメニューのHtml構造とCSSの編集状況が判るDOMのハードコピーです。見にくい場合はクリックすると拡大表示します。
b0174191_21212774.png
メニュー項目をスクロール表示させるため、CSS末尾に追加する記述は以下の3行です。

:nth-child(2).menu-block>.menu-body {
height: 160px;
overflow: auto; }

これは、メニュー項目の順番が、最初の図のサンプル(標準型?)の場合に、「以前の記事」の項目をスクロール表示させる設定です。
●スクロール表示させたい項目の順番(位置)が違う場合は、一行目の「2」を変える必要があります。 値を「1」「2」「3」「4」……と変えるに従い、スクロールバーの出る項目が変化しますので、目的の項目に表示される数を探し設定します。
●2行目の数値「160」は、結果としてバーの長さになります。 これを調節すれば他の項目の高さとバランスを取ることが出来ます。
●上の3行を使わずに以下の3行を使うと、縦幅の160px以上(この数値は変更できます)の項目がすべてスクロール表示となり、高さバランスの調節としては簡単です。

.menu-body {
height: 160px;
overflow: auto; }

●DOMを使ったメニュー構造の見方の詳細は「サイドメニュー篇」や「エキサイトブログのスキンを弄くりまわす」を参照ください。
●複数の任意の項目(飛び地の場合)を特に指定してスクロール表示を適応させたい場合は、一行目の数値だけ違うものを、複数指定することで実現できます。
下は例ですが、3番目と5番目のメニュー項目をスクロール表示させる指定です。
それぞれの「160px」は一致している必要はありません。

:nth-child(3).menu-block>.menu-body {
height: 160px;
overflow: auto; }

:nth-child(5).menu-block>.menu-body {
height: 160px;
overflow: auto; }



ステンレス
これもワンカラムです。( シンプル1カラム も全く同じで以下の内容をそのまま適用できます。)
b0174191_22485642.png
赤い数字は説明で書き込んだメニュー項目の順番です。 実際に使用して項目の高さが変化すると、この並び位置が変化するのではないでしょうか。
下はメニューの「以前の記事」の項目(2)をスクロール表示とした時のDOMのハードコピーです。
b0174191_22340427.png
構造はテクスチャの場合とほぼ同じですが、class名は違ったものを使っています。
CSSに追加した記述は以下の3行です。

:nth-child(2).MNblock>.MNbody {
height: 160px;
overflow: auto; }

これをCSSの末尾にコピペすれば、スクロール表示が可能になりますが、適応時の注意は上のテクスチャの内容を参照ください。



カスタマイズ1カラム
このスキンは異例のメニュー構造でした。
アレンジ前のDOMの内容ですが以下の様なものです。
b0174191_23271059.png
メニュー項目は「sidemenu」というブロックに並んでいますが、その下に「入れ子」のブロック構造がありません。メニュー項目名の「カテゴリ」「以前の記事」等を修飾する「MNTTR」も、「全体」「文書」…「2006年8月」…というリンク群なども、全くベタに並べられています。 これでは、年月別リンク群だけをスクロール表示は出来ないと思います。
スクロール表示を導入するなら、これらメニュー全体をスクロール表示するしかありません。 少し考えて作った追加CSS項目が下です。

:nth-child(3).sidemenu {
height: 400px;
overflow: auto !important;
width: 220px;
margin-left: -60px; }

CSS内には「sidemenu」が3箇所ありいますが、上記はこの3個目に出て来るものだけに適応されます。
メニュー全体の高さは適当に「400px」としています。
幅「220px」を指定していますが、これを指定しないと横スクロールバーが出てしまいます。 メニュー内容にデフォルトの幅を超えるものがある様です。
この幅を拡げる指定で、右側にある「XML」「ATOM」等のリンク表示が押されて下へはみ出すので「margin-left: -60px;」でこのメニューを左へ寄せています。
以下がこれを適応した状態です。
b0174191_00223902.png
メニューがそっくりスクロール枠内に入ってしまいますが、これしか出来ません。 延々と下に延びるよりはましでしょうか?



[PR]
by Ataron | 2014-04-24 00:24 | ブログスキンのアレンジ | Comments(0)

明石公園 2014.04.22 静かな春

2014年 04月 22日
週中の休みが多いこの頃です。 うす曇りの公園は静かそのもの。 カモ達は殆ど移動しカモメもいなく、大池は休みの国と化してます。
b0174191_18564509.jpg
大きな餌を咥えたムクッちとそれを追う相方が一目散に飛んで行く先には、巣があるのかも。

いつもの様に物資輸送をしていると聞いたことのある囀りがしました。
b0174191_18564957.jpg
キビタキの様で、後ろ姿を見せただけでさっさと何処かへ行ってしまいました。 そのうち頭の上にエナっちが。
b0174191_18565386.jpg
こちらも採った餌を運んで行く様子。 エナッちの巣は見たことないなぁ。
帰りがけ、たたずむシロハラ君がいました。
b0174191_18565734.jpg
休んでいるのか迷惑そうな顔をしています。 この後、頭上にママがお見送りに来て、逃げ出さざるを得なくなりました ^^;

あっ、今日はママだけしか来ませんでした。それと一昨日の樹まで来て、今日はさっと戻って行きました。 私が去るパターンを学習したのかもしれません。



EOS7D + EF70-200mm F4L IS USM で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2014-04-22 19:31 | 鳥さんの写真 | Comments(0)

エキサイトブログのメニュー構造は色々 /サイドメニュー篇

2014年 04月 22日
「以前の記事」メニューのスクロール表示化も一段落、他のエキサイトユーザーのスキンでも、同様のことが出来るだろうと想像していたけれど、他スキンの実際を調べずに勝手な事を書きすぎたかなと、勉強がてらに検証してみました。


写真の愛好家が多いエキサイトで、人気があるのがこの黒いベースの提供スキンです。 ファインダーの雰囲気もあり、アドが目立ちにくいオマケもありますね。
b0174191_15034619.png
メニュー構造を調べているのが下図です。メニュー順を弄ってない人は「以前の記事」は他のメニュー項目並びの4番目の要素の「<div class="menu">~</div>」に入っている様です。
b0174191_15161750.png
親要素は「<div class="sub-column">」ですが、子の「menu」ブロック中にタイトルの「menu_titl」と「menu_body」の2ブロックがあり、後者の中に年月別リンク群を入れた目的の「<div> class="inner">」があります。

提供スキンは皆同じメニュー構造と思っていましたが、これは大いなる間違いでした。修飾すべき「inner」ブロックは子要素の奥の奥。 使っているclass名も違えば、構造も複雑になっています。 調べると、他の「menu」クラスのブロックも同じ構成で、的確にこの「inner」だけを指定しないといけません。

色々やってみた結果、親を指定した書き方は難しい様子。 3つのセレクタを併記する方法は判らないので。 それで、親を指定せずに、『4番目の子が「menu」というclass名なら、その「menu」以下にある「inner」というclass名の要素が対象』というセレクタの表記で、なんとか解決しました。

.menu:nth-child(4) .inner

これは有効なはずですが、やはりDOMは修正して来て

:nth-child(4).menu .inner

とされました。 こちらが無難なのかもしれません。
「.inner」の前は半角空白が必須で注意が要ります。

親の指定がありませんが、class名「menu」の要素は、特殊な改造していなければHTMLの他の場所に出て来ず、この場所に並ぶものだけですから、『並んだ子の4番目の「menu」』というセレクタは、唯一この場所を指定出来るはずです。

以下は修飾指定を書き込んだ雛形です。 このスキンタイプの方は、CSSの末尾にコピペして利用できると思います。

:nth-child(4).menu .inner {
height:120px;
overflow:auto;
scrollbar-face-color:black;
scrollbar-shadow-color:white;
scrollbar-track-color:black;
scrollbar-arrow-color:white; }

上の図の右端はDOMで実際にこのCSS項目を書き込んで表示させバーの状態です。
●1行目の「.inner」の前は半角空白でなければ機能しません。「.」「:」「;」やスペル間違いは、機能しないか変な表示となる場合が多いです。
●2行目は「以前の記事」の年月別リンク群の入った「inner」ブロックの高さです。 書換えることで、枠の高さが調節できます。
●ブログ投稿の歴史が浅く、年月別リンク群がこの枠に収まる場合は、スクロールバーが表示されません。
●最後の4行はデザインのための色指定で、好みによりバーの色を書換え可能です。
●メニュー順位を変えている場合は、他のメニュー項目にバーが表示される場合が多いでしょう。 その場合は一行目の「4」を書換えて調節できます。



ICELANDia
もうひとつ、左側メニューの提供スキンを調べてみました。
b0174191_17010139.png
私の場合と異なるclass名を使っていますが、メニュー構造はタイトルのブロック<div class="mnttl_l">と、リンク群の入ったブロック<div class="mn_l">を交互に並べていて、私のと酷似しています。 おそらく提供スキンには幾つかの種類のメニュー構造があるのでしょう。

これは組し易いタイプで、親の指定も入れられますが、もはや省いてしまいました。 以下も同じスキンを使用されていたらコピペで有効になると思います。

:nth-child(4).mn_l {
height:120px;
overflow:auto;
width:160px; }

上の図の右端はDOMで実際にこのCSS項目を書き込んで表示させたバーの状態です。
●1行目の「.mn_l」の前は空白不要。 「_l」は「アンダースコアとエル」です。
「.」「:」「;」やスペル間違いは、機能しないか変な表示となる場合が多いです。
●2行目は「以前の記事」の本体枠のブロックの高さです。 書換えて調節できます。
●ブログ投稿の歴史が浅く、年月別リンク群がこの枠に収まる場合は、スクロールバーが表示されません。
●4行目の指定がないと、バーが右端に寄ります。メニューの縁が切れた印象を嫌って少しバーを内側に入れるための修飾です。
●メニュー順位を変えている場合は、他のメニュー項目にバーが表示される場合が多いでしょう。 その場合は一行目の「4」を書換えて調節できます。



ベーシック
提供スキンで人気順一位のスキンで、これを調べてみます。(後で調べたところスクエアベーシックも全く同構造で、以下のベーシックの雛形が有効です)
b0174191_21360167.png
これは私のと同じclass名で同構造です。 場所が左側メニューなだけ。 もう上図に答えが書いてありますが、見づらい時は画像をクリックして拡大表示してください。 デフォルトなら親「MN」ブロックの子として4番目の位置の「MNBODY」ブロックに年月別リンク群が入ってますね。
私の場合のセレクタ表記形式が、順位の数だけ変えて使えます。

.MN :nth-child(4).MNBODY {
height:120px;
overflow:auto; }

をCSSの末尾にコピペで、上図右側の様にスクロールバーが出ると思います。
●注意点は上記の2例に準じます。
●このセレクタ部の「MN」「MNBODY」は半角英大文字で書く必要があります。
●「:nth-child(4)」の前は半角空白が必須です。

このセレクタ部も、上の2例と同じ理由で、もっと簡単に

:nth-child(4).MNBODY {

で問題なく動作します。



更に、任意の他の項目もスクロール表示にしたい場合の書き方を試してみました。
これは、同内容の修飾を複数のセレクタ対象に書く「,」(コンマ)を使ったセレクタの列挙方法を使います。
例として、上のスキンで「以前の記事」と、ひとつ飛んだ「最新のコメント」だけをスクロールバー表示にします。
b0174191_22033277.png
セレクタの内容は以下です。

:nth-child(4).MNBODY,:nth-child(8).MNBODY {
height:120px;
overflow:auto; }

真ん中の「,」に続けて、順位数だけ「8」に変えたものを追加しています。
順位数は、カテゴリ「2」、以前の記事「4」、お気に入りブログ「6」、最新のコメント「8」、最新のトラックバック「10」……という要領で、上記の様に「,」をはさんで追加できます。



ダイアリー
少しメニュー構造が違うのがありました。 3番人気のこれです。 結果を簡単に。
b0174191_22260979.png
class名は私のと同じですが、メニュー項目は3個ずつが単位で、各々の真ん中にリンク群が入った「MNBODY」ブロックがあります。
カテゴリ「5」、以前の記事「8」、お気に入りブログ「11」、最新のコメント「14」、という要領(3n+2)で、順位数が決まります。
上図のセレクタ表記は下の通りで、右側の様なスクロールバーが出ます。

:nth-child(8).MNBODY {
height:120px;
overflow:auto; }



以下、人気上位はベーシックや私のと同じclass名を使い、2nか2n+1の順位数をとる構造です。

HTMLベーシック

:nth-child(5).MNBODY {
height:120px;
overflow:auto; }

順位数は「以前の記事」にバーを表示されるのもので、選べる数は
「3」「5」「7」「9」「11」……という要領 (2n+1)

Two Colors

:nth-child(6).MNBODY {
height:120px;
overflow:auto; }

順位数は「以前の記事」にバーを表示されるのもので、選べる数は
「4」「6」「8」「10」「12」……という要領 (2n)



ううむ、私のパターンのが多いですね。
以上はサイドメニューでしたが、続いてワンカラムの場合を調べてみました。
ボトムメニュー篇」を参照ください。



[PR]
by Ataron | 2014-04-22 17:38 | ブログスキンのアレンジ | Comments(0)

明石公園 2014.04.20 ママの嘴

2014年 04月 20日
今日は出かける時に少しポツリという天気。 PointOldに着くとキッズらしき姿があり、最近はこの周辺にいつもいるのかも。 すぐにママは近くの枝に来て、私を見下ろしているのです。 さっそく物資輸送、今日はドッグフードもパンパックにして来ました。

キッズは2~3個ゲットしましたが、ママの要領の良さとは正反対で、草叢に落ちたのを一向に見つけられずウロウロしているのです。 まあ、人でいうと小学生くらいなのかも。 ママは相変わらずで、ハトにおすそわけのカケラを飛ばしたのも、なんで君達がと取ってしまいます ^^;   まあ、あつかましいぐらいでないと生きては行けません。 このカケラで一瞬争奪モードに入って私にえらく近付いてしまい、それに気付いてなんとなくバツが悪そうな顔をしたりで。

ママが珍しく私の目の前でカキカキしました。
b0174191_21073997.jpg
写真を見ると鼻をかいてる様です。カラスの場合は、嘴の根元の毛の下に鼻の穴は隠れているそうです。
b0174191_21095403.jpg
ママの嘴の傷は、やはり未だあります。 昔からのものなら良いのですが...
b0174191_21132608.jpg
と言ってます。



あっというまに物資は無くなりました。 雨が降りそうなので早めに引き上げ始めると、やはり後を付いて来ます。 今日はキッズも遠巻きに少し着いて来ました。
b0174191_21165274.jpg
余りこっちを向くわけでなく、なんとなく距離をとってはいますが。

ママは低い枝を渡って来る傾向が増していて、たまに私の脇を飛んですりぬける事もあり、驚きます。 面白いのですが、他の人がいたらどうしたものか...
背丈より少し上の枝にとまって私を見ているママです。
b0174191_21233761.jpg



EOS7D + EF70-200mm F4L IS USM で撮影、画像はクリックで拡大表示します。





[PR]
by Ataron | 2014-04-20 21:30 | 鳥さんの写真 | Comments(0)

要素名とはなんぞや

2014年 04月 20日

「:nth-child(n)」というセレクタ記述を使おうとして、色々な解説ページを漁っていると、「要素」「要素名」などの意味が漠然として良く判らなくなって来ました。 このセレクタに関しては、これらの意味をはっきり理解していないと、間違った記述になって思い通り動作しなかったりします。

===「要素」「要素タイプ」「要素タイプ名」に関する参考文献引用 ===
 "段落を示すp" "本文を表すbody"などの定義によって文書の構成単位を(抽象的に)示すときは「要素タイプ」(element type = JIS用語では要素型)と呼ばれ、それが実際にHTML文書中に出現しているものを「要素」と呼びます。 ………  "要素タイプp"はそれぞれのDTDにつき一つしかありませんが、実際の文書に出現する"p要素"は段落の数だけ存在します。

またタグに記述する時に使うhead, bodyなどの名前は「要素タイプ名(JIS用語では要素型名)」で、厳密にはこのような使い分けがあります。しかし、この違いを区別して説明するとかえって煩雑になるため、「要素」という言葉で代用される場合が頻繁にあります。
===============(以上、参考引用)================

上記引用を理解した上で、普通に使うセレクタをあらためて吟味してみます。

p {}
要素型セレクタの書式で、pタイプの要素を指定範囲とするもの。
これはp一文字だけで既にセレクタになっている。

p.xxxchan {}
クラスセレクタの書式で、xxxchanのクラス名を付けられたpタイプの要素を指定範囲とするセレクタの記述。 
p.xxxchanの全体がひとつのセレクタ。
あるクラスセレクタの説明文献で「要素名に続けてクラス名を指定する方法」と記されているが、厳密には「要素タイプ名に続けてクラス名を指定する方法」と言うべきでしょう。

.xxxchan {}
xxxchanのクラス名を付けられた要素を、要素タイプを限定せずに指定範囲とするセレクタの書式。
.xxxchanの全体がひとつのセレクタ。



さて、本題の「:nth-child(n)」についてのある文献の説明に、

  E:nth-child(n)  親要素のn番目の子要素
   書式    E:nth-child(n) {プロパティ名:値;}
   適用対象  n番目の子となるE要素

とあります。この書式には親要素の記述自体は出て来ないことに注意してください。 「子要素が並んでいる時に、そのn番目」というセレクタ表記を言っているだけです。
また、「E」は「E要素」と説明されています。 最初の厳密な解釈をここで反芻すると、「E」は<xxx></xxx>の形でHTML上に書かれた要素であるなら、「要素タイプ」を限定しないという意味でしょう。

私が前回にここの「E」に「.MNBODY」を置いたのですが、これは書式違反と思えます。「.MNBODY」は要素を指す「セレクタ」であって、「要素」または「要素タイプ」にあたらないからです。 これがDOMが配置を置き換えた理由でしょうか? もし書式に忠実ならば、
  div:nth-child(8)
と記述すべきでしょう。 「div」は「要素タイプ」ですから。
では、
  div.MNBODY:nth-child(8)
はどうでしょう。 divは入っているものの、「div.MNBODY」はやはり「ひとつのセレクタ」であり、「要素」や「要素タイプ」ではないので書式違反に思えます。
しかし、実際には、どれもIEは問題なく動作します。 これはIEの柔軟さなのか、このセレクタの書き方も CSS3の規格で許可されているからでしょうか?

このセレクタの記述で、思わぬ場所に修飾が反映しない様に、なるべく指定範囲を明確にしておきたかったわけで、
  .MNBODY:nth-child(8)
としたわけですが、DOMの置き換えは気になります。



さらに今回は親を指定して指定範囲を明確にしたました。 このセレクタの使用では、この様な必要は普通にあるでしょう。
親の特定を盛り込む表記の方法としては、「子孫セレクタ」や「子セレクタ」のセレクタ表記方法(書式)が使えます。

  子孫セレクタ:   セレクタ セレクタ    下の階層の子孫要素
  子セレクタ :   セレクタ>セレクタ   直下の階層の子要素

下の方がより狭い範囲を指定できますね。
これらは2個のセレクタを列挙してひとつのセレクタとして機能しますから、「E:nth-child(n)」というセレクタの前に、親を特定する別のセレクタを並べるのは違反になりません。
  .MN div:nth-child(8)
というセレクタの表記は、後ろ指をさされる心配のない由緒正しい書き方ですね。



「検索」の文字の前に「このブログ内を」を入れたアレンジも「E:nth-child(n)」を使いましたが、ここでは「:before」という書式を盛り込む必要があり更に複雑になりました。 DOMの修正には二重のコロン"::"が出てきました。

文献に『 CSS3より擬似要素に付けるコロン( : )が2つになって、疑似クラスとの違いが分かりやすくなっています。 ただし、コロン2つの記述方法は、IE8以前ではサポートされていないので、 これらの旧いブラウザを考慮するなら、疑似要素についてもコロン1つにしておいたほうが良いでしょう。』という一節がありました。 二重のコロンはこれに該当するのでしょう。

結局、私が到達したセレクターの表記は、
  .MN .MMTTL:nth-child(1):before
というものですが、ここを違反を避けようとして
  .MN div:nth-child(1):before
という表記にすると、妙な場所にも「このブログ内を」が出てきてしまいます。  調べると「子の階層」で最初の「div」だけでなく「孫の階層」で最初の「div」にも修飾が適応されています。 これを防ぐには「子セレクタ」を使い
  .MN>div:nth-child(1):before
とすれば上手くゆきました。 由緒正しい記述にするならこれしかなさそうです。
まあ、こういうアレンジが必要な場合でなければ、重複したセレクタ表現は、対応するブラウザの範囲をせばめるでしょうから、余り賢くないのは明らかですね。



ここの内容を何度も読み返している内に「擬似要素」という意味がしっくりして来ました。 「:nth-child(n)」はあたかも「要素」として振舞うことが出来るという意味だと思えます。
クラスセレクタの書式は上記のとおり、
  要素タイプ名.クラス名 { }
ですから「:nth-child(n)」を「要素」と同じ様に扱い、そのタイプを示すものとして、
  :nth-child(n).クラス名 { }
というセレクタ表記が成り立ちます。
DOMが置き換える理由は、
  .クラス名:nth-child(n) { }
という記述は誤りだが、上側なら誤りでないということでしょう。

私が現状で理解/推測出来る範囲はここまで、いずれもっと解って来るでしょうが。



[PR]
by Ataron | 2014-04-20 13:44 | スキン等の覚書き | Comments(0)