「続きを読むタグ」について

Simplicityの特徴 フォーラム Simplicityについての質問 「続きを読むタグ」について

このトピックには12件の返信が含まれ、2人の参加者がいます。2 年前 ゆうき さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #32745 返信

    ゆうき

    「続きを読むタグ」について質問です。

    いろいろ調べて実践してみたのですが、
    未だにできていません。

    私の認識は、文章と文章の間を1行ほどあけて、
    そこに「続きを読むタグ」のボタンを押してページを開くと、
    下の部分が「続きを読む」で見えなくなり、
    クリックすると見えるようになるという認識です。

    しかし、いくら試してみてもそうはなりません。

    これは、ただこのタグのボタンを押せばよいのではなくて、
    CSSや何かをいじる必要があるのでしょうか?
    それとも他に何か方法があるのでしょうか?

    そういった記事を探してもどこにもなかったので、
    質問させていただきました。

    教えてください。
    よろしくお願いします。

  • #32746 返信

    Hidekichi

    どのような表示にしているかによるんだろうと思います。

    本文表示にすればmoreタグは有効になります。が、これはトップのリスト表示の部分での話で、記事のページに行けばmoreタグが入っていても記事全部が見えます。

    トップページはいくつか表示方法があり、本来moreタグは、記事が並んで表示している所に、それぞれの記事本文が全部表示されていると次の記事までに現在の記事を全部読まないといけないのがアレなので、途中省略して全部読みたい場合は続きを読むと言うリンクをクリックすることでその記事ページに飛ぶと言うものかと思います。

    なので、カスタマイザーで、リスト表示ではなく、本文表示にし、それぞれの記事にmoreタグを入れることで、言われてる動作をするかと思います。

    通常のリスト表示は、記事本文先頭から設定した文字分を抜き出して、リストアイテムに表示してます。これは、moreタグを入れるの面倒臭いから適当な所で抜粋しといてよって感じのものです。なので、リスト表示の場合はmoreタグを入れなくてもだいたいの文字数の所で記事を読むが表示されるというわけです。

    一度、moreタグを入れた何かしらのテスト記事を作って、カスタマイザーのレイアウトのあたりから本文表示を選択してみて下さい。
    新しいバージョンでは、最初の記事だけ本文表示ができるようにもなっています。

  • #32749 返信

    ゆうき

    Hidekichiさん、お返事ありがとうございます。

    いま言われたようにmoreタグを入れた何かしらのテスト記事を作って、
    カスタマイザーのレイアウトのあたりから本文表示を選択してみたのですが、
    それでもできませんでした。

    ただ、他の方法で試してみたところ、
    「続きを読む」というタグを文章上につけることには成功しました。

    ですが、ここでひとつ質問です。

    私が実行したいのは、「続きを読む」というところをクリックすると、
    折りたたみ式で下に文章が表示され、もう一度押すと戻るといったようなものです。

    でもここでいう「続きを読む」というタグは、他のページにリンクを飛ばすといったようなものですか?
    それとも、上記のような折りたたみ式にすることも可能でしょうか?

    もし可能でしたら、何かCSSかhtmlの例のようなものを貼り付けていただくことはできますか?
    それをそのまま文章だけ変えて使うことができたら初心者にとって一番簡単だと思うのです。

    お手数かもしれませんが、お願いできますでしょうか?
    よろしくお願いします。

  • #32750 返信

    ゆうき

    ちなみに、他のサイトに記載されていた折りたたみの方法も試してみたのですが、
    「続きを読む」というタグを表示するところまではできても、それをクリックしても何も反応がありません。

    僕が思うのは、Simplicity自体に何か設定がしてあって、
    折りたたみができないようになっているのではないかということです。

    それは先ほどHidekichiさんの言っていたレイアウトをいじるだけでできるのか、
    他にしなければいけないことがあるのかはわかりませんが、
    そこで止まっているので、助けていただけたら嬉しいです。

    表示するところまでですが、参考にしたのは以下のサイトです。
    http://fukafuka295.jp/hp/hp_no10.html
    http://customizefc2blog.blog.fc2.com/blog-entry-18.html

    JavaScriptの設定が必要なものに関しては、
    Simplicityのどれにそれがあたるのかがわからなくてできませんでした。
    CSSなのか、他のものなのか。

    先ほどのメールと合わせて、どうぞよろしくお願いします。
    ありがとうございます。

  • #32751 返信

    Hidekichi

    なるほど、やりたいこととしては、moreタグまでを表示して、そこで「続きを読む」を表示し、それをクリックしたら全文が見れるようにしたいということですね。

    これはできるかできないかで言えばできますが、Simplicityの場合は様々な表示モードがあるのですべてに対応するということはそれぞれのhtml構造がどうなっているか、あるいは、それらすべてを網羅するのがとても面倒なので、「こういったケース」と言う限定モードでjQueryを使えばできます。
    ただし、全部をjQueryでやるのも案外面倒なので、phpで何かしらhtmlタグを入れたりする必要もあるのです。

    jqueryだけでやると、絶対と言っても過言でないほどに、一瞬全ての記事本文全体が表示され、その後で折りたたみの動作に入ります。なので、予めタグを入れて先頭文章表示(moreタグまで。タグ以降を非表示)という感じにする必要があります。非表示になっていれば、後はクリックで表示するだけなので特別大変なことではないです。
    このmoreタグから、記事末尾までを囲むhtmlタグをどのようにして入れるかが問題点となります。

    moreタグが入っているかどうかは、functions.phpで色々処理してる部分があるので、moreの後に何かしらのdivなりのタグを入れることは問題ではありません。そこから、記事末尾の閉じタグを入れる部分が案外問題かも知れませんね。

    というのは、
    ・ウィジェットを使っていたりして、思わぬ部分に終了タグが入るかも知れない
    ・広告はGoogleなら1ページ3つ(場合によってはそれ以上もokのケースもあるとか聞いたこともあります)の制限があるのでどこに広告を入れるかが問題
    ・シェアボタンなどの非同期カウンタの処理の問題
    等、色々と修正しないといけない場合があります。

    仮に、「シェアボタンは追従シェアボタンを使うので本文の中には入れない」「広告はサイドバーにしかいれないから問題ない」「ウィジェットは本文には利用していない(してても良いのですが閉じタグ付近にあるとどうなるか不明)」などの条件で、ひとまずページができているかどうかが前提になります。
    これらができていて、非表示部分を囲むタグがfunctions.phpや、各phpファイル(entry-body.php)などで挿入可能であるなら、jQuery自体は初歩の初歩で書けます。

    上記のような条件でページをまず作り、どこに閉じタグを挿入すべきかを考える必要がありそうです(始まりのタグはmoreタグの後で良いので)。


    文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章
    <!–more–>
    [a class=”open” href=”#” data-id=”ID”]続きを読む[/a]
    [div class=”test id”] ←これを入れて
    文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章 文章
    [/div] ← これを入れる場所が設定により色々ありそうに思います。

    cssで、

    .test {
      width: 100%;
      height: 0;
      opacity: 0;
      transition: .3s ease;
    }
    .show {
      height: 100%;
      opacity: 1;
    }

    jQueryで、

    $(function(){
      $(".open").on("click", function(){
       var id= $(this).data("id");
       $(".test."+id).toggleClass("show");
       $(".test."+id).append("<button>折りたたむ</button>");
      });
    
      $(".test."+id).find("button").on("click",function(){
        $(".test."+id).toggleClass("show");
      });
    });

    今、適当にそして想像で書いたので、正しく動くかどうかはわかりませんけど、こんな感じかと思います。

    要はjQueryの部分は色々と検証したりできるんですけど、どのような記事の構成でサイトを公開しているのかがわからないと、どこに非表示部分の閉じタグを入れて良いのかわからないと言うことなんですね。
    で、おそらくアニメーションしたりして非表示部分を表示したいと思うのでcssで色々できるようにも想定しました。
    jQuery3.0からcssでdisplay: none;になっているものは、jQueryの.show()や、.slideIn()などで表示できなくなります。ここらも加味してみました。

  • #32756 返信
    わいひら
    わいひら
    キーマスター

    Simplicityのデフォルト機能で「続きを読む」を使うとしたら、「本文表示」設定で以下のような表示&動作になるだけです。
    http://www.wakatta-blog.com/

    僕が思うのは、Simplicity自体に何か設定がしてあって、
    折りたたみができないようになっているのではないかということです。

    こういったことをやる意味がないので、Simplicityでは行っていないです。

  • #32774 返信

    ゆうき

    Hidekichiさん、、
    ありがとうございます。

    教えていただいたようにやってみたのですが、
    何も変化がありませんでした。

    この「続きを読む」タグというのを設定するのは、
    簡単ではないのですね。。

    ネットではたくさんの折り返しのCSSやHTMLが載っているのですが、
    Simplicityにそれを貼り付けるだけではできないようになっているようです。

    もしSimplicityを使っている人で、既にそれができている人がいたら、
    ぜひそのCSSカHTMLを教えて欲しいです。

    初心者にとっては、それをただ貼り付けるだけでできるというのが、
    一番簡単でありがたい方法です。

    もちろん、Simplicityの設定のここを変えてというものがあれば、
    それも指示していただければ簡単です。

    とにかく、何かを付け加えたり変えたりする上で、
    細かな場所がわからなかったら素人にとってカスタマイズは難しいですね。。

    もしこれを貼り付けるだけでできるというのがあれば、
    ぜひ教えてください。よろしくお願いします。

    わいひらさん、
    ありがとうございます。

    これは、Simplicityでは、折りたたみのようなことはできないということでしょうか?
    目指しているのはこういう感じです。
    http://fukafuka295.jp/hp/hp_no10.html
    http://customizefc2blog.blog.fc2.com/blog-entry-18.html

  • #32775 返信

    Hidekichi

    >この「続きを読む」タグというのを設定するのは、
    >簡単ではないのですね。。

    いや、仕組みは簡単ですよ。
    Simplicityは色々なモードがあって、全部に合わせるのは難しい、あるいは面倒と言うだけです。

    特定の状況がいるわけです。

    おそらくこういう感じのだろうというサンプル | jsFiddle

    上のぐらいのであれば15分ぐらいで作れる話です。関係ない部分のcssの打ち込みとhtmlを作成するのが圧倒的に時間がかかります。いわゆる続きを読むの処理の部分は、全体の2割もありません(笑)

    Simplicityでこれをやるには、moreタグの開始はmoreタグを見たら入れられるんですけど、前のレスにも書いたように、閉じタグを入れるのがSimplicityの場合は、どこにするかが問題なわけです。これもfunctions.phpで入れられるかも知れませんけどね。

    moreの処理をしている部分があるので、そこに記事内のmore以降の内容が拾えるのであれば、その前後に何かしらclassをつけて、それをcssで消し、jQuery+cssで表示・非表示させるだけです。

    表示の仕方や、それを発火させるボタン等の仕組みはまた別で考えねばなりません。

  • #32779 返信

    ゆうき

    Hidekichiさん、ありがとうございます。

    Hidekichiさんが送ってくださったこちらのリンクですが、

    →おそらくこういう感じのだろうというサンプル | jsFiddle
    http://jsfiddle.net/yrwrua4p/

    そうです!まさにこういう感じにしたいんです!

    結論、ではこれをやるには、ただCSSやHTMLをコピペするだけではダメで、
    上記のように素人には理解するのが難しい内容を作成する必要がある感じでしょうか?
    すみません、少なくとも僕にはわかりませんでした。

    実際にHidekichiさんがそれをしないのは、
    それだけではできないからという理解であってますか?

  • #32780 返信

    Hidekichi

    まずこれをするためには、本文表示のモードでmoreタグにて続きを読むと言う状態が必要です。
    これのメリットとしては、自分の好きな箇所にmoreタグを入れれるので、moreタグを入れる箇所を任意にできるという点です。

    しかし、メリットはそれしかありません。

    記事の説明として読ませたい部分があるとすれば、それはSimplicityの抜粋機能にて代用できます。また、結局、何かしらの方法で続きが表示されるということは、ページ全体が表示されているということなので、それならそのページを遷移してアクセスしているのと変わらないとも言えます。

    短い記事ばかりであれば、実装するのに意味はあるかも知れません。が、普通にスクロールしないと最後まで読めないような記事の長さの場合は、続きを読むをクリックして全体が表示されたとして、見た目的に読みやすいかどうかは疑問です。
    これは折りたたんである部分を開いた後、それを再度閉じるためのボタンなりのデザインやスタイルによるかと思います。

    もし仮に、次の記事、前の記事を素早く選択したいと考えたら、それは現状のSimplicityでも十分可能です。記事下にそれらのリンクはあるわけですから、それを利用して、画面の両はじ中央に外向きの矢印などを入れてそこをクリックしたらページが変わると言うのは実装できます。

    また最初の方のレスでも書きましたが、記事を拡散するための機能としてSNSのシェアボタンがあります。これはその記事の各SNSのシェア数をカウントしていますが、ここらを再度調整するのが面倒臭いと言うのが大きな理由のひとつでしょうか(笑)

    SNSのボタンはその記事へのリンクとタイトルなどが入っています。またSNSによっては画像を表示したりしています。それらをsnsへ通知することは別途用意するプラグインで可能かも知れませんが、リスト表示部分で自分が手を加えるとしたらとても大変な作業です。
    更に、その記事をシェアするかどうかは記事全体がわからないとなかなかシェアしにくいものであろうとも思えます。

    記事そのものを1ページに表示すれば、これらはすべて解決できます。

    最大の理由の一つに、本文表示+続きを読むクリックで全体が表示されるシステムの場合、記事はmoreタグで折りたたまれていますが、実際は全体を読み込んでいるということがあげられます。
    これはページの読み込みスピードを遅らせることに繋がるかも知れません。

    回避しようとすれば、ページ内に表示される記事数を少なくしたり、続きを読むの非表示の部分をajaxなどで非同期で読み込むことが必要になりますが、これはとても大変な改造になります。これを念頭に考える場合は、1からSimplicityを作るぐらいの意気込みがないと難しいかも知れません。

    ajax自体は大変な作業ではないにせよ、他の部分との競合やプラグインの問題等も出てくる可能性もあります。なぜなら、基本的なプラグインは、ページがブラウザによって解析された時に実行するものが多いからです。
    ページが読み込まれた後、コンテンツに追加や変更があった場合、それに対応できるプラグインを探すのは一苦労だと思います。あるかどうかは不明。
    そうすると、元々あるプラグインを自分が修正しないといけないことにもなりうるわけです。

    僕が思うに、このクリックをして折りたたまれたものを表示すると言うシステムは、メニューであったり、あるいはSimplicityでいうと、記事の抜粋部分を短く折りたたんでおいて、読みたい人は広げて、だいたいを読むというのに利用すべきだろうと思います。

    これが有効に使えるのは、タイル2列表示や、3列表示などの表示領域が狭いレイアウトの時ではないかなぁと思ったり。実際のサンプルで言うと、tumblrのディスクリプションの部分のexpandみたいな使い方ではなかろうかと(該当部分はちょっと探さないと見つからないかも知れません)。

    とまぁ、色々と実装しない理由はありますが、できるかできないで言えば、できるんですが、ある日突然カスタマイズしたいなぁと思った時に、修正しにくくなるのと、上記のような理由から、そこまで手をかけてすることではないと言う理由が大きいと僕は思います。

    >結論、ではこれをやるには、ただCSSやHTMLをコピペするだけではダメで、

    moreタグ以降が何かしらのセレクタで非表示になっているというのであればcssとjQueryのコピペです。しかし、おそらくはphpによってmoreタグより前を抜き取って表示しているだろうと思うので、moreタグ以降の情報はhtml内にないのではないかと思ったり。
    ここら(functions.phpあたり)の改造が必要です。

    またcssで該当部分が非表示にはなっているとは言え、1ページ内にデフォルトで10件分の記事全体を処理することになるので、その分、表示は遅くなるでしょう。

    現状では思われているカスタマイズをするのは難しいかも知れません。ただ、その内に、わいひらさんが、そういったモードを実装しないとも限りません。多分厳しいでしょうが(笑)
    この折りたたみを開くというシステムに、これまで以上の魅力があるのであれば可能性は無きにしもアラずです。世間の動向によると言っても良いかも知れませんね(笑)

  • #32785 返信

    ゆうき

    なるほど、親切な投稿をありがとうございます。
    現状、その可能性を待ちたいと思います(笑)

    Hidekichiさん、いつも丁寧な対応で
    貴重な時間を使っていただき、本当にありがとうございます☆

  • #32808 返信
    わいひら
    わいひら
    キーマスター

    返事が遅れました。
    大変申しわけないのですが、hidekichiさんの書かれているように、苦労して実装する割には、メリットが僕にはほとんど感じられないので、機能として追加することは多分ないと思います。

    もし、参考ページなどを見て、Simplicity用にアレンジしてカスタマイズができないようであれば、慣れていない人には簡単なカスタマイズではないので、諦めた方が良いかもしれません。
    よくわからないまま、カスタマイズしても不具合の原因となることも考えられるので。

  • #32815 返信

    ゆうき

    わいひらさん、わかりました。
    ありがとうございました。

返信先: 「続きを読むタグ」について
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)