\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

WordPressで投稿記事内に「続きを読む(moreタグ)」を入れて折りたたむカスタマイズ

WordPressで投稿記事内に続きを読む(moreタグ)を挿入するカスタマイズ ブログデザイン
この記事は約9分で読めます。

この記事では、WordPress/Cocoonで、投稿記事内に「続きを読むボタン(moreタグ)」を入れるカスタマイズをご紹介いたします。

ブログを書いていると、やたら長い文章になってしまい、「見たい人だけ見れる表示にしたい…」と思いますよね。

しかしmoreタグは、投稿記事内に挿入しても機能せず効かないのです。(後ほど理由を説明します)

そこで今回は、続きを読む(moreタグ)を入れたかのようなカスタマイズ、アコーディオンメニューをご紹介いたします。

みんながやりたいのはこれだよね!

スポンサーリンク

投稿記事内に「続きを読む(moreタグ)」を入れても効かない理由

理由は簡単。

moreタグはそもそも、記事一覧の表示方法が、開いた状態で反映されるタイプのブログに適用するタグだからです。

記事一覧が開いた状態とはこれ

WordPressで投稿記事内に続きを読む(moreタグ)を挿入するカスタマイズ
クリックすると拡大します

このブログは私のはてなブログです。(実物を見てみたい方はこちら

こういった、トップページに本文が丸出しのタイプのブログに対し、

moreタグを入れて、「続きを読む」リンクを生成するとスッキリ見えますよ、というタグ。

なので、投稿記事内でmoreタグをつかうというのは、そもそもタグの使い方が間違えているんですね。

みんなが実現したい続きを読む(moreタグ)はこれ

皆さんがイメージしている、続きを読む(moreタグ)は、

「一部分を折りたたんで表示するもの」という認識だと思います。

なので、投稿記事内に何かしらのタグやらカスタマイズをして、クリックすれば以下を表示する仕組みにしたいということ。

これを実装するには、アコーディオンというCSS&htmlをカスタマイズすればできます!

アコーディオンとは

これをアコーディオン、アコーディオンメニュー、アコーディオンパネルといいます。

それでは以下で、アコーディオンメニュー(アコーディオンパネル)を入れるカスタマイズをご紹介いたします。

投稿記事の本文を折りたたむアコーディオンをカスタマイズしよう

1:CSSをコピペ

ダッシュボード > 外観テ―マエディターCocoon Child > style.css を選択。

WordPressで投稿記事内に続きを読む(moreタグ)を挿入するカスタマイズ
クリックすると拡大します

ここに、以下のCSSをstyle.cssに張り付けて下さい。

/* アコーディオンメニュー */
.ac-box{
width: auto;
margin: 30px auto 5px;
}

/*ラベル*/
.ac-box label{
max-width: 385px;
font-size: 18px;
font-weight: bold;
text-align: center;
background: #00a3af;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
border-radius: 8px;
cursor: pointer;
color: #fff;
transition: all 0.5s;
}

/*ラベルホバー時*/
.ac-box label:hover{
background: rgba( 77, 191, 199, 0.8 );
-webkit-transition: all .3s;
transition: all .3s;
}

/*チェックを隠す*/
.ac-box input{
display: none;
}

/*チェックのアイコン(↓)*/
.ac-box label:after{
color: #fff;
font-family:"FontAwesome";
content:" \f078";
}

/*チェックのアイコン(↑)*/
.ac-box input:checked ~ label::after {
color: #fff;
font-family:"FontAwesome";
content:" \f077";
}

/*中身を非表示にしておく*/
.ac-box div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}

/*クリックで中身を表示*/
.ac-box input:checked ~ div{
height: auto;
padding: 5px;
background: #ffffff;
opacity: 1;
}

/*表示内容の調整*/
.ac-box div p{
color: #333333;
line-height: 23px;
font-size: 18px;
padding: 20px;
text-align: justify;
}

.ac-small p{
margin-bottom: 0px;
}

これで、CSSによるカスタマイズはOK。

2:投稿記事でHTMLを挿入

ダッシュボードから記事を新規作成

WordPressで投稿記事内に続きを読む(moreタグ)を挿入するカスタマイズ
クリックすると拡大します

以下のHTMLコードを、カスタムHTMLを使って入力してください。

<div class="ac-box">
<input id="ac-1" name="accordion-1" type="checkbox">
<label for="ac-1">ここがボタン</label>
<div class="ac-small">
<p>ここに隠したい本文を入れてね</p>
</div>
</div>

これでアコーディオンメニューのカスタマイズ完成です!

できあがりはこんな感じ

テストテストテストテスト

テストテストテストテスト

テストテストテストテスト

アコーディオンを好きな色&フォントサイズにカスタマイズしよう

では次に、アコーディオンを好きな色&フォントサイズにカスタマイズ方法をご紹介いたします。

カスタマイズの必要がある部分だけ、かたまりごとに説明しています。

1:ボタン本体のカスタマイズ

まずはアコーディオンボタン本体のカスタマイズです。

フォントサイズが大きいかもしれないので、18px…17.5px…16.2pxなど調節してください。

カスタマイズの必要がある部分を緑色にしてます。

WordPressで投稿記事内に続きを読む(moreタグ)を挿入するカスタマイズ
クリックすると拡大します

\このCSSのかたまり/

/ラベル/
 .ac-box label{
 max-width: 385px;
 font-size: 18px;
 font-weight: bold;
 text-align: center;
 background: #00a3af;
 margin: auto;
 line-height: 50px;
 position: relative;
 display: block;
 height: 50px;
 border-radius: 8px;
 cursor: pointer;
 color: #fff;
 transition: all 0.5s;
 }

2:ホバー時の背景色、透明度のカスタマイズ

ホバー時は、色を薄くしたり、透明にしたりする方が多いので、

あえて、rgba(透明)の形で表記しています。

ちなみに「background:#fffff」のような、HTMLカラーコード表記でもOKです。

WordPressで投稿記事内に続きを読む(moreタグ)を挿入するカスタマイズ
クリックすると拡大します

\このCSSのかたまり/

/ラベルホバー時/
 .ac-box label:hover{
 background: rgba( 77, 191, 199, 0.8 );
 -webkit-transition: all .3s;
 transition: all .3s;
 }

3:ボタン横の↓↑アイコンカスタマイズ

ボタン横のアイコンはFontAwesomeをしようしています。

FontAwesomeのアイコンを変更したい場合については、後日別記事で投稿しますね。

WordPressで投稿記事内に続きを読む(moreタグ)を挿入するカスタマイズ
クリックすると拡大します

\このCSSのかたまり/

/チェックのアイコン(↓)/
 .ac-box label:after{
 color: #fff;
 font-family:"FontAwesome";
 content:" \f078";
 }

/チェックのアイコン(↑)/
 .ac-box input:checked ~ label::after {
 color: #fff;
 font-family:"FontAwesome";
 content:" \f077";
 }

4:開いたときの背景色のカスタマイズ

開いたときの背景色ですが、私はあえて白色(というかブログの背景色と同色)にしています。

一般的には、背景色に#eaeaea こういったグレーを用いることが多いです。

WordPress投稿記事内に続きを読む(more)タグを挿入するカスタム
クリックすると拡大します

\このCSSのかたまり/

/クリックで中身を表示/
 .ac-box input:checked ~ div{
 height: auto;
 padding: 5px;
 background: #ffffff;
 opacity: 1;
 }

5:開いたときの文字色と文字サイズのカスタマイズ

開いたときの文字色、文字サイズも、記事と同じ色、サイズにしております。

一般的には、文字色は#7777、文字サイズは14pxなタイプが多いです。

WordPress投稿記事内に続きを読む(more)タグを挿入するカスタム
クリックすると拡大します

\このCSSのかたまり/

/表示内容の調整/
 .ac-box div p{
 color: #333333;
 line-height: 23px;
 font-size: 18px;
 padding: 20px;
 text-align: justify;
 }

【注意】一つの記事にアコーディオンを複数個使いたいとき

記事を書いている中で、何個もアコーディオンボタンを設置したい場合があると思います。

その際はHTMLコードのナンバリングを増やす必要があります。

例えば2つ設置するとき

WordPressで投稿記事内に続きを読む(moreタグ)を挿入するカスタマイズ
クリックすると拡大します

\ソースHTMLはこんな感じ/

<div class="ac-box">
<input id="ac-1" name="accordion-1" type="checkbox">
<label for="ac-1">一つ目アコーディオン</label>
<div class="ac-small">
<p>これは一つ目のソースHTMLコードです</p>
</div>
</div>
<div class="ac-box">
<input id="ac-2" name="accordion-2" type="checkbox">
<label for="ac-2">二つ目アコーディオン</label>
<div class="ac-small">
<p>これは二つ目のソースHTMLコードです</p>
</div>
</div>
タイトルとURLをコピーしました