WordPress よく使うコード（枠、隠し記事表示)

サイトを作っていくうえで、

ビジュアル的に効果のある表現をしたいものです。

これはHTMLのタグで構成しますが、

wordpress でHTMLをよく分からなくても、

以下のサンプルやプラグインを張り付けるだけで

使用できます。これを紹介します。

1.　見出しタイトル付囲み枠線

本文中で、強調したいところを囲み線で囲み、それの見出しタイトルを付けるコードです。

これはテキストモードで入力して下さい。

<div><span style="background: #ff8c00; padding: 6px 10px; border-radius: 10px 10px 0 0; color: #ffffff; font-weight: bold; margin-left: 10px;">見出しタイトル</span></div>

<div style="padding: 10px; border-radius: 5px; border: 2px solid #ff8c00;">記事や写真を入力</div>

スポンサーリンク

2. 見出し無し囲み線

同じように囲み線ですが、タイトルがないです。

これはテキストモードで入力して下さい。

<div style="padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">記事や写真を入力</div>

上記コードの

1. padding の後の数字は枠線の太さ
2. #4169e1は枠線の色コード、#f0f8ffは背景の色
3. solidは実践、borderは点線、dottedは実線

3．隠し文字表示方法

私のこのサイトのように、なぞなぞの答えを

問題を読んでいる間は消して、答えを知りたいときだけ

表示する方法があります。

プラグイン「Expander」を利用します。

1. 他のプラグイン同様にインストールして有効化して下さい。
2. 管理画面、[ダシュボード][Expander][詳細を表示]
3. 画面から以下の部分（赤丸）をコピーして、
    
   
4. 表示させて言ところで貼り付けする。
   これはビジュアルモードでもテキストモードで編集可能です。
5. "Read more"と、”Read less”の部分の修正
   と"hidden Text"に隠したい記事を記入すればできあがり。

   [wpex more="答えを見る" less="答えを隠す"] 答えは1です。
   理由は　＊＊＊だからです。
   [/wpex]