ワードプレス

ワードプレス道 コピペで簡単に使用できるボックスおすすめ8選を紹介

こんにちはNAOです。
 
 
今回はワードプレスで簡単に使用できるボックスを紹介していきます。
ワードプレス用にCSS込みコードにしていますのでコピペでOKです。
 
 
単発で使用するだけならテキストモード画面でコードを貼り付けたらすぐ使えます。
 
 
 

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

 

 

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

 

 

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

続きを見る

 

落ち着いたボックス

 

★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
 
 

 

文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。

 

 

左右に線のボックス

 

★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
 
 

 

文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。

 

 

2重線のボックス

 

★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
 
 

 

文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。

 

 

上下線のボックス

★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
 
 
 
 

 

文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。

 

 

 

タイトル付きボックス

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

 

文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。

 

左線のボックス

 

★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
 
 

 

文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。

 

 

上に線があるボックス

 

★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
 
 

 

文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。

 

ストライプのボックス  横サイズ600px指定

 

★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
★ここに文字を入力してください。
 
 

 

文字は自動改行か、shift+Enterで改行して文字幅を調節してお使いください。

 

横のサイズ指定の方法

全て横のサイズの指定がありませんので、

 

横サイズの指定が必要な場合は下記を初めの<div></div>の中に

width:600px;を追記してください。

 

 

プラグインAddQuicktagを登録

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

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

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

続きを見る

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

続きを見る

ご購読ありがとうございました。
  • この記事を書いた人
NAO

NAO

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

-ワードプレス

© 2024 TSUTAERU BLOG