来世できっと役に立つ情報サイト

パンダが空を

雑記

AffingerでアコーディオンボタンをCSSだけで設置する方法

更新日:

記事を書いているいるとどうしても説明が必要だったり、そうじゃなかったりするときありません?

脱毛の記事を書くときにレーザー脱毛とは?みたいな説明が必要だったり。でも、世間一般で周知されていることだったら省きたい…でもここを省略するとユーザーに誤解を招きかねない…でもでもだって!!

そんなときこそ、アコーディオンボタンを設置して必要な情報だけ最初から表示して、不要な情報は見た目上スッキリさせておきましょう。(もはやこれが不要な情報だったりもする)

 

2017/09/07 追記

Affingerの [タグ] にスライドボックスがあって、基本機能にありました(笑)

+ Affingerのアコーディオン(クリックして下さい)

Affinger最高です!

こっちはAffingerデフォで実装されているアコーディオン

ここに入力したい文字をガーッと入れていきます

縦長になっても

Auto設定を入れているので

自動で縦幅を取ってくれています

 

 

実際にアコーディオンを設置するとこうなる

ここに入力したい文字をガーッと入れていきます

縦長になっても

Auto設定を入れているので

自動で縦幅を取ってくれています

アコーディオンの設置方法

外観 > 追加 CSS に追記する

/* アコーディオン */
.ac-container{
width: auto;
margin: 30px auto;
}
.ac-container label{
width: 300px;
text-align: center;
background: #ceffce; /* ボタン色 */
margin: auto;
padding: 10px 5px;
position: relative;
display: block;
height: 40px;
cursor: pointer;
color: #888; /* 文字色 */
}
.ac-container label:hover{
background: #77ff77; /* ボタン色オンマウス */
-webkit-transition: all .3s;
color: #333; /* 文字色オンマウス */
transition: all .3s;
}
.ac-container label:after{
color: #fff;
font-family:"FontAwesome";
content:"\f067";
}
.ac-container input:checked ~ label::after {
color: #fff;
font-family:"FontAwesome";
content:"\f068";
}
.ac-container input{
display: none;
}
.ac-container div{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ div{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
/* 高さの定義 */
.ac-container input:checked ~ div.ac-small{
height: 150px;
}
.ac-container input:checked ~ div.ac-medium{
height: 200px;
}
.ac-container input:checked ~ div.ac-large{
height: 300px;
}
.ac-container input:checked ~ div.ac-auto{
height: auto;
}

/* アコーディオン */

 

毎回手打ちが面倒なあなた(ぼく)

AddQuickTag プラグインを使ってください。インストールしていない方は今すぐ検索けんさくぅ。

設定 > AddQuickTag

▼開始のタグに以下入れる

<div class="ac-container">
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1"> クリックして開く </label>
<div class="ac-auto">
ここに入力

▼終了タグに以下入れる

</div>
</div>

 

参考にしたサイト

仕事をさぼって巡回していましたが、こちらのサイトが一番よくまとまっていて参考にさせていただきました。

https://tajuso.net/html_css_accordion_button

Affingerの設定方法はもちろん無いのと、AddQuickTagでの設定方法も詳しく書かれていなかったので、ちょい足ししてまとめました。

 

ここは気を付けて

デザインモードで連続して記事を更新すると2回目に高確率でボタンが不能になります。

その場合はもう一度設置すれば直るけど…これなんとかならんかね。

恐らく反映後HTMLの部分で何かが無効になるんでしょうかね。

 

デザインはまだ試行中

デザインセンスが限りなくゼロに近いので、ご自分でカスタマイズしてみてください。

逆に、ここからオシャンティにしていただいた方がいたら教えてくださいませ。

 

アンケート

アンケートへ投票してハワイに行こう!!
※ハワイへの旅費全般は自費でお願いします。

現世で役に立ちそうですか?

結果を見る

Loading ... Loading ...

 

-雑記

Copyright© パンダが空を , 2018 All Rights Reserved.