人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

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

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)



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



by Ataron | 2014-04-22 17:38 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。