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

みっぴーです!

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

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

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

みっぴー

カスタマイズ後のアコーディオンはこんな感じ
隠したい本文

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

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

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

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

【スポンサーリンク】

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

みっぴー

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

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

アコーディオンカスタマイズの内容
  1. 追加のショートコードを定義
  2. オリジナルのアコーディオンをショートコードで呼び出せる
  3. 好きなデザインに指定出来る

修正するファイル

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

このカスタマイズで修正するファイル
  1. functions.php
  2. 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
/*********************
アコーディオンショートコード追加1
 *********************/
add_shortcode('open1', 'sng_insert_accordion1'); //アコーディオン

/*********************
アコーディオンショートコード追加1
 *********************/
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に追記してください。


【スポンサーリンク】

2.CSSを定義

次にCSSを定義します。style.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);
}

パターン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';
}

最後に

1ページに複数のアコーディオンを使う場合はHTMLの下記の2箇所のlabelの後の数字を別にしてください。

他のアコーディオンと同じにすると1つ目のアコーディオンをクリックしたら、2つ目のアコーディオンが開くというおかしな現象になります。

1つ目は

id="label1"
label for="label1"

2つ目は

id="label2"
label for="label2"

といったようにどんどん増やしていけばオッケーです。

みっぴー

ちょっとよく分からない!という人は上記で紹介したCSSをコピペすればオッケーです。

みっぴー

お疲れ様でしたぁ!
【スポンサーリンク】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です