いつもお世話になってます。カテゴリーの表示方法について質問させてください。メインカテゴリとサブカテゴリの表示方法がリストの「・」になっていて、メインとサブの見分けがつきにくいって感じました。で、カテゴリ名の前に小さなアイコンを表示してわかりやすくしたいと考えています。メインとサブでアイコンの括りをわけて表示したいのですが、この変更する為にはどのファイルをどのように変更したらいいのでしょうか。いつも頼ってばかりですが、なにぶん乏しい知識なもんで・・・よろしくお願いします
引用:メインカテゴリとサブカテゴリの表示方法がリストの「・」になっていて、メインとサブの見分けがつきにくいって感じました。で、カテゴリ名の前に小さなアイコンを表示してわかりやすくしたいと考えています。メインとサブでアイコンの括りをわけて表示したいのですが、この変更する為にはどのファイルをどのように変更したらいいのでしょうか。現在のままでは、カテゴリの表示にのみアイコンをつけるのは少々困難です 但し、サブカテゴリのリストのスタイルを変えるのはスタイルシートの指定によって可能になっています。wordpress/themes/xxxxx/wp-blocks.css.phpにて、110行目あたりの #wp-calendar { empty-cells: show; font-size: 14px; margin: 0; width: 90%; } の上の行に .blockContent ul.children { list-style-type:disc; margin-left:14px; } の様な行を追加してやれば、段下げも少し深くなってリストのマークも変わるはずです。但しこの場合に、孫カテゴリも同じ形になってしまいますが・・・list-style-type:discの替わりに、list-style-image:画像ファイル名 というような指定をすればアイコンをつける事もできますが、カテゴリリストの親カテゴリを特定できるようなスタイルクラスを用意していないため親カテゴリ用のアイコンを指定する事ができないわけです。どうしても変更したいのであれば、wordpress/blocks/wp_categories.phpの92行目あたりの echo "<ul>\n"; を echo "<ul class='cat_parent'>\n"; に変更した後に、wordpress/themes/xxxxx/wp-blocks.css.phpに .blockContent ul.cat_parent { list-style-image: xxxxxx.gif; margin-left:14px; } を追加してやれば、親カテゴリ用のアイコンイメージの指定もできるかもしれません。お試しあれ!
メインカテゴリとサブカテゴリの表示方法がリストの「・」になっていて、メインとサブの見分けがつきにくいって感じました。で、カテゴリ名の前に小さなアイコンを表示してわかりやすくしたいと考えています。メインとサブでアイコンの括りをわけて表示したいのですが、この変更する為にはどのファイルをどのように変更したらいいのでしょうか。
#wp-calendar { empty-cells: show; font-size: 14px; margin: 0; width: 90%; }
.blockContent ul.children { list-style-type:disc; margin-left:14px; }
echo "<ul>\n";
echo "<ul class='cat_parent'>\n";
.blockContent ul.cat_parent { list-style-image: xxxxxx.gif; margin-left:14px; }
お返事ありがとうございます引用:現在のままでは、カテゴリの表示にのみアイコンをつけるのは少々困難です 但し、サブカテゴリのリストのスタイルを変えるのはスタイルシートの指定によって可能になっています。wordpress/themes/xxxxx/wp-blocks.css.phpにて、110行目あたりの #wp-calendar { empty-cells: show; font-size: 14px; margin: 0; width: 90%; } の上の行に .blockContent ul.children { list-style-type:disc; margin-left:14px; } の様な行を追加してやれば、段下げも少し深くなってリストのマークも変わるはずです。但しこの場合に、孫カテゴリも同じ形になってしまいますが・・・上記のような変更をしてみたのですが、レイアウトの変化が現れません・・・設定等での変更も必要なのでしょうか
現在のままでは、カテゴリの表示にのみアイコンをつけるのは少々困難です 但し、サブカテゴリのリストのスタイルを変えるのはスタイルシートの指定によって可能になっています。wordpress/themes/xxxxx/wp-blocks.css.phpにて、110行目あたりの #wp-calendar { empty-cells: show; font-size: 14px; margin: 0; width: 90%; } の上の行に .blockContent ul.children { list-style-type:disc; margin-left:14px; } の様な行を追加してやれば、段下げも少し深くなってリストのマークも変わるはずです。但しこの場合に、孫カテゴリも同じ形になってしまいますが・・・
引用:上記のような変更をしてみたのですが、レイアウトの変化が現れません・・・設定等での変更も必要なのでしょうかすみません、XOOPSで使用しているテーマの殆どでは<UL><OL><LI>タグに関するスタイル設定がいびつ(?)でたとえば番号付きリストなどが表現出来ない設定なっています。(本来list-styleは、<LI>タグでなく<UL><OL>タグに付与する属性だと思いますが・・・)小生は、XOOPSのテーマのスタイルシート(style.css styleNN.css styleMAX.css)の先頭近くにある、 ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} li { margin-left: 2px; list-style: square inside; color: #2F5376} てな部分を、 //ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} //li { margin-left: 2px; list-style: square inside; color: #2F5376} ul { margin: 2px; padding: 2px; list-style: square inside; text-align: left;} ol { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} li { margin-left: 2px; color: #2F5376} てな具合に変えて使っています。但しこれだと<UL>の入れ子による階層リストがすべて■マークになってしまうので、 //ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} //li { margin-left: 2px; list-style: square inside; color: #2F5376} ul { margin: 2px; padding: 2px; list-style-position: inside; text-align: left;} ol { margin: 2px; padding: 2px; list-style-position: inside; text-align: left;} li { margin-left: 2px; color: #2F5376} 等と設定した方が、階層に置いてもデフォルトの順番にてマークが変わって使用されるので、便利かもしれません。さらに、リストのトップ階層はXOOPSと互換を保って■マークに設定したい場合には、 //ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} //li { margin-left: 2px; list-style: square inside; color: #2F5376} ul { margin: 2px; padding: 2px; list-style: square inside; text-align: left;} * li ul { list-style-type: disc;} * li * li ul { list-style-type: circle; } ol { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} * li ol { list-style-type: lower-roman;} * li * li ol { list-style-type: lower-alpha;} li { margin-left: 2px; color: #2F5376} などと設定すれば良いでしょう。実は、ここまでXOOPS側のスタイルと変更すると、WordPress側での変更は不用になります・・但しXOOPS全体のスタイル変更になりますので他の箇所に影響が出る可能性がありますのでご注意を!以上お試しあれ!
上記のような変更をしてみたのですが、レイアウトの変化が現れません・・・設定等での変更も必要なのでしょうか
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} li { margin-left: 2px; list-style: square inside; color: #2F5376}
//ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} //li { margin-left: 2px; list-style: square inside; color: #2F5376} ul { margin: 2px; padding: 2px; list-style: square inside; text-align: left;} ol { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} li { margin-left: 2px; color: #2F5376}
//ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} //li { margin-left: 2px; list-style: square inside; color: #2F5376} ul { margin: 2px; padding: 2px; list-style-position: inside; text-align: left;} ol { margin: 2px; padding: 2px; list-style-position: inside; text-align: left;} li { margin-left: 2px; color: #2F5376}
//ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} //li { margin-left: 2px; list-style: square inside; color: #2F5376} ul { margin: 2px; padding: 2px; list-style: square inside; text-align: left;} * li ul { list-style-type: disc;} * li * li ul { list-style-type: circle; } ol { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} * li ol { list-style-type: lower-roman;} * li * li ol { list-style-type: lower-alpha;} li { margin-left: 2px; color: #2F5376}
回答ありがとうございます。教えていただいた改良はXOOPS全体に影響しちゃうんですね ちょっと怖いので現状のまま運営します。色々教えていただいたのに申し訳ありません
このプログラムは KENT 氏の yybbs を xoops(PHP) に移植したものです - KENT -