サイトを作っていくうえで、
ビジュアル的に効果のある表現をしたいものです。
これは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>
上記コードの
- padding の後の数字は枠線の太さ
- #4169e1は枠線の色コード、#f0f8ffは背景の色
- solidは実践、borderは点線、dottedは実線
3．隠し文字表示方法
私のこのサイトのように、なぞなぞの答えを
問題を読んでいる間は消して、答えを知りたいときだけ
表示する方法があります。
プラグイン「Expander」を利用します。
- 他のプラグイン同様にインストールして有効化して下さい。
- 管理画面、[ダシュボード][Expander][詳細を表示]
- 画面から以下の部分（赤丸）をコピーして、
- 表示させて言ところで貼り付けする。
これはビジュアルモードでもテキストモードで編集可能です。 - "Read more"と、”Read less”の部分の修正
と"hidden Text"に隠したい記事を記入すればできあがり。[wpex more="答えを見る" less="答えを隠す"] 答えは1です。
理由は ＊＊＊だからです。
[/wpex]