- ベストアンサー
折りたたみリンク？の作成（記事数付き）
ＮＩＮＪＡブログをやっているのですが、カテゴリが増えて来て文字を追うのが面倒になってきますので、折りたたみをして表示をコンパクトにしたいと思っています。 今は以下のものしか書かれておりませんので通常通りずらっと表示されています。 <!--plugin_category--> <div class="plugin_data"> <a href="<!--$plugin_category_link-->"> <!--$plugin_category_title--> (<!--$plugin_category_num-->) </a> </div> <!--/plugin_category--> 欲しいのは、たとえば 「記事Ａ（５）」 「記事Ｂ（６）」 とあって 「記事Ａ」をクリックすると 「記事Ａ（５）」 「記事Ａ１（２）」 「記事Ａ２（３）」 「記事Ｂ（６）」 という風に表示されるようにしたいんです。 文字としての表示ならできますが、記事数が変わったら変わる表示が出来ないのでご教授お願いします。
- eva0
- お礼率81% (725/894)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ＮＯ１です。 <BODY><SCRIPT language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> <!--複数使用するときは、これから下の部分をコピーして、赤色の部分を変更してから使用してください。--> <B><A HREF="JavaScript:ok('tree1');">■メニュー(5)</A></B><BR> <DIV ID="tree1" style="display:none;"> ┣ 小技集<BR> ┣ 役立つ雑学<BR> ┣ ウザイページ<BR> ┣ JavaScriptを勉強<BR> ┗ 掲示板<BR> </DIV> </BODY> 上のやり方だと ただ私が（５）と入れただけですが、ツリーを開くとこんな感じ ■メニュー(5) ┣ 小技集 ┣ 役立つ雑学 ┣ ウザイページ ┣ JavaScriptを勉強 ┗ 掲示板 ツリーを閉じると■メニュー(5) だけになりますが、あってますか？？ 子供のの方にも（１）等自分で書けばもちろん付けることはできますが、 そういうことを質問されているのでしょうか それともそんなことはわかってるんだ、もっと合理的な事を…ということでしょうか(^_^;) 本当すみません＾＾
その他の回答 (4)
- kasumimama
- ベストアンサー率44% (1218/2747)
自動でするのは…ごめんなさいわかりませんでした。 出来ないと思います…。 自分でするの面倒ですか？(^_^;) そんな頻繁じゃないですし付けたすだけだし出来ない事はないですけどね＾＾ あまりお役に立てなくて残念です。すみませんでした。
お礼
幾度も返答ありがとうございます。 いえいえ、こちらこそ、わがままばかりですみませんでした。
極論からすると、カテゴリへのLINKをツリー形式に出来ても、記事数を変動させるのは無理です。 コレはCGIの分野でHTMLやjavascriptの範疇外。 拠って諦めるしか無い。
お礼
回答ありがとうございます。できないんですね・・・。諦めるしかないですか・・・。
- kasumimama
- ベストアンサー率44% (1218/2747)
ＮＯ１です。 （１）とか（２）とかを書きたいのは理解しましたが、 それは自動でということですか？？？ それとも 単に自分で書いたらダメなのですか？？ 自分で書くなら普通に書けばいいだけなのですが、すみません理解不足で(^_^;)
- kasumimama
- ベストアンサー率44% (1218/2747)
すみません。質問の意味がすこしわかりません。 とにかく上のように表示されればいいということですか？ http://lll.s21.xrea.com/m/link/37.html 私はこれで複数のツリーを作成しました。 参考になさってみてください。 補足があればまた回答しますが、もっと上手に説明できる回答者様がいらっしゃるかも＾＾
お礼
速い回答ありがとうございます。 説明下手で申し訳ないです。一応、補足説明として少し入れさせていただきましたが理解していただけたでしょうか？（まだ、わからないかもしれませんけど・・・）
補足
そうですね。 実際は、記事ごとにカテゴリごとのリンクが貼ってありますが、表示の仕方としてはそういう表示にしたいと思っています。 さらに、＋αで「記事数」が最後につく形にしたいです。（親記事に子記事の合計記事数を（〇）で表示） 文字だけの表示ならできますが、記事数も考慮してとなるとどうにも分からないんです。
関連するQ&A
- WP タクソノミー前後の記事リンクについて
お客様の声：タクソンミー名(voice) ようにarchive-voice.phpを作りました。 記事の中身表示はsingle.phpはつくらず、ブログ用のindex.phpと共通にしました。 ブログ用のindex.phpには ↓↓↓↓ <!--内容の出力--> <?php if(is_home() || is_category() || is_archive()): ?> <div class="kiji"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="kiji-box"> <p class="catch-taitle"><span class="styledeco"><?php the_category(','); ?></span></p> <!-- アイキャッチ画像設置 --> <?php if (has_post_thumbnail()): ?> <?php the_post_thumbnail('medium'); ?> <?php else: ?> <?php echo '<img src="'.get_template_directory_uri().'/img/noimage.gif" alt="noimage" />'; ?> <?php endif; ?> <h2><a class="linktitle" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p><?php echo mb_substr(get_the_excerpt(), 0, 120); ?><a class="linkleft" href="<?php the_permalink(); ?>">続きを読む</a>]</p> <div class="postinfo"><?php echo get_the_date(); ?>（<?php the_time(); ?>）<?php edit_post_link(' Edit',' |',''); ?></div> </div> <?php endwhile; endif; ?> </div> <?php else: ?> <!--フロントページ、アーカイブ、カテゴリ--> <!--単独ページ--> <?php if(have_posts()): while(have_posts()): the_post(); ?> <h2 class="blog-title"><?php the_title(); ?></h2> <div class="postinfo"><?php echo get_the_date(); ?>（<?php the_time(); ?>） | カテゴリー：<?php the_category(','); ?><?php edit_post_link(' Edit',' |',''); ?></div> <div class="blog_img"><?php if (has_post_thumbnail()): ?> <?php the_post_thumbnail('full'); ?> <?php endif; ?></div> <?php the_content(); ?> <?php endwhile; endif; ?> <?php endif; ?> <!--内容の出力ここまで--> <!--ページ送り--> <?php if (function_exists("pagination")) {pagination($additional_loop->max_num_pages); } ?> <!--個別の記事のページ送り--> <div id="pagelink"> <?php if(is_single()): ?> <p class="cell1"><?php previous_post_link('←%link', '%title', true, ''); ?></p> <p class="cell2"><?php next_post_link('%link→', '%title', true, ''); ?></p> <?php endif; ?> これだと、お客様の声のページに 記事の前後のリンクが表示されません。 <?php previous_post_link('« %link', '前の記事', TRUE, '', 'voice'); ?> <?php next_post_link('%link »', '次の記事', TRUE, '', 'voice'); ?> としてみたのですが、やはり表示されませんでした。 お客様の声とブログを共通にしているから表示されないのでしょうか・・・？
- 締切済み
- PHP
- ブログのカテゴリ別記事一覧を折りたたまない方法
FC2ブログで、フリーエリアに「カテゴリ別記事一覧」を入れました。カテゴリをクリックすると一覧は出るのですが、ひとつ記事をクリックすると、閉じてしまいます。いわゆる「折りたたまない」仕様にしたいのですが、なんとかなるでしょうか。 そもそも、タグというものをまったく勉強せずに、カンでやっているので、「ちゃんと勉強しろ」と言われると小さくなってしまうのですが・・・。 使っているテンプレートは2カラム。本来はカテゴリをクリックした時、記事部分に「カテゴリ別記事一覧」が出ます。 テンプレートのHTMLからその「カテゴリ別記事一覧」の部分(と思われる)↓ <!--category_area--> <div class="free_category"> <p>カテゴリ：<%sub_title> の記事一覧</p> <ul> <!--topentry--> <li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li> <!--/topentry--> </ul> <p class="content-nav" align="center"> <!--prevpage--> <a href="<%prevpage_url>" title="前のページへ">≪新しい記事一覧へ </a> <!--/prevpage--> <!--nextpage--> <a href="<%nextpage_url>" title="次のページへ"> 古い記事一覧へ≫</a> <!--/nextpage--> </p> </div> を切り取って、「プラグイン3」の「フリーエリア」に貼り付けました。 現在は、(カテゴリ別記事一覧)というタイトルのみ出ています。(折りたたまれている) 上部のブログタイトルの下に表示されているカテゴリ(そういうテンプレートです)をクリックすると、 きちんと選んだカテゴリの記事一覧が左側のカラムに出て、そのうちのひとつクリックすると、右側に記事が全文開く。 ・・・・という所までは理想どうりなのですが、 ひとつ記事を開いてしまうと、先ほど開いたカテゴリの記事一覧が閉じてしまいます。同じカテゴリの記事を続けて読めるように、一度開いたカテゴリ別記事一覧を、そのまま開いた状態にキープしたいのですが、簡単な方法(笑)はありますでしょうか。 ネットを少し検索しただけでは、「折りたたみ」「折りたたむ」「折りたたみたい」という記事はたくさん見つかったのですが、 「折りたたみたくない」「折りたたまない」となると案外発見できず・・・。 テンプレートの <!--メニュー開閉スクリプト--> <script language="javascript"><!--function init(){<!--date_area--> document.getElementById("p1-calender").style.display = "block"; <!--/date_area-->}function switchover(id){ if(document.getElementById){ if(document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; }else{ document.getElementById(id).style.display = "block"; }}}//--></script> <!--/メニュー開閉スクリプト--> ここをいじるのでしょうか。 あるいは <!--プラグイン3--> <!--plugin_third--> <div class="menu_body3"> <h3 class="menu_title3"><%plugin_third_title></h3> <div style="text-align:<%plugin_third_ialign>"><%plugin_third_description> </div> <%plugin_third_content> <div style="text-align:<%plugin_third_ialign>"><%plugin_third_description2> </div> </div> <!--/plugin_third--> <!--/プラグイン3--> こちらなのか・・・。開閉スクリプトの(id).style.display = "none";←をなんとなくblockにしてみたりもしたのですが、特に変化はなく。 根本的に作り直すというと、とても私の技量では無理なので、もし、上記のタグに手を入れる範囲での「折りたたまない」方法があれば、お願いいたします。
- 締切済み
- HTML
- JSで動的にリンクを作成
JSで動的にリンクを作成をしたいのですがわかりません。 例を教えてもらったのですがどう書いていいのかわかりません…。 駄目な例： <div id="link"> <a href="http://aaa.aa/">aaaa</a> </div> いい例 <div id="link"></div> <script> document.getElementByID("link") に対してaddChild </script> いろいろ不足していると思いますがお願いします。
- ベストアンサー
- JavaScript
- Wordpressで記事がない場合にメッセージ表示
現在Wordpressで特定のカテゴリを一覧表示させる設定を行っています。 ただ、記事が一件もない場合に、その旨を伝えるメッセージを表示させたいのと全てを非表示にさせたいと思っているのですが上手くいきません。（メッセージを表示とコンテンツ全体非表示の2つの方法をお伺いしたいです） 以下、実際のソースになるのですが、該当するカテゴリに記事が0件の場合 「○○に関する記事は現在ありません。」 と表示させるにはどうしたらよいでしょうか？ <h2 class="entry-title">カテゴリ1の投稿一覧</h2> <div class="container"> <?php $postslist = get_posts('numberposts=-1&orderby=post_date&order=DESC&cat=1'); foreach ($postslist as $post) : setup_postdata($post); ?> <ul class="hogehoge"> <a href="<?php the_permalink(); ?>" ><img src="<?php echo catch_that_image(); ?>" /></a> <li><a href="<?php the_permalink();?>"><b><?php the_title(); ?></b></a><br /> <a href="<?php the_permalink();?>"><?php echo mb_substr(get_the_excerpt(),0, 80);?>…</a> </li> </ul> <?php endforeach; ?> </div><!-- /container --> 2つ目の質問となりますが、投稿が0の場合にメッセージの表示ではなく、 <h2 class="entry-title">カテゴリ1の投稿一覧</h2> から、 </div><!-- /container --> まで、全てのレイアウトを含めた表示を非表示にするにはどのような定義を行えばよいでしょうか？ 試行錯誤試してみたのですが、本件2つの方法が解決できませんでした。 お詳しい方いらっしゃいましたらアドバイスのほどお願いいたします。 よろしくお願いします。
- ベストアンサー
- PHP
- 「記事の折りたたみ・展開」について教えてください。
「記事の折りたたみ・展開」について教えてください。 折りたたみ時に、文章が一定の文字数、もしくは規定の高さを超える場合、途中まで表示して文末を「...」と省略し、”続きを見る”というリンクをクリックしたら、記事が展開されて本来の文章が見えるようにしたいのですが、参考になるＵＲＬ等ございましたら教えてください。
- ベストアンサー
- HTML
- ウィジェットの記事上から記事下へリンクを飛ばす
WordPressのウィジェットから、 『投稿記事の上に一括表示』 に、<a href="link">リンク</a>を置いて、 『投稿記事の下に一括表示』 に、<p id="link>リンク先</p>と置く。 記事上のリンクをクリックしたら、記事下のリンク先へ飛ぶようにしたいです。 一度、試してみたのですが、 リンクをクリックしても、別ページの404エラーになるだけです。 すべての記事の上にリンクを置いて、 すべての記事の下のリンク先に飛ばすようにするには、 どのようにすればできるでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- 記事カテゴリ内でグループ分けは出来ますか？（seesaa）
現在seesaaブログを利用しています。 それで質問なのですが、タイトルに書いたように、記事カテゴリをグループ分けすることは出来るでしょうか？ たとえば、記事カテゴリが、 テニス 野球 水泳 朝食 昼食 夜食 と６つあった場合、左バーに表示されるのが カテゴリ ●スポーツ● テニス 野球 水泳 ●ごはん● 朝食 昼食 夜食 このような感じで、グループ分け出来ればと思うのですが、無理でしょうか？ ちなみに、カテゴリ部分のHTMLは <div class="sidetitle"><% content.title %></div> <div class="side"> <% content.header -%> <% loop:list_category -%> <a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br /> <% /loop -%> <% content.footer -%> </div> となっているのですが見方がよくわかりません。 article_count というのが、記事カテゴリ表示数なのかな？とは思うのですが、その後の部分がわかりません。 たとえば、記事表示順位の３番までをひとくくり、４番～６番までをひとくくり みたいには出来ないのでしょうか？ 長くてすみませんが、どうぞよろしくお願いいたします。
- 締切済み
- ブログ
- Firefox のバグ？ネスト時のレンダリングについて。
Firefox のバグかと思い調べたのですが、調べ方が悪いのか解決策を見出すことができませんでした。 問題ですが、まず以下のHTMLソースをコーディングしました。これを iframe.html として、別のファイルから参照させます。 ■iframe.html の中身 <style type="text/css"> .Link{font-size:10px;color:blue;cursor:hand;} .Title{font-size:14px;color:#000;} .Text{font-size:12px;color:#000;} </style> <table> <tr> <td> <a href="Link1" class="Link"> <div class="Title">text</div> <div class="Text">text</div> </a> </td> <td> <a href="Link2" class="Link"> <div class="Title">text</div> <div class="Text">text</div> </a> </td> </tr> </table> ■別ファイルの中身 <body> <iframe src="iframe.html"></iframe> </body> なぜこういう構造になっているかというと、まず a タグの アンカー機能を子要素に継承させ、その中の a タグにネストされるどの部分をクリックしてもリンク先を同じにしたいからです。 IE,Opera等では問題ないのですが、Windows版 Firefox2 で確認し、何度もリロードしているとたまに、 .Title と .Text が効いてないような表示になります。それも必ず後に記述されている td 側の中身が。 はてな、と思いFirebugでみてみると、以下のようにレンダリングされていました。 <a href="Link2" class="Link"> <div class="Title"><a href="Link2" class="Link">text</a></div> <div class="Text"><a href="Link2" class="Link">text</a></div> </a> この原因がわかりません。 以下のような構造にして、 <div> <div class="Title"><a href="Link2" class="Link">text</a></div> <div class="Text"><a href="Link2" class="Link">text</a></div> </div> CSSを編集すれば解決することなのですが、 Link2 のURLは非常に長く何回もアンカータグを記述するのは避ける必要がありました。 どうかよろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- リンクの色について
スタイルシート部分を .navi1 a:link, .navi1 a:visited{ display:block; background-image:url(images/1.gif); text-decoration:none; line-height:30px; font-size:12px; text-align:left; height: 30px; padding-left:11px; font-weight: bold; color: #00FF00; } .navi1 a:hover, {text-decoration:none; color:#FFFF00;} .top a:link, .rank a:visited{ color:#379E02; } .top a:hover{ color: #FF0066;} HTML部分を <div class="navi1"><a href="#">テキスト１</a></div> <div class="top"><a href="#">テキスト２</a></div> とした時に、IEでは思ったように表示されるのですが FirefoxやChromeではテキスト１は#00FF00のままマウスを乗せても色が変わらず テキスト２は色が紫になっています。 これをIEと同じ様に表示させるにはどうすればいいのでしょうか？
- ベストアンサー
- HTML
- Tumblrで記事中にリンクが貼れない
Tumblrで「Aa テキスト」の所から記事を書く際に、 記事中にリンクを貼ろうとしたら、うまく表示されません。 例えば「パソコン」という文字にリンクを貼って、パソコンの画像検索ページに飛ばそうとする時。 「この<a href="画像検索ページのURL">パソコン</a>がおすすめ！」 と記事を書いて保存すると、Tumblrの自分のサイト上で 「この<a href="画像検索ページのURL">パソコン</a>がおすすめ！」 とそのままタグが表示されてしまいます。 ダッシュボードで保存した記事を見てもそのままタグが表示されたり、</a>以降の「がおすすめ！」の部分までリンクの下線が続いたりします。 わかりにくくてすみませんが、どうしてTumblrの記事上でリンクが貼れないのでしょうか？ 記事中の文字を押すとその言葉に関連したページなどに飛べるようにしたいので、Tumblrの「リンク」ではなくhtmlで組み込めるようにしたいです。 どうかご示唆のほどよろしくお願い致します。
- 締切済み
- ブログ
お礼
回答ありがとうございます。 2度も回答していただいたのでわがままですいません。
補足
説明不足すみません。 例では、１例を上げただけです。 もし、「記事Ａ１」のカテゴリで記事を新たにＵＰした場合、その 親である「記事Ａ（５）」が「記事Ａ（６）」になってるようにしたいのです。 もちろん子の方も「記事Ａ１（３）」になってるのが正解となります。 つまりどんどんカテゴリで記事を上げるたびに記事数の書き換えとなると辛いので自動で数値が上昇する仕組みを聞きたかったんです。