スポンサーリンク




WordPress

プラグインを使わずに折り畳み文章を入力する方法

投稿日:

こんにちは。ゆかです(^^)

 

わたしは、普段ワードプレスの困ったことを教えるお仕事をしています。

今回、ご質問で、折り畳み文章を投稿のときに使いたいということでしたので、その方法をお伝えします。

 

ちなみに折り畳み文章というのはこちらです。

『クリックしてみてください』をクリックすると、折りたたまれた文章が出てきます。

 

 

この折り畳み文章ですが、投稿するときにHTMLを使えば簡単に出来ます。

 

 

ですが、この方法はテーマによっては使えないということもあるようです。

 

作成方法

では、早速折り畳み文章を作成してみましょう。

下記のHTMLをそのままコピーしてください。

<!-- 折りたたみ展開ボタン -->
<div onclick="obj=document.getElementById('menu1').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ クリックで展開</a>
</div>
<!--// 折りたたみ展開ボタン -->
  
<!-- ここから先を折りたたむ -->
<div id="menu1" style="display:none;clear:both;">
 
<!--この部分が折りたたまれ、展開ボタンをクリックすることで展開します。-->
 
</div>
<!--// ここまでを折りたたむ -->

 

コピーしたら、ワードプレスの投稿画面から【テキストモード】にしてペーストしてください。

そして、<!--この部分が折りたたまれ、展開ボタンをクリックすることで展開します。--> という部分に、折りたたまれて隠れる文章を記入してください。

 

わたしが最初に使っていた文章だとこうなります。

 

<!-- 折りたたみ展開ボタン -->
<div onclick="obj=document.getElementById('menu1').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ クリックで展開</a>
</div>
<!--// 折りたたみ展開ボタン -->
  
<!-- ここから先を折りたたむ -->
<div id="menu1" style="display:none;clear:both;">
 
てすと
てすと
てすと
 
</div>
<!--// ここまでを折りたたむ -->

 

 

注意点

このHTMLで折り畳み文章が上手くできない時は、プラグインでされることをオススメします。

わたしは『Shortcodes Ultimate』というプラグインを入れているので、下記のような文章がショートコードを挿入するだけで簡単に入力できます。

クリックすると開きます
非表示のコンテンツ
クリックすると開きます
非表示のコンテンツ

 

最後に

ここでお伝えした方法は、すべての方に対応しているわけではありません。

テーマによって方法がありますので、あなたに合った方法を見つけてください。

 

そして、あなたのワードプレスがより見やすくなることを願っています(*^^*)

 

他にもWordpress関連の記事はたくさんアップしていますのでチェックしてくださいね!!

【メルマガで詳しくアフィリエイトの情報発信中!!】

【メルマガで詳しくアフィリエイトの情報発信中!!】

ネットビジネスをやってみたいけど『子育ても家事も忙しくて…』という方に、ぜひとも読んでいただきたいです。

アフィリエイト情報をモリっと詰め込んでいます!!

【お気軽にお問い合わせください】

【お気軽にお問い合わせください】

わたしは、初心者さんへワードプレスのブログ作成方法を教えたり代行作成を行っています。

 

-WordPress
-, , ,

Copyright© 初心者のパート主婦が副業収入を得た方法! , 2019 All Rights Reserved Powered by STINGER.