[SANGOカスタマイズ]アコーディオンのデザインを変更

みっぴーです！

SANGOのカスタマイズ第三弾！今回は、「アコーディオン」のデザインを変更してみました！

アコーディオンとはこれです↓

これは、デフォルトのデザインでもう消してしまったので画像ですが(なので動きません)

みっぴー

カスタマイズ後のアコーディオンはこんな感じ

コードを表示

隠したい本文

デフォルトのデザインもシンプルで見やすくていいんですが、やっぱりちょっと寂しいし自分のブログの中に溶け込ませたいし色をつけて目立たせたいですよね！

そこで、今回はアコーディオンをカスタマイズしてみました！

今回もショートコードを新しく追加して様々なデザインのアコーディオンを呼び出せるようにも出来ます！

アコーディオンの色々なデザインパターンを作ってみたので参考にしてください。

ちょっとPRです

みっぴー（@bennriya_mi）です～。

アイキャッチを変えただけで、広告表示回数が5倍になりました。（こっそり独り言）

今回、そのアイキャッチを誰でも使えるようにテンプレにしました。
詳しくは、下記にて

⇒アイキャッチテンプレート150種について

今回のアコーディオンのカスタマイズの内容
- 修正するファイル
アコーディオンのデザイン変更の方法
- 1．ショートコードを定義(省略可)
- 2．CSSを定義
ショートコードの使い方
アコーディオンのCSSデザインサンプル
最後に

今回のアコーディオンのカスタマイズの内容

みっぴー

今回のカスタマイズでこんな事が出来るようになるよ！

今回のアコーディオンのカスタマイズの内容をまとめると下記の通りです。

アコーディオンカスタマイズの内容

追加のショートコードを定義
オリジナルのアコーディオンをショートコードで呼び出せる
好きなデザインに指定出来る

修正するファイル

今回のカスタマイズで編集するファイルは下記の通りです。

このカスタマイズで修正するファイル

functions.php
style.css

注意

functions.phpのファイルを編集する場合は、必ずバックアップを取った上で編集してください。functions.phpの記入を誤るとブログの画面が真っ白になって管理画面にさえも入れなくなります。編集は慎重に行ってください。万が一、真っ白になった場合は「[WordPress]functions.phpを編集後に画面が真っ白になった時の対処法と注意点」を参考にしてください。

[WordPress]functions.phpを編集後に画面が真っ白になった時の対処法と注意点

アコーディオンのデザイン変更の方法

みっぴー

アコーディオンのカスタマイズの手順はたった二つだけです！

アコーディオンのデザインを変更する手順は、下記の通りです。

アコーディオンのカスタマイズの手順

STEP.1
ショートコードを定義(省略可)
「functions.php」にこれから紹介するコードを追記して新しいショートコードを定義します。
※ショートコードで呼び出す必要がない方は、STEP.1は省略してSTEP.2のstyle.cssにCSSを張り付けるだけで完了します。
STEP.2
CSSを定義
「style.css」に新しいCSSを追加してアコーディオンのスタイルを変更します。

1．ショートコードを定義(省略可)

functions.phpにショートコードを定義します。

functions.phpに下記のコードを張り付けてください。

ショートコードを使わない場合やデフォルトのアコーディオンのデザインだけ変えたい場合は、このショートコードの定義は不要なので飛ばして2のCSS定義に飛んでください。

※複数のショートコードを追加したい場合は、下記のコードの中の「open1」と「accordion1」の部分の数字を増やして下記を全部追加してください。

functions.php

/*********************
アコーディオンショートコード追加１
 *********************/
add_shortcode('open1', 'sng_insert_accordion1'); //アコーディオン

/*********************
アコーディオンショートコード追加１
 *********************/
function sng_insert_accordion1($atts, $content = null)
{
    $title = isset($atts['title']) ? $atts['title'] : null;
    $content = do_shortcode(shortcode_unautop($content));
    $randid = mt_rand(1, 99999);
    if ($title) {
        return '<div class="accordion1 main_c"><input type="checkbox" id="label' . $randid . '" class="accordion1_input" /><label for="label' . $randid . '">' . $title . '</label><div class="accordion1_content">' . $content . '</div></div>';
    } else {
        return '<span class="red">アコーディオンにtitleを入力してください</span>';
    }
}

functions.phpはどこ？

レンタルサーバーのFTPにログインしてください。

編集するブログのファイルが入ってるところまで進んでください。

みっぴー

大体の場合はブログ名のフォルダの中かな？

それから下記の通り進んでいくとfunctions.phpがあります。

ブログ名/wp-content/themes/お使いのテーマ/functions.php

子テーマでカスタマイズをしている人は、子テーマの中のfunctions.phpに追記してください。

【オススメツールをちょっと紹介】
複数のASPを一括で管理する無料のツール
案件の報酬額を比較できるので、1番条件の良いASPを簡単に見つけることが出来ます！

2．CSSを定義

次にCSSを定義します。style.cssに下記をコピーして貼り付けてください。

デフォルトのデザインを変更したい方

デフォルトを変更したい場合のCSSはこちら

style.css

/*アコーディオンカスタマイズ*/
.accordion label {
  display: inline-block;
  position: relative;
  border-radius: 5px;
  padding: 9px 22px 9px 36px;
  background: #80bfff;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #668ad8;
  border-top: none;
  border-left: none;
  border-right: none;
}
.accordion label:hover{
  background: #80bfff;/*ボタン色*/
  color: #FFF;
}
.accordion label::after {
  position: absolute;
  font-family: FontAwesome;
  content:'\f078';
  top: 9px;
  left: 16px;
  color: #fff;
  font-size: 0.95em;
}
.accordion_input:checked + label {
  background: #80bfff;/*ボタン色*/
  border-bottom: none;
}
.accordion_input:checked + label:after {
  content:'\f078';
}

ショートコードを定義した方

みっぴー

ショートコードを定義した方のCSSはこちら↓

style.css

/*アコーディオン*/
.accordion1 {
  margin: 0.5em 0;
  font-size: 0.95em;
}
.accordion1 label {
  display: inline-block;
  position: relative;
  color: #FFF;
  padding: 9px 22px 9px 36px;
  font-weight: bold;
  border-radius: 5px;
  background: #80bfff;/*ボタン色*/
  border-bottom: solid 4px #668ad8;
}
.accordion1 label:after {
  position: absolute;
  font-family: FontAwesome;
  content:'\f078';
  left: 16px;
  color: #fff;
  font-size: 0.95em;
  font-weight: normal;
}
.accordion1 label:hover {
  background: #80bfff;/*ボタン色*/
  color: #FFF;
}
.accordion1_input {
  display: none;
}
.accordion1_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion1_input:checked ~ .accordion1_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}
.accordion1_input:checked + label {
  background: #80bfff;/*ボタン色*/
  border-bottom: none;
}
.accordion1_input:checked + label:after {
  content:'\f078';
}

ショートコードの使い方

functions.phpにショートコードを定義した場合は、下記のように記入すると登録したアコーディオンが呼び出せます！

「open1」の数字の部分を「1．ショートコードを定義(省略可)」のところで登録したショートコードの内容と同じにしてくださいね。

みっぴー

上で説明したものをそのままコピペした人は下記のままで使えます

ショートコード

[open1 title='タイトル']隠す文章[/open1]

アコーディオンのCSSデザインサンプル

次にアコーディオンのデザインを変更するCSSを何パターンかご紹介します。

SANGOのアコーディオンのデフォルトのデザインを変更したい場合は、下記のCSSのclass名の数字を取って貼り付けてください。

「accordion1」だったら「accordion」に変更してstyle.cssに貼り付けるとデフォルトのデザインが変わるはずです！

※でもデフォルトのだと元のデザインが反映されて崩れてしまう場合もあるかもしれません。

デフォルトのデザインを考慮してCSSを考えるとまた別なのでこれから紹介する「様々なデザインパターン」は割愛させて頂きます。

みっぴー

ごめんなさい

みっぴー

なのでショートコードを1個追加したほうが早いかもしれません！

ショートコードを定義せず呼び出す場合のHTMLも一緒に載せているのでショートコードの定義をしなかった場合の参考にしてください。

パターン1

立体なボタン風のアコーディオン

クリックしてみてね

ここに隠したい文章

ねこ

押すと立体感が消えるから押した感じがするよね

コードを表示

<div class="accordion1"><input type="checkbox" id="label1" class="accordion1_input" /><label for="label1">タイトル</label><div class="accordion1_content">ここに隠したい文章</div></div>

/*アコーディオン*/
.accordion1 {
  margin: 0.5em 0;
  font-size: 0.95em;
}
.accordion1 label {
  display: inline-block;
  position: relative;
  color: #FFF;
  padding: 9px 22px 9px 36px;
  font-weight: bold;
  border-radius: 5px;
  background: #80bfff;/*ボタン色*/
  border-bottom: solid 4px #668ad8;/*線の色*/
}
.accordion1 label:after {
  position: absolute;
  font-family: FontAwesome;
  content:'\f078';
  left: 16px;
  color: #fff;
  font-size: 0.95em;
  font-weight: normal;
}
.accordion1 label:hover {
  background: #80bfff;/*ボタン色*/
  color: #FFF;
}
.accordion1_input {
  display: none;
}
.accordion1_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion1_input:checked ~ .accordion1_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}
.accordion1_input:checked + label {
  border-bottom: none;
}

パターン2

立体なボタン風のアコーディオン(色違い)

クリックしてみてね

ここに隠したい文章

ぱん猫

立体的なボタンだと押したくなるよね

コードを表示

<div class="accordion2"><input type="checkbox" id="label2" class="accordion2_input" /><label for="label2">タイトル</label><div class="accordion2_content">ここに隠したい文章</div></div>

/*アコーディオン*/
.accordion2 {
  margin: 0.5em 0;
  font-size: 0.95em;
}
.accordion2 label {
  display: inline-block;
  position: relative;
  color: #FFF;
  padding: 9px 22px 9px 36px;
  font-weight: bold;
  border-radius: 5px;
  background: #ff8484;/*ボタン色*/
  border-bottom: solid 4px #e65c5c;/*線の色*/
}
.accordion2 label:after {
  position: absolute;
  font-family: FontAwesome;
  content:'\f078';
  left: 16px;
  color: #fff;
  font-size: 0.95em;
  font-weight: normal;
}
.accordion2 label:hover {
  background: #ff8484;/*ボタン色*/
  color: #FFF;
}
.accordion2_input {
  display: none;
}
.accordion2_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion2_input:checked ~ .accordion2_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}
.accordion2_input:checked + label {
  border-bottom: none;
  -webkit-transform: translateY(4px);
  -ms-transform: translateY(4px);
  transform: translateY(4px);
}

【PR】・ランディングページはテンプレートを使えばデザイン性の高いページが簡単に作れる！

パターン3

立体的なボタンに影をつけたアコーディオン

文字の前の矢印もクリック時に変わります。

クリックしてみてね

ここに隠したい文章

ねこ

影をつけるともっと立体的になるね

コードを表示

<div class="accordion3"><input type="checkbox" id="label3" class="accordion3_input" /><label for="label3">タイトル</label><div class="accordion3_content">ここに隠したい文章</div></div>

/*アコーディオン*/
.accordion3 {
  margin: 0.5em 0;
  font-size: 0.95em;
}
.accordion3 label {
  display: inline-block;
  position: relative;
  color: #FFF;
  padding: 9px 22px 9px 36px;
  font-weight: bold;
  border-radius: 5px;
  background: #ff8484;/*ボタン色*/
  border-bottom: solid 4px #e65c5c;/*線の色*/
  box-shadow: 2px 2px 4px gray;
}
.accordion3 label:after {
  position: absolute;
  font-family: FontAwesome;
  content:'\f078';
  left: 16px;
  color: #fff;
  font-size: 0.95em;
  font-weight: normal;
}
.accordion3 label:hover {
  background: #ff8484;/*ボタン色*/
  color: #FFF;
}
.accordion3_input {
  display: none;
}
.accordion3_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion3_input:checked ~ .accordion3_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}
.accordion3_input:checked + label {
  background: #ff8484;/*ボタン色*/
  border-bottom: none;
  box-shadow: none;
  -webkit-transform: translateY(4px);
  -ms-transform: translateY(4px);
  transform: translateY(4px);
}
.accordion3_input:checked + label:after {
  content:'\f077';
}

パターン4

カーソルを合わせると色が変わるアコーディオン

クリックしてみてね

ここに隠したい文章

ねこ

これも押すと色が変わるから押した感じがするね

コードを表示

<div class="accordion4"><input type="checkbox" id="label4" class="accordion4_input" /><label for="label4">タイトル</label><div class="accordion4_content">ここに隠したい文章</div></div>

/*アコーディオン*/
.accordion4 {
  margin: 0.5em 0;
  font-size: 0.95em;
}
.accordion4 label {
  display: inline-block;
  position: relative;
  padding: 9px 22px 9px 36px;
  border: solid 2px #ff8484;/*線の色*/
  border-radius: 3px;
  color: #ff8484;/*文字色*/
}
.accordion4 label:after {
  position: absolute;
  font-family: FontAwesome;
  content:'\f078';
  left: 16px;
  color: #ff8484;/*ボタン色*/
}
.accordion4 label:hover:after {
  color: #fff;
}
.accordion4 label:hover {
  background: #ff8484;/*ボタン色*/
  color: white;
}
.accordion4_input {
  display: none;
}
.accordion4_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion4_input:checked ~ .accordion4_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}
.accordion4_input:checked + label {
  background: #ff8484;/*ボタン色*/
  color: #fff;
}
.accordion4_input:checked + label:after {
  content:'\f078';
  color: #fff;
}

パターン5

吹き出し風のアコーディオン

クリックしてみてね

ここに隠したい文章

コードを表示

<div class="accordion5"><input type="checkbox" id="label5" class="accordion5_input" /><label for="label5">タイトル</label><div class="accordion5_content">ここに隠したい文章</div></div>

/*アコーディオン*/
.accordion5 {
  margin: 0.5em 0;
  font-size: 0.95em;
}
.accordion5 label {
  display: inline-block;
  position: relative;
  color: #FFF;
  padding: 9px 22px 9px 22px;
  font-weight: bold;
  border-radius: 5px;
  background: #ff8484;/*ボタン色*/
}
.accordion5 label:before {
  position: absolute;
  top: 100%;
  left: 15px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top: 12px solid #ff8484;/*ボタン色*/
  content: "";
}
.accordion5 label:hover {
  background: #ff8484;/*ボタン色*/
  color: white;
}
.accordion5_input {
  display: none;
}
.accordion5_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion5_input:checked ~ .accordion5_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}

パターン6

吹き出し風のアコーディオン(矢印付き)

クリックしてみてね

ここに隠したい文章

ねこ

この下にあるよ！という感じが分かるね

コードを表示

<div class="accordion6"><input type="checkbox" id="label6" class="accordion6_input" /><label for="label6">タイトル</label><div class="accordion6_content">ここに隠したい文章</div></div>

/*アコーディオン*/
.accordion6 {
  margin: 0.5em 0;
  font-size: 0.95em;
}
.accordion6 label {
  display: inline-block;
  position: relative;
  color: #FFF;
  padding: 9px 22px 9px 36px;
  font-weight: bold;
  border-radius: 5px;
  background: #ff8484;/*ボタン色*/
}
.accordion6 label:after {
  position: absolute;
  font-family: FontAwesome;
  content:'\f078';
  left: 16px;
  color: #fff;
}
.accordion6 label:before {
  position: absolute;
  top: 100%;
  left: 15px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top: 12px solid #ff8484;/*ボタン色*/
  content: "";
}
.accordion6 label:hover {
  background: #ff8484;/*ボタン色*/
  color: white;
}
.accordion6_input {
  display: none;
}
.accordion6_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion6_input:checked ~ .accordion6_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}
.accordion6_input:checked + label:after {
  content:'\f077';
}

パターン7

ステッチ風のアコーディオン

クリックしてみてね

ここに隠したい文章

ぱん猫

ステッチ可愛い

コードを表示

<div class="accordion7"><input type="checkbox" id="label7" class="accordion7_input" /><label for="label7">タイトル</label><div class="accordion7_content">ここに隠したい文章</div></div>

/*アコーディオン*/
.accordion7 {
  margin: 0.5em 0;
  font-size: 0.95em;
}
.accordion7 label {
  display: inline-block;
  position: relative;
  color: #FFF;
  padding: 9px 22px 9px 36px;
  font-weight: bold;
  border-radius: 5px;
  background: #ff8484;/*ボタン色*/
  border: dashed 1px #fff;
  box-shadow: 0 0 0 5px #ff8484;
}
.accordion7 label:after {
  position: absolute;
  font-family: FontAwesome;
  content:'\f078';
  left: 16px;
  color: #fff;
  font-size: 0.95em;
  font-weight: normal;
}
.accordion7 label:hover {
  background: #ff8484;/*ボタン色*/
  color: #FFF;
}
.accordion7_input {
  display: none;
}
.accordion7_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion7_input:checked ~ .accordion7_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}
.accordion7_input:checked + label:after {
  content:'\f077';
  box-shadow: 0 0 0 5px #ff8484;
}

パターン8

ボーダーのアコーディオン

クリックしてみてね

ここに隠したい文章

ねこ

ボーダーの方が可愛くない？

コードを表示

<div class="accordion8"><input type="checkbox" id="label8" class="accordion8_input" /><label for="label8">タイトル</label><div class="accordion8_content">ここに隠したい文章</div></div>

/*アコーディオン*/
.accordion8 {
  margin: 0.5em 0;
  font-size: 0.95em;
}
.accordion8 label {
  display: inline-block;
  position: relative;
color: #f261a5;
  padding: 9px 22px 9px 36px;
  font-weight: bold;
  border-radius: 5px;
  border: solid 2px #f279b2;
  background: -webkit-repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 3px,#ffe6f2 3px, #ffe6f2 7px);
  background: repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 3px,#ffe6f2 3px, #ffe6f2 7px);
}
.accordion8 label:after {
  position: absolute;
  font-family: FontAwesome;
  content:'\f078';
  left: 16px;
color: #f261a5;
  font-size: 0.95em;
  font-weight: normal;
}
.accordion8 label:hover {
  background: -webkit-repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 3px,#ffe6f2 3px, #ffe6f2 7px);
  background: repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 3px,#ffe6f2 3px, #ffe6f2 7px);
color: #f261a5;
}
.accordion8_input {
  display: none;
}
.accordion8_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion8_input:checked ~ .accordion8_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}
.accordion8_input:checked + label:after {
  content:'\f077';
}

パターン9

大きなカッコで囲まれているアコーディオン

クリックしてみてね

ここに隠したい文章

ぱん猫

シンプルだね！

コードを表示

<div class="accordion9"><input type="checkbox" id="label9" class="accordion9_input" /><label for="label9">タイトル</label><div class="accordion9_content">ここに隠したい文章</div></div>

/*アコーディオン*/
.accordion9 {
  margin: 0.5em 0;
  font-size: 0.95em;
}
.accordion9 label {
  display: inline-block;
  position: relative;
  padding: 9px 22px 9px 22px;
  font-weight: bold;
}
.accordion9 label:before,
.accordion9 label:after {
  display: inline-block;
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  content: "";
}
.accordion9 label:before {
  left: 0;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  border-left: solid 1px black;
}
.accordion9 label:after {
  right: 0;
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  content: "";
}
.accordion9 label:hover {

}
.accordion9_input {
  display: none;
}
.accordion9_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion9_input:checked ~ .accordion9_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}

パターン10

アイコンの背景に円形のアコーディオン

クリックしてみてね

ここに隠したい文章

ぱん猫

これもシンプルでいいね！

コードを表示

<div class="accordion10"><input type="checkbox" id="label10" class="accordion10_input" /><label for="label10">タイトル</label><div class="accordion10_content">ここに隠したい文章</div></div>

/*アコーディオン*/
.accordion10 {
  margin: 0.5em 0;
  font-size: 0.95em;
  padding: 3px 0 3px 4px;
}
.accordion10 label {
  display: inline-block;
  position: relative;
  font-weight: bold;
}
.accordion10 label:before {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 0px 3px 0 0px;
  border-radius: 50%;
  background: #ee8992;
  color: #fff;
  font-family: FontAwesome;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  line-height: 35px;
  content:'\f078';
}
.accordion10_input {
  display: none;
}
.accordion10_content {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.accordion10_input:checked ~ .accordion10_content {
  height: auto;
  padding: 0.7em 0;
  opacity: 1;
}
.accordion10_input:checked + label:before {
  content:'\f077';
}