AFFINGER5のスライドボックスに「閉じる」ボタンを追加する(PostSnippets使用)

スポンサーリンク

 

WordPress・有料テーマのAffinger5にあるスライドボックスは、コンテンツの表示をトグル動作で展開したり閉じたりできて大変有用なのですが「閉じる」ボタンがありません。 

長いコンテンツの場合、特にスマホでは、そのスライドボックスを閉じるためには、スライドボックスの上部までスクロールしてトグルアクションを行わなければならずスライドボックスの最下段に「閉じる」ボタンがあれば良いのにと思っていました。

 
そこで今回、jQuery とPostSnippetsプラグインを併用して「閉じる」ボタンのショートコードを作成してみたところ、バグがあるかもしれませんが取り敢えず所定の動作を行うことが出来ましたので、その方法を紹介したいと思います。

 

スポンサーリンク

 

Affinger5のスライドボックス動作(「閉じる」ボタン追加 前と後)

先ず、スライドボックスの通常動作の場合と完成した「閉じる」ボタンを追加した場合のBefore /Afterの動作を確認してくみてださい。

Before:スライドボックス(通常)

+ クリックして下さい1

コンテンツ1

コンテンツ2

コンテンツ3

コンテンツ4

コンテンツ5

コンテンツ6

コンテンツ7

コンテンツ8

コンテンツ9

コンテンツ10

〜〜〜〜〜〜〜〜

スライドボックスを閉じるには、上段までスクロールして「+ クリックして下さい1」をクリックする必要があります。

After:「閉じる」ボタン付加

+ クリックして下さい2

コンテンツ1

コンテンツ2

コンテンツ3

コンテンツ4

コンテンツ5

コンテンツ6

コンテンツ7

コンテンツ8

コンテンツ9

これが、「閉じる」ボタン
↓↓

「閉じる」ボタン

〜〜〜〜〜〜〜〜

ボタンをクリックすれば一発でスライドボックスが閉じます。

 

スライドボックスについて(事前調査)

AFFINGER5のスライドボックスを使用するには、Wordpressのビジュアルエディタから、AFFINGER5の「タグ」ボタンをクリックして 「ボックスデザイン」「スライドボックス」を選択すると以下の青字で示されるショートコードがビジュアルエディタに挿入されます。

[/] shortcode
[st-slidebox fontawesome="" text="+ クリックして下さい" bgcolor="" 
color="#1a1a1a" margin_bottom="20"]
コンテンツエリア
〜〜
コンテンツエリア
[/st-slidebox]

【スライドボックス】のショートコードで挟まれた緑文字のコンテンツエリアに、必要なコンテンツを記入すると、ブラウザ上で前記の様に、コンテンツがトグル開閉するスライドボックス(通常)が実現します。

 

では、どの様にトグル開閉が実現されているか?Google Chromeブラウザの「検証」から「スライドボックス」に関係するjQueryとHTMLを調べたのが、以下の内容です。

 command
<jQuery部分>
<script>jQuery(function(){
jQuery('.st-btn-open').click(function(){
jQuery(this).next('.st-slidebox').stop(true, true).slideToggle();
jQuery(this).addClass('st-btn-open-click');
});
});
</script>

<HTML部分>
<div class="st-slidebox-c" style="margin-bottom:20px;">
<p class="st-btn-open st-btn-open-click" style="color:#1a1a1a;">+ クリックして下さい</p>
<div class="st-slidebox" style="display: none;">
<p>コンテンツエリア</p>
</div>
</div>

動作説明・ポイント

  • jQuery部分では、st-btn-openでclass指定された要素がクリックされる毎に、st-slideboxでclass指定された要素(つまりコンテンツエリア部分)がslideToggle();によって下記のHTMLコードがトグル的に非表示と表示を繰り返す様に書換えられます。
  • HTML部分では、jQueryプログラムの実行によって、HTMLコードの <div class="st-slidebox" style="display: none;"> と <div class="st-slidebox" style="display: block;"> がトグル動作で書換えられ、noneで非表示blockで表示を繰り返します。

 

スポンサーリンク

 

PostSnippetsを使った「閉じる」ボタンのショートコード作成(方法)

基本的な考え方

【スライドボックス】のショートコードで挟まれたコンテンツエリアの後段に、部品としてショートコード化した【「閉じる」ボタン】を配置してスライドボックスの「閉じる」動作が行えること。

ショートコード化するために、PostSnippetsプラグインを使います。 PostSnippetsの設定画面は以下の通りで、番号を振った部分に従って説明します。

(PostSnippetsの設定画面)

 

ショートコードのタイトル: 「slide_box「閉じる」ボタン:」にしました。

のエリア: jQueryとHTMLコード(下記)を記載しました。

コードの説明・ポイント

  1. <script>で囲まれた部分が、jQueryコードになります。 コードの意味については、夫々の行にコメントを付記していますのでご参照ください。
  2. 「閉じる」ボタンは、AFFINGER5のカスタムボタン > 角マルボタン を利用しています。注意すべきこととして、url="#"(または#を削除)のままですと、クリックされるとページTopに飛んでしまいます。 これを防止するためurl="#ダミー"にしています。 この副作用として、このボタンを押すと、ブラウザのURL窓にURLの最後尾に#ダミーが表示されてしまうので、jQueryのFunctionの最後に return false; の行を付加して防止しています。
  3. <style>で囲まれた部分がCSSで、「+ クリックして下さい」の先頭部分に囲み枠を付けるためのCSSです。 今まで通りのスライドボックススタイルのままで良ければ、このCSSは不要です。

のエリア: 変数のデフォルトとして、下記の様に記載しました。

slide_btn_name=スライドボックスTex名をコピペ,anchor=btn1,title=「閉じる」ボタンの名前

はショートコードにしますので、レ点 を付けます。

はレ点記載不要です。

のエリア:注意書きと簡単な説明を合わせて、下記の様に記載しました。

①複数スライドボックスを区別するため「Tex名」を重複しないユニークな名前にしておく。
②slide_btn_name変数は、スライドボックスに付けたユニークな名前をコピペする。 
③anchor変数は、btn1から連番を付ける(重複不可)

 

以上で、PostSnippetsによる「閉じる」ボタン・ショートコードの作成設定が完了しました。
ビジュアルエディタで、PostSnippetsボタンをクリックして「slide_box「閉じる」ボタン:」を選択すれば、完成した赤字で示されるショートコードがビジュアルエディタに挿入されます。

[/] 完成したショートコード
[slide_box「閉じる」ボタン: slide_btn_name="スライドボックスTex名をコピペ" anchor="btn1" title="「閉じる」ボタンの名前"]

 

スライドボックスの「閉じる」ボタン・ショートコードの配置方法

以下の様に、【スライドボックス】のショートコードで挟まれたコンテンツエリアの後段に、部品としてショートコード化した【「閉じる」ボタン】を配置します。

[/] shortcode
[st-slidebox fontawesome="" text="+ クリックして下さいABC" bgcolor="" color="#1a1a1a" margin_bottom="20"]
コンテンツ

コンテンツ
コンテンツ
[slide_box「閉じる」ボタン: slide_btn_name="+ クリックして下さいABC" anchor="btn1" title="「閉じる」ボタンの名前"]
[/st-slidebox]

注意ポイント(ページ内が対象)

  • スライドボックス名(text)は、他のスライドボックスと区別するため重複しないユニークな名前(任意の文字列)にすること。
  • slide_btn_nameスライドボックス名(text)と関連付けるため同じ(コピペ)名前にすること。
    (上のshortcode画面で表示されているアンダーライン部分 2箇所を注目ください)
  • 「閉じる」ボタンの anchor="btn1" は、他の「閉じる」ボタンと競合させないためbtn番号を連番(重複しない任意の文字列で可)にして重複させないようにすること。

 

「閉じる」ボタンの事例紹介

実際に投稿記事に「閉じる」ボタンを実装した事例をご覧ください。

記事中の「+ 歪率の測定方法」と「+ F特の測定方法」を参照してください。

 

以上、AFFINGER5のスライドボックスに「閉じる」ボタンを追加する方法の紹介でした。 AFFINGER5テーマをお使いの方で、この「閉じる」ボタンが気に入って頂ければ、PostSnippetsの設定部分をコピペしてお使いください。 また、Wordpressユーザで、コンテンツのアコーディオン(開閉)動作を行いたいと思っている方にも参考になれば幸いです。

関連記事(一部広告含む)

〜〜〜〜〜〜〜〜

オススメ記事

レコードのハイレゾ化
オススメ記事

LPレコードのハイレゾ化のススメ(ハイレゾ録音のヒント集)

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

MCカートリッジとMMカートリッジの音質比較

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

DENON MCカートリッジ DL103Rのクロストーク「 原理編」

今更ながら、「我が家のB級プレーヤ」に取り付けた「DL103Rカートリッジのクロストーク(セパレーション)をテストレコード(AD-1 2面のバンド4:基準レベル、1kHz、3.54cm/sec(尖頭値 ...

テストレコード(AD-1)で出来ること

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

レコードをハイレゾ化するならDSDかPCMか?

ことの 発 端 ことの発端は、あるハイレゾDLサイトから、チャイコのバイオリンコンチェルトをPCM(Flacファイル 192Khz、24Bit)で購入しました。WAVファイルも平行販売されています。 ...

CD音質関連 その他
オススメ記事

アナログ・レコードのここがダメ「CD音質と比較して」

これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあまり言いたくは ...

CDフォーマットのここがダメ「ハイレゾと比較して」

CDフォーマットのサンプリング周波数は44.1khzでビット深度は16bitです。 特にビット深度は録音レベルが低下するに伴い音質に問題が生じます。 CDの開発時点では先端技術で市場を席巻しましたが昨 ...

Sony HAP-Z1ESのDSEE機能/確認

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Apple Digital MastersのAAC音質(その1)

2019年7月付けの「Apple Digital Masters テクノロジー概要」によれば、iTunesやApple Musicで配信される楽曲は、「Apple Digital Masters テク ...

Post Snippets Pluginで出来ること(小技・事例集)

 WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしているのにも関わら ...

© 2020 ハイレコのブログ Powered by AFFINGER5