*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

 >  Template >  テンプレ修正等 >  al_responsive の要約文、表示方法変更しました

al_responsive の要約文、表示方法変更しました

先日(9月24日)、al_responsive のトップページ要約表示部分に不備が有り、テンプレートのHTMLから JavaScript を削除して対処致しましたが、FC2独自タグの「<%topentry_description>」で出力される200文字では見た目に字数が多いので、本日、表示の方法を変更し テンプレートを更新致しました。

文字数をカウントして省略するようなスクリプトを探して色々試してみましたが、どれも独自タグで出力される200文字分の高さを表示してから少なくなった文字数分の高さを表示するため、画面を表示(新規やリロード)する度に上下に動き非常に見辛いという(個人的な)感想…。
なので、初めから表示する枠の高さを決めてはみ出た分を非表示にするという、シンプルなCSSを使う事にしました。
文末に「・・・」を表示するような仕掛けも考えましたが、

  • 複数行では text-overflow: ellipsis; は使えない
  • 複数行で使える -webkit-line-clamp: はwebkit系のブラウザ(Chrome、safari)でしか使えない
  • 末尾の文字に :before { content: "・・・"; で「・・・」を被せる方法では、(全角半角英数などの)混合の文章では綺麗に一文字分を隠してくれない事がある

という理由で、シンプルに overflow: hidden; で非表示にするだけにしました。

その他、400px以下の表示時に左右並びの表示を画像下に記事表示するcssを追加しましたので、こちらも是非css最下段に追記して下さい。
修正方法のまとめ↓クリックで表示 Read More

    【 修正方法のまとめ 】
  • 9/24以前にDLされた方でチラツキが気になる方。
    HTML編集枠の上から5/6超(下から1/6程)位の所に有る
    <script>
    $(function(){$(".text_overflow").each(function(){var t=$(this).text();if(150<t.length){var n=t.substring(0,150);n+='<span class="omit">…</span>',$(this).html(n)}})});
    </script>

    上記の部分を削除して下さい。要約文字数が200までいらない方は下記の変更もお願い致します。
  • 9/24から9/28にDLされた方で要約表示部の文字数を減らしたい方。
    HTML編集枠の上から1/5程の所に有る
    <div class="text_overflow">
    <%topentry_description>
    </div>

    という部分を下記のように変更
    <div class="text_overflow">
    <p class="moji-c"><%topentry_description></p>
    </div>

    スタイルシート編集枠の最下段に下記cssを追加
    @media only screen and (max-width:400px) {
    .left{
    float:none;
    width: 100%;
    margin:0px;
    padding:0 10px;
    }
    .left img{
    margin-bottom:15px;
    }
    }
    /* 簡易表示文字数修正18/09/29 */
    .left{
    width:35%;
    height:auto;
    margin:0 10px;
    }
    .moji-c{
    height: 105px;
    overflow: hidden;
    line-height: 1.8;
    }



以上です。
不具合が有りましたらご連絡下さい。m(__)m

Return

コメント






管理者にだけ表示を許可する