ワードプレス

ワードプレス道 コピペで簡単に使用できるボックスおすすめ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を入れてください。

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

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

続きを見る

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

続きを見る

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

ビジネスにもブログにも使いやすいWordPressテーマ

「WING(AFFINGER5)」

SEOや収益化に効果的な機能が豊富

記事ごとにAMP化を選択可能

簡単に設置出来るランキング機能をはじめとしたアフィリエイトを始めやすい設計

お得にご購入はコチラ

  • この記事を書いた人
NAO

NAO

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

-ワードプレス

© 2021 TSUTAERU BLOG