cssのみで「続きを読む（もっと見る）」を実装
縦に長いコンテンツが大量に存在する時、ユーザーの意思で見るかどうか選ばせたい時は「もっと見る」や「続きを読む」といったボタンがあると、見たくない場合にスラスラスクロールできます。
CSSだけで実装が可能なので、デモとソースコードをご紹介します。
CSSだけで「続きを読む」のデモ
続きを読むを実装したデモをご確認ください。
日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上か
ソースコード
HTML
<div class="readmore">
<input id="check1" class="readmore-check" type="checkbox">
<div class="readmore-content">
中身のテキスト
</div>
<label class="readmore-label" for="check1"></label>
</div>
チェックボックスのid値とlabelのfor値を揃える必要があります。
特に、1ページで複数の「続きを読む」を実装する場合は注意してください。
揃えることで、ボックス下部に表示される「続きを見る」のボタンをチェックボックスとして扱うことが出来ます。
CSS
.readmore{
position: relative;
box-sizing: border-box;
/*以下お好み*/
/* ボーダーを付ける場合 */
padding: 10px;
border: 1px solid #CCC;
}
.readmore-content{
position: relative;
overflow: hidden;
/*以下お好み*/
/*高さの初期値*/
height: 100px;
}
.readmore-content::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
content: "";
/*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
height: 50px;
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
}
/* 続きを読むボタン */
.readmore-label{
display: table;
bottom: 5px;
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
margin: 0 auto;
z-index: 2;
padding: 0 10px;
background-color: #ff7777;
border-radius: 10px;
color: #FFF;
}
.readmore-label:before{
content: '続きを読む';
}
.readmore-check{
display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label{
position: static;
transform: translateX(0);
-webkit-transform: translateX(0);
/* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
/* display: none; */
}
.readmore-check:checked ~ .readmore-label:before{
content: '閉じる';
}
/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
display: none;
}
チェックボックスにチェックが入った場合（ラベルがクリックされた場合）、「height: auto」のプロパティを適用し、すべてのコンテンツが表示されます。
また、やなどの矢印をボタンに表示したい場合は、fontawesomeの事前読み込みが必要です。
そのうえで、.readmore-labelをこのように書き換えてください。
.readmore-label:before{
font-family: FontAwesome;
content: "\f078 続きを読む";
}
.readmore-check:checked ~ .readmore-label:before{
font-family: FontAwesome;
content: "\f077 閉じる";
}
WordPressで「続きを読む」のショートコード化
WordPressの記事内でこの「続きを読む」を実装する場合は、毎回のようにHTMLタグを打ち込むのは面倒なので、ショートコードにして汎用的に使用すると楽です。
先ほどのcssをテーマ内に追加した上で、ショートコードをfunctions.phpに追記してください。
function readmoreSC($atts, $content = null){
//1ページ内に複数回使う時のために、一意なIDを$READMORE_COUNTに入れる
global $READMORE_COUNT;
if(isset($READMORE_COUNT) || $READMORE_COUNT){
$READMORE_COUNT++;
}else{
$READMORE_COUNT = 1;
}
$content = preg_replace('/^(<br \/>|<br>)/is', '', $content); //勝手に挿入されるbrタグを消す
$html = '';
$html .= '<div class="readmore">';
$html .= '<input id="check'.$READMORE_COUNT.'" class="readmore-check" type="checkbox">';
$html .= '<div class="readmore-content">';
$html .= $content;
$html .= '</div>';
$html .= '<label class="readmore-label" for="check'.$READMORE_COUNT.'"></label>';
$html .= '</div>';
return $html;
}
add_shortcode('readmore', 'readmoreSC');
ショートコードを追加することで、[readmore][/readmore]で囲われたテキストは自動的に「続きを読む」のブロックに入ります。
[readmore] 中身のテキスト [/readmore]以上、cssのみで「続きを読む（もっと見る）」を実装、でした。