• 本文を隠して開閉する

    2019/04/22
  • 記事を隠して体裁を整える

    記事の長さによってボックスの高さが変わると、読みにくいし、いくつあるかがわからないので、隠すことにした。
    jQueryかcssかで考えるも、本文をWordpressから取得してくるので、高さを取得するためにもjQueryにした。readmore.jsというプラグインも試してみたが、こちらもWordpressの記事を読み込むと高さが取得できず、アコーディオンの高さに応じて、親要素の高さが変えられなかったので、断念(使い方の問題だったかもしれないが)。

    参考ページ

     

     

    ボタンのところを少し改変。デフォルトだと「+ 続きを読む」「- 閉じる」だったので、wrapInnerでタグを追加した。

    active/addClassの一文の後に、追加。cssでbtnというクラスを作り、黄色いボタンに変更。このタグを追加するにも、苦戦した。。使い慣れていないjQueryは時々必要になるので、一つ一つ時間がかかる。

    作ってみて

    まだテスト中なので、これが見やすいか悩み中。
    ボックスの高さが整えられるのはいいけれど、びょーんと伸びる記事はいいのかどうか。
    タイトルをクリックすると記事ページに行くことができることを知らないと、びょーんをメインで読むことになるし、動作も気にならなくはないし。
    もうちょっと後でまた考えるとする。

Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。