ワードプレス

ワードプレス道 おすすめのタイトル付きボックスデザインを紹介

 

今回はタイトル付きボックスデザインをコピペで簡単に使用できるようにしています。

ワードプレス用にCSS込みコードにしていますのでコピペでOKです。

 

単発で使用するだけならテキストモード画面でコードを貼り付けたらすぐ使えます。
 

まずワードプレスに新エディターから旧エディターに戻す
TinyMCE Advancedをインストールしてクラシックエディターにしましょう。

 

分からない場合は下記を参考に進めてください。

ワードプレス道 「機能編」記事の強調部分に下線と背景色の設定方法!!

続きを見る

 

タイトル付き枠(シンプル)

 

タイトル

本文はこちらに

 

 

※shift+Enterで改行できます。

 

色を変更する場合は、

#ffccccをお好きな色に変更してください。

WEBカラーチャートなどを参考にしてください。

 

タイトル付き点線の枠

 

タイトル

本文

 

 

※shift+Enterで改行できます。

 

色を変更する場合は、

#2a83a2をお好きな色に変更してください。

WEBカラーチャートなどを参考にしてください。

 

タイトル付き二重線の枠

 

タイトル

本文

 

 

※shift+Enterで改行できます。

 

色を変更する場合は、

#93ca76をお好きな色に変更してください。

WEBカラーチャートなどを参考にしてください。

 

 

上部タイトル付枠

 

■タイトル
本文
 

 

※shift+Enterで改行できます。

 

色を変更する場合は、

#ff7f50を3箇所お好きな色に変更してください。

WEBカラーチャートなどを参考にしてください。

 

上部タイトル付枠 (角丸)

 

 

□タイトル
★ここに文字を入力してください。

 

 

※shift+Enterで改行できます。

 

色を変更する場合は、

#1e90ffを3箇所お好きな色に変更してください。

WEBカラーチャートなどを参考にしてください。

 

上部タイトル付枠 (小さい角丸)

 

□タイトル
★ここに文字を入力してください。
 

 

※shift+Enterで改行できます。

 

色を変更する場合は、

#00bfffを2箇所お好きな色に変更してください。

WEBカラーチャートなどを参考にしてください。

 

色の変更をしたい場合はwebのカラーチャートからお好きな色を選び、入れ替えてみてください。

カラーチャートはコチラ

 

プラグインAddQuicktagを登録

継続して使用する場合はプラグインAddQuicktagを入れてください。

使い方は、下記を参照に使用してみてください。

 

ご購読ありがとうございました。

 

ワードプレス道 「機能編」囲み枠で記事の見た目を整えよう!!

続きを見る

  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery/PHP 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-ワードプレス

© 2024 TSUTAERU BLOG