WPに各種デザインを設定しました

当サイトはWP(WordPress）で構成していますが、味気ないので引用デザインとボックスデザインを設定してみました。

設定は、CSSを張り付けるだけでとっても簡単ですが、結構見栄えが良くなりました。

引用デザインの設定

引用デザインは他から引用するときに用いるものですが、 WP には気のきいた引用デザインがないので　CSSで作る！魅力的な引用デザインのサンプル30　を参考にさせていただき設定しました。

CSSの貼り付け

CSSで作る！魅力的な引用デザインのサンプル30　のサンプルから使いたいCSSを選びコピーし WordPress に貼り付けます。

貼り付ける場所は　　外観　　カスタマイズ　　追加CSS　です。

FontAwesomeの設定

FontAwesomeを使うとカッコ良いのができるというので設定します。

Font Awesomeの使い方　を参考に。

FontAwesome のコードをWordPress に貼り付けます。

貼り付ける場所は　　外観　　テーマエディッタ　の　heder.php　です。　

設定完了

HTML文に次のように記述します。

こんな感じの引用デザインが設定できました。

CSSで作る！魅力的な引用デザインのサンプル30　を参考に引用デザインが設定できました。

ボックスデザインの設定

ボックスデザインは　【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30　を参考にさせていただき設定しました。

CSSの貼り付け

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30 のサンプルから使いたいCSSを選びコピーし WordPress に貼り付けます。

貼り付ける場所は　　外観　　カスタマイズ　　追加CSS　に続けて貼り付けます。

ボックスの表示

ボックスの表示はHTMLブロックに、次のように記述します。

するとこんな感じになります。

こんなボックスも設定しました。

以上　さるわか　を参考にさせていただきました感謝します。