WordPress

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>


スポンサーリンク

マナブ記事広告g1




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"に隠したい記事を記入すればできあがり。

    答えを見る

マナブ記事広告g1




マナブ記事広告g1




-WordPress

Copyright© なぞなぞとPHP開発 , 2018 All Rights Reserved.