続きを読むがうまくいかない【moreタグ不使用】



  • 質問お願いします。

    記事にツイートを貼る際、JINのアコーディオンを使うと
    ツイートの文字がめちゃめちゃ小さくなるので
    以下のサイトを参考に「続きを読む」を実装しました。

    https://copypet.jp/codedescription/499/

    実装後、開閉はするのですが、開いたあとのボタンが
    「閉じる」ではなく「続きをみる」のまんまなんです。。

    ※動作は該当サイトよりご確認願います。

    0_1623349149867_next02.png

    HTMLのコードは以下で、特にいじってません。

    <div class="cp_box">
    	<input id="cp01" type="checkbox">
    	<label for="cp01"></label>
    	<div class="cp_container">
    		⇢ ツイートの埋め込みコード ←
    	</div>
    </div>
    

    JINの追加CSSにコピペしたコードは以下で、
    アイコンをJINに変えたくらいです。

    .cp_box *, .cp_box *:before, .cp_box *:after {
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    }
    .cp_box {
    	position: relative;
    }
    .cp_box label {
    	position: absolute;
    	z-index: 1;
    	bottom: 0;
    	width: 100%;
    	height: 150px; /* グラデーションの高さ */
    	cursor: pointer;
    	text-align: center;
    	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
    	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
    }
    .cp_box input:checked + label {
    	background: inherit; /* 開いた時にグラデーションを消す */
    }
    .cp_box label:after {
    	line-height: 2.5rem;
    	position: absolute;
    	z-index: 2;
    	bottom: 30px;
    	left: 50%;
    	width: 18rem;
      font-family: jin-icons;
    	content: '\e932'' 続きをみる';
    	transform: translate(-50%, 0);
    	letter-spacing: 0.07em;
    	color: #333;
    	border-radius: 18px;
    	background-color:#cccccc;
    }
    .cp_box input {
    	display: none;
    }
    .cp_box .cp_container {
    	overflow: hidden;
    	height: 170px; /* 開く前に見えている部分の高さ */
    	transition: all 0.5s;
    }
    .cp_box input:checked + label {
    	/* display: none ; 閉じるボタンを消す場合解放 */
    }
    .cp_box input:checked + label:after {
      font-family: jin-icons;
    	content: '\e903'' 閉じる';
    }
    .cp_box input:checked ~ .cp_container {
    	height: auto;
    	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
    	transition: all 0.5s;
    }
    

    他サイトを引用しておきながら恐縮ですが、
    原因はお分かりになりますでしょうか?

    ご回答、よろしくお願い致します。


    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン : 5.7.2
    ご利用のサーバー名 : mixhost
    PHPのバージョン : PHP 7.4 (ea-php74)
    OS : mac Big Sur
    ご利用のブラウザ : Chrome
    該当サイトのURL : https://flu-movie.jp/next02


  • administrators

    @meu2021 さん

    こんにちは!
    サイトを見る感じinputタグとlabelタグの間に<br>が入ってしまっているのが原因だと思いますよー!!

    <div class="cp_box">
    	<input id="cp01" type="checkbox"><label for="cp01"></label>
    	<div class="cp_container">
    		⇢ ツイートの埋め込みコード ←
    	</div>
    </div>
    

    ちょっとブサイクですけど、マークアップを上記に変えて確認してみてください٩( 'ω' )و



  • 返信が遅くなり、申し訳ありません。

    無事、以下のとおり「閉じる」が表記されるようになりました!

    0_1624433680661_スクリーンショット 2021-06-23 16.33.56.png

    で、ビジュアルに一旦戻って、そこからテキストに戻ると
    今度は以下のようにコードが変わってしまうんです💦

    以下の時点で、本文の開閉は問題なく動作します。

    <div class="cp_box"><input id="cp01" type="checkbox" /><label for="cp01"></label>
    <div class="cp_container">
    

    で、もう一度、ビジュアルへ戻ったあとテキストへ戻ると
    今度は以下のとおり空白が出来てしまい、開閉もしなくなるんです。

    <div class="cp_box">
    ↑ 空白が出来てしまう ↓
    <input id="cp01" type="checkbox" /><label for="cp01"></label>
    <div class="cp_container">
    

    ちなみに、

    </div>
    </div>
    

    は、消えていません。。

    原因はお分かりになりますでしょうか?

    もしくは質問させて頂いたコードよりも、
    JIN的に違うコードが良いのでしょうか?

    Ryota さんならどう解決しますか?