サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック
サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。 HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。 Tree view from unordered list まずは、実際のデモをご覧ください。 See the Pen Tree view from unordered list by Ross Angus (@ross-angus) on CodePen. 1つ目の「DOM構造」と2つ目の「サイトマップ」の実装は、基本的には同じです。順番に見てましょう。 DOM構造のツリービュー HTML 1つのul要素で3階層分まで、4階層目からは新たにul要素が必要となります。矩形は「DOM構造」では<code>、「サイトマップ」で
フローチャート式のサイトマップ
Result フローチャート式のサイトマップというか、サイトマップにフローチャートを利用しただけです 横向きのフローチャートと同様に疑似要素で罫線を作って繋いでいきます ある程度少なめのコードでリストの数が増えたりモニタサイズが異なっても対応できるので汎用的な印象です 内容としては今更感満載のネタですが必要になった機会があったのでおさらい css.tree, .tree ul, .tree li { list-style: none; margin: 0; padding: 0; position: relative; } .tree { margin: 0 0 1em; text-align: center; } .tree, .tree ul { display: table; } .tree ul { width: 100%; } .tree li { display: table-
Ginpen.com | Powered by JavaScript and JapaneseSushi
JavaScript and Web by Ginpei
WordPressの投稿画面で入れ子になったカテゴリ選択ボックスの階層を保つ方法 | それからデザイン スタッフブログ
WordPressで記事を投稿するとき、入れ子になったカテゴリにチェックをして保存をすると、 選択されているカテゴリが一番上に表示され、カテゴリ選択ボックスの階層が崩れて表示されてしまいます。 この現象に違和感を感じてる方もおられるのではないでしょうか？ 例えば、下のような入れ子になったカテゴリ構造だとして 中間的な親カテゴリ「海外」にチェックを入れて記事を保存すると・・・ 選択したカテゴリーが一番上に表示されカテゴリ階層が崩れてしまいます・・・ WordPressをCMSとして利用している者としては、やはりカテゴリは隣接するカテゴリが常に同じカテゴリでないと操作に迷ってしまったり、視覚的にメニュー位置でカテゴリ全体の構造を把握したほうが操作しやすいのではないでしょうか？ そこで、入れ子になったカテゴリにチェックをして保存をしても、カテゴリ選択ボックスのカテゴリ階層を保つ方法をご紹介したい
WordPress get_posts()の検索条件で、ちゃんとpost_typeを設定する | doli blog
WordPress関数「get_posts」でちょっと悩んだのでメモ。 $argsに検索条件を設定して、条件に一致する投稿データを取得するわけですが。 カスタム投稿タイプ「製品情報（products）」を作り、 そこにカ … 続きを読む »
親カテゴリーに子カテゴリーのエントリーを表示させたくない
上記ですが、解決したのですが、指定したカテゴリーを降順、昇順したいため、 <?php if (is_category(array('1','2'))) { ?> <?php query_posts($query_string . '&order=DESC&orderby=date'); ?> <?php } else { ?> <?php query_posts($query_string . '&order=ASC&orderby=ID'); ?> <?php } ?> のように書いていたのですが、ご指示いただきましたコードを追記したところ、 <?php if (is_category(array('1','2'))) { ?> <?php query_posts($query_string . '&order=DESC&orderby=date'); ?> <?php } else {
query_posts()を利用しつつ親カテゴリのアーカイブで子カテゴリの記事を出力する : 雑記帳 : rusica.net
Category: WordPress関係 カテゴリアーカイブ内の$catで取得できる値は親カテのIDだから、そのままquery_posts()に値を投げ込むと親カテと子カテの両方にチェック入れてない限り、親カテのアーカイブでは子カテの記事は表示されない。 よって、get_category_children()でその親カテに所属する子カテのIDを取得してquery_posts()に投げ込めば、子カテにしかチェック入れてない記事も親カテのアーカイブに表示させることができる。 補足。get_category_children()で取得できる値は文字列 *1なのでsplit関数 *2explode関数を使って配列形式にしてからquery_posts()に投げ込まないといけない。 //子カテゴリのIDを配列で取得 function get_child_id_Array($parrentID){ $
ol要素の入れ子で親の番号を子に割り当てる方法
ol要素の入れ子で親の番号を子に割り当てる方法を紹介します。 HTMLマークアップ <ol class="list"> <li>タイトル1 <ol> <li>タイトルA <ol> <li>タイトルA-1</li> <li>タイトルA-2</li> </ol> </li> <li>タイトルB <ol> <li>タイトルA-1</li> <li>タイトルA-2</li> </ol> </li> </ol> </li> <li>タイトル2 <ol> <li>タイトルC</li> <li>タイトルD</li> </ol> </li> </ol> 完成イメージ 完成イメージでお分かりのとおり、子リストに親リストの番号が引き継がれています。 参考：デフォルトの表示 １．CSSの設定 親の番号を子に割り当てるには、次のCSSを適用します。 ol { counter-reset: section; } l
[CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック
画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。 ピュアCSSなので、リストのアイテムは増やしても減らしても、ツリー状のスタイルを適用できます。 Parent child vertical list menu コードはこんな感じです。 HTML リストは階層ごとに入れ子を使用します。 コードは、CodeのjQueryまで。 <nav class="nav"> <ul class=list> <li> <a href="#">Home</a> <ul> <li> <a href="#">Lab</a> <ul> <li> <a href="#">Code</a> <ul> <li> <a href="#">Html</a> </li> <li> <a href="#">Css</a> </li> <li> <a href="#">Jquery<
WordPressのテーマをカスタマイズする際に便利な条件分岐タグをまとめました≫ゆきちゃん日記
このページには表示させたいけど、このページには表示させたくない！なんていうわがままを叶えてくれる、WordPressの条件分岐タグをご紹介します。
固定ページで子ページのリンクやタイトル、抜粋を一覧表示させるショートコード
固定ページで子ページを持つ親ページに使うショートコード。子ページを一覧表示させる。 出力されるマークアップは$outputの中身ですので変えたい場合はここを弄れば良いですね。
[CSS]ホバーで子がハイライト、家系図のようなツリーを実装するスタイルシート -CSS3 Family Tree
子孫のみハイライト [ad#ad-2] CSS3 Family Treeの実装 HTML ツリーはリスト要素で、各アイテムの親子関係はリストの入れ子で実装します。 <div class="tree"> <ul> <li><a href="#">親</a> <ul> <li><a href="#">子</a> <ul> <li><a href="#">孫</a></li> </ul> </li> <li><a href="#">子</a> <ul> <li><a href="#">孫</a></li> <li><a href="#">孫</a> <ul> <li><a href="#">ひ孫</a></li> <li><a href="#">ひ孫</a></li> <li><a href="#">ひ孫</a></li> </ul> </li> <li><a href="#">孫</a></l
カテゴリリスト内での特定のカテゴリとその親の判断
MTQに、「カテゴリ一覧（メニュー）について」という質問があがっていました。 この質問に答えてみます。 1.カテゴリとその親の取得 ご質問の事例を実現するには、現在処理中のカテゴリと、その親のカテゴリとを、判断することが必要になります。 現在処理中のカテゴリについて、その一番上の親から、順に階層を下って、各階層のカテゴリを得るには、MTParentCategoriesタグを使います。 ご質問の例では、「現在処理中のカテゴリと、その親のカテゴリに、カレントを示すマークをつけたい」ということです。 そこで、ハッシュを使って、それらのカテゴリに印をつけるようにします。 ハッシュに「current_cat_ids」という名前を付けるとすると、この処理は以下のように書くことができます。 <mt:ParentCategories> <$mt:CategoryID setvar="cat_id"$> <
孫カテゴリアーカイブに子のリスト表示をする
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 MTQに「孫カテゴリアーカイブに子のリスト表示をする」という質問が上がっていました。 この質問に答えてみます。 1.考え方 まず、ご希望のようなことを行う際の考え方をまとめます。 1-1.カテゴリの階層を得る 親／子／孫の3階層のカテゴリがあって、孫カテゴリのアーカイブページでだけ、特別な出力をしたいということです。 そのためには、現在出力中のカテゴリアーカイブページが、どの階層のカテゴリのアーカイブページかを調べる必要があります。 そこで、カテゴリの階層を調べる処理を行います。 MTParentCategoriesタグで、親からそのカテゴリまでを得ます。 そして、その間のカテ
Movable Typeのカテゴリリストで階層別に背景画像を変更する
Movable Typeのカテゴリリストで階層別に背景画像を変更する方法を紹介します。 １．カテゴリリストの完成サンプル このカスタマイズでは次のようなカテゴリリストを出力します。 カテゴリリストのli要素のclass属性には、階層別に異なる値を設定します。class属性値にスタイルを適用すれば、階層別に異なる背景画像を適用できます。 また、サンプルでは第3階層の最後のli要素に「last」というclass属性値も付与しています。 <ul> <li class="parent"><a href="http://user-domain/cat1/">親カテゴリ</a> <ul> <li class="child"><a href="http://user-domain/cat1/1/">子カテゴリ1</a> <ul> <li class="grandchild"><a href="http:
Movable Typeのカテゴリ・フォルダで特定の最上位階層を表示しない方法
Movable Typeのカテゴリ・フォルダで特定の最上位階層を表示しない方法を紹介します。 １．カスタマイズイメージ トップレベルフォルダが国名、サブフォルダが首都名で、サブフォルダの中にウェブページがひとつずつ入ってるフォルダ一覧（カスタマイズ前）があります。 カスタマイズ前 各ウェブページにはfooというカスタムフィールドがあり、fooに値を設定していない場合は、このフォルダ一覧でウェブページが属するトップレベルフォルダを表示しません。 例えば、「ニューヨークウェブページ」と「ソウルウェブページ」のfooに値が設定されていない場合、次のように「アメリカ」と「韓国」というトップレベルフォルダを非表示します。 カスタマイズ後 順不同リストのマークアップもvalidな内容で出力します。 ２．カスタマイズ １項のカスタマイズを行うには次のサブテンプレートを使用します。ベストプラクティスではな
Movable Typeのカテゴリリストにダミーの親カテゴリを表示する
Movable Typeのカテゴリリストにダミーの親カテゴリを表示するカスタマイズを紹介します。 １．カスタマイズのイメージ まず、次のようなカテゴリ構成を想定します。 アメリカ └ ニューヨーク カナダ └ バンクーバー 日本 └ 東京 中国 └ 北京 韓国 └ ソウル このカテゴリ構成について、親カテゴリのみを次のように「北米」「アジア」などの地域名でグルーピング表示するように変更します。 北米 ├ アメリカ └ カナダ アジア ├ 日本 ├ 中国 └ 韓国 「アメリカ」「日本」などの親カテゴリのURLは変更しません。つまり「北米」「アジア」はカテゴリとして追加するのではなく、元のカテゴリをまとめるためだけに付与するタイトルです。 ２．カスタマイズ 各親カテゴリの説明欄に、グルーピングしたい地域名を設定します。念のため子カテゴリの説明欄には何も設定しないでください。 「カナダ」の場合
ブログ記事ページに自分が属するカテゴリのツリーと直属カテゴリの他のブログ記事一覧を表示する
Movable Typeのブログ記事ページに、自分が属するカテゴリのツリーと直属カテゴリの他のブログ記事一覧を表示するカスタマイズです。 例えば「業務提携に関するお知らせ」というブログ記事ページを表示したとき、図のように、ブログ記事ページのサイドバーに自分が属するカテゴリ「親カテゴリ」「子カテゴリ」と、直属のカテゴリ「孫カテゴリ」に属する他のブログ記事「オフィシャルサイトオープン」「ホームページリニューアル」を表示します。 カスタマイズ ウィジェットテンプレートに次の内容を貼り付けてください。 <mt:if name="entry_archive"> <mt:IfArchiveTypeEnabled archive_type="Category"> <mt:EntryCategory setvar="category" /> <mt:ParentCategories> <mt:SetVar
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
特定の親の固定ページに属する全ての子孫のリストを表示する