【保存版】WordPressでプラグインなしで使える囲み枠

WordPress囲み枠



ブログ記事を作成しているとついつい言葉が多くなっていつの間にか文字だけの長文!なんてことに。

 

「読者が読みやすい」記事を作るには客観的な視覚効果を加えることがとても重要で、文章に囲み枠を入れることでずいぶんと記事の印象も変わってきます。

 

WordPressでブログサイト作成していると「プラグイン」という機能を拡張するための便利なツールがたくさん存在します。

 

しかし「あれも欲しい。これも欲しい」とプラグインばかりインストールしていると、WordPressテンプレートとの互換性やプラグイン同士で不具合が出てしまう可能性も。

 

プログラミング知識の豊富な方は変更や修正を加えることで対処できますが、初心者の方にはどこに問題があるのか突き止めることも難しいものです。

 

そこで、今回は必要以上にプラグインをインストールしないでもテキストエディタにコピペするだけで使える囲み枠をご紹介します。



プラグインを利用するメリット・デメリット

 

WordPressではプラグインをインストール利用するメリット・デメリットがあります。

以下にメリット・デメリットをまとめておきましたのでしっかり理解しておきましょう。

 

メリット

 

プラグインをインストールするメリットは、WordPressで使われているCSS(カスケーディング・スタイル・シート)というプログラミング言語に詳しくない人でも、簡単にSEO・アナリティクス・キャッシュ圧縮・Add quick・吹き出しなどのプラグインをインストールすることで利用できるようになります。

 

また、簡易に利用できることから短期間でのサイト作成や自分のサイトに色を付け加えることで他サイトとの差別化を図ることができるなど、初心者の方でもそのメリットを簡単に享受できる点。

 

デメリット

 

プラグインを利用するデメリットは文頭でも紹介しましたが、現在使っているWordPressテーマやほかのプラグインとの相性が良いかどうかという点が挙げられます。

 

もともと他のプラグインとの住み分け設計が行われないままプラグインは日に日に生み出されているので、相性の悪いプラグイン同士はCSSプログラム単位での干渉が起こりプラグインの機能が正常に作動しない、といった悪影響が発生します。

 

また、過度なプラグインのインストールはサーバーの容量を占領しネットが重くなるだけでなく、スマホのアプリ同様にアップデート時にもライムラグが発生したり個人で作成しているプラグインでは動作検証が行われなかったりするなどの不具合が報告されています。

 

テキストエディタで貼りつける手順

パソコン作業

 

WordPress内の「テキストエディタ」を使って囲み枠コードを貼りつける手順をご説明します。

 

① WordPressの「テキスト」タブをクリック

 

② 以下のようなコードをテキストエディタの任意の場所に貼り付けて「ここに文章」「見出しタイトル」の部分を削除し自分が入力したい文章を入力します。
テキストエディタ貼り付け手順②

 

③ 好きな文章を入力するとこのようなコードになります。※このとき前後にある「strong」や「< >」の部分は誤って削除してしまうと正しく表示されないので注意しましょう。
テキストエディタ貼り付け手順③

 

④ 正しく表示されているかプレビューやビジュアルエディターで確認。
テキストエディタ貼り付け手順④

基本的にコピー&ペーストをする際に「ここに文章」を任意のテキストに変更するだけなのでとても簡単にできる作業です。

 

貼り付け手順が分かったところで次項では実際に使える囲み枠コードをご紹介します。

 

ぜひ、お気に入りのコードを見つけましょう!

プラグインなしで使える囲み枠

プラグインなしで使える囲み枠をご紹介します。

囲み枠内にあるコードを実際にコピペしてテキストエディタに貼ることで使用できますよ!

 

ピンク色(背景なし)

ピンク色の囲み枠で背景なしのコード。

<div style=”border:5px solid #F9F;padding:10px;border-radius:10px;”>ここに文章を入力</div>

ピンク色の点線囲み枠で背景なしのコード。

<div style=”border: 5px dashed #F9F;padding:10px;border-radius:10px;”>ここに文章を入力</div>

 

ピンク色(背景あり)

ピンク色の囲み枠で背景ありのコード。

<div style=”border: 5px solid #F9F; padding: 10px; border-radius: 10px; background: #FFDBFF;”>ここに文章を入力</div>

ピンク色の点線囲み枠で背景ありのコード。

<div style=”border: 5px dashed #F9F; padding: 10px; border-radius: 10px; background: #FFDBFF;”>ここに文章を入力</div>

 

グレー色(背景なし)

グレー色の囲み枠で背景なしのコード。

<div style=”border: 5px solid #CCC; padding: 10px; border-radius: 10px;”>ここに文章を入力</div>

グレー色の点線囲み枠で背景なしのコード。

<div style=”border: 5px dashed #CCC; padding: 10px; border-radius: 10px;”>ここに文章を入力</div>

グレー色の立体の囲み枠で背景なしのコード。

<div style=”border: 10px ridge #cccccc; padding: 10px;”>ここに文章を入力</div>

グレー色の二重線の囲み枠で背景なしのコード。

<div style=”border: 5px double #cccccc; padding: 10px;”>ここに文章を入力</div>

 

グレー色(背景あり)

グレー色の囲み枠で背景ありのコード。

<div style=”border: 5px solid #ccc; padding: 10px; border-radius: 10px; background: #EEE;”>ここに文章を入力</div>

グレー色の点線囲み枠で背景ありのコード。

<div style=”border: 5px dashed #ccc; padding: 10px; border-radius: 10px; background: #EEE;”>ここに文章を入力</div>

 

赤色(背景なし)

赤色の囲み枠で背景なしのコード。

<div style=”border: 5px solid #F00; padding: 10px; border-radius: 10px;”>ここに文章を入力</div>

赤色の点線囲み枠で背景なしのコード。

<div style=”border: 5px dashed #F00; padding: 10px; border-radius: 10px;”>ここに文章を入力</div>

 

赤色(背景あり)

赤色の囲み枠で背景ありのコード。

<div style=”border: 5px solid #F00; padding: 10px; border-radius: 10px; background: #FFA6A6;”>ここに文章を入力</div>

赤色の点線囲み枠で背景ありのコード。

<div style=”border: 5px dashed #F00; padding: 10px; border-radius: 10px; background: #FFA6A6;”>ここに文章を入力</div>

 

オレンジ色(背景なし)

オレンジ色の囲み枠で背景なしのコード。

<div style=”border: 5px solid #F90; padding: 10px; border-radius: 10px;”>ここに文章を入力</div>

オレンジ色の点線囲み枠で背景なしのコード。

<div style=”border: 5px dashed #F90; padding: 10px; border-radius: 10px;”>ここに文章を入力</div>

 

オレンジ色(背景あり)

オレンジ色の囲み枠で背景ありのコード。

<div style=”border: 5px solid #F90; padding: 10px; border-radius: 10px; background: #FFDBA6;”>ここに文章を入力</div>

オレンジ色の点線囲み枠で背景ありのコード。

<div style=”border: 5px dashed #F90; padding: 10px; border-radius: 10px; background: #FFDBA6;”>ここに文章を入力</div>

 

青色(背景なし)

青色の囲み枠で背景なしのコード。

<div style=”border: 5px solid #0CF; padding: 10px; border-radius: 10px;”>ここに文章を入力</div>

青色の点線囲み枠で背景なしのコード。

<div style=”border: 5px dashed #0CF; padding: 10px; border-radius: 10px;”>ここに文章を入力</div>

 

青色(背景あり)

青色の囲み枠で背景ありのコード。

<div style=”border: 5px solid #0CF; padding: 10px; border-radius: 10px; background: #A6EDFF;”>ここに文章を入力</div>

青色(背景あり・点線)

<div style=”border: 5px dashed #0CF; padding: 10px; border-radius: 10px; background: #A6EDFF;”>ここに文章を入力</div>

 

ピンク色(背景なし)

ピンク色の囲み枠で背景なしのコード。

<div style=”border: 5px solid #F9F; padding: 10px; border-radius: 10px;”>ここに文章を入力</div>

ピンク色の点線囲み枠で背景なしのコード。

<div style=”border: 5px dashed #F9F; padding: 10px; border-radius: 10px;”>ここに文章を入力</div>

 

ピンク色(背景あり)

ピンク色の囲み枠で背景ありのコード。

<div style=”border: 5px solid #F9F; padding: 10px; border-radius: 10px; background: #FFDBFF;”>ここに文章を入力</div>

ピンク色の点線囲み枠で背景ありのコード。

<div style=”border: 5px dashed #F9F; padding: 10px; border-radius: 10px; background: #FFDBFF;”>ここに文章を入力</div>

 

見出し付枠(青)

青色の見出し付き枠のコード。

見出しタイトル
<div style=”display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;”><strong>見出しタイトル</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #3399ff;”>ここに文章</div>

 

見出し付枠(橙)

見出し文字
<div style=”background: #ff9900; padding: 5px 10px; color: #ffffff;”><strong>見出し文字</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #ff9900;”>ここに文章</div>

 

見出し付枠(赤)

見出しタイトル
<div style=”background: #ff6666; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;”><strong>見出しタイトル</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #ff6666; border-radius: 0 0 10px 10px;”>ここに文章</div>

このようにある程度、ショートコードの中に規則性があることが分かってくると思います。

コード内に「#F9F」などのように「#(シャープ)」で始まる部分は枠色を指定するコードで、後半にある「#FFDBFF」は枠内のカラーを指定しています。

枠色や枠内のカラーを変更したい場合は「HTMLカラーコード」を参照すれば、好みの色に差し替えて囲み枠を作成することができます。

その他に「border: 5px」は枠線の太さを表していて数字を変更することで簡単に枠線の太さを変更することが可能で、同様に「padding: 10px」は文字と枠の余白、「border-radius: 10px」は枠の角の大きさや丸みを表しています。

囲み枠を使用する時の注意事項

囲み枠を使用するうえで注意事項がいくつかあります。

CSSとHTMLの違い

WordPressはCSS・HTML・phpなどの言語で成り立っています。
プラグインなしで使える囲み枠を検索すると、形式が異なったコードがいくつか表示されますが当記事で紹介したコードはHTML形式になります。

 

当然、CSSコードをテキストエディタに貼り付けても反映されることはありません。

 

CSSコードを編集できるようになればカスタマイズの幅は広がりますが初心者がCSSコードを安易に触るのは危険です。

 

全体のコードが崩れてしまうとサイト自体の構成が大きく崩れて復旧に大変な時間がかかるので、初めは当記事で紹介したHTMLコードを利用した囲み枠などを利用するのがおすすめ。

 

囲み枠が上手く表示されない時

当記事で紹介した囲み枠コードをコピペして使用する場合にうまく反映されない場合があります。
原因としては下記のような理由が考えられます。

 

・「”(ダブルクォーテーション)」半角が全角になっている
→「”(ダブルクォーテーション)」がいくつかコード上に出てきますが半角が正解でブラウザで表示される場合に自動で「”」全角になってしまうことがあります。
全角になっているとコードが成り立たないので全角を半角に打ち直すことで対処できます。

 

・コード崩れ
→コピペして利用する際に「ここに文章」の部分を削除して任意のテキストに変更します。
この時に前後にある「<」「>」「:」「;」などの半角記号が誤って削除されていたり、変な部分で改行されているとコードが崩れてうまく表示されなくなります。
上手く表示されない場合は、コピペ前のコードとよく見比べてみましょう。

 

※追記 2019/4/18】
見出し付き枠の場合「見出しタイトル」と「ここに文章」の部分に、直接入力していくことになりますが、ビジュアルエディタで入力&削除などを繰り返しているとコードが崩れて不要なスペースが空いたり、枠が分割されてしまうケースがあります。

面倒ですが「テキストエディタ」で、「見出しタイトル」と「ここに文章」に文章を上書きしていったほうが確実。枠内でスペースを増やしたいときも同様にテキストエディタで改行するとキレイに収まります。

最低限入れておきたいプラグイン

プラグインなしで利用できる囲み枠を説明してきましたが、ここでは最低限はインストールしておきたいプラグインを紹介しておきます。

Add Quicktag(アドクイックタグ)

Add Quicktag

1度登録しておけば複数あるHTMLショートコードを毎回コピペする必要がなくボタン1つで挿入できるプラグイン「Add Quicktag」。

 

よく使うHTMLショートコードを追加することで、記事作成時に編集メニューに常に表示させておくことが可能。

 

Add Quicktagのタグ作成方法はこちらの記事「WordPressのプラグインAddQuick tagの使用手順☑」をご覧ください。

 

TinyMCE Advanced

TinyMCE Advanced

文字のフォント・文字の位置・引用・下線・表の挿入・画像の挿入など編集メニュー自体を編集することで充実した記事作成が可能になる便利なツール。

 

よく使うメニューだけを表示させることができるので、ビジュアルエディタで直感的に記事を作成することが可能。

 

TinyMCE Advancedの使用手順はこちら「WordPressのプラグインTinyMCE Advancedの使用手順&編集方法☑」で紹介していますので、ご参照ください。

 

最適な方法で囲み枠を使おう

WordPress
WordPressのAdd QuicktagやTinyMCE Advancedといったプラグインを軸に、テキストエディタで使用するHTMLショートコードはなるべくサイトに合ったものをあらかじめコピペで登録しておけば不要なサーバー負担やプラグイン同士の干渉を減らすことができます。

 

プラグインを1つも使用しないというのは、初心者にとってあまり良い方法ではなく記事作成するうえで時短を実現できるプラグインはやはり使うべきです。

 

「プラグイン」という機能を拡張するための便利なツールと上手に付き合っていく必要があるので、ぜひ当記事で紹介したHTMLショートコードを気軽にコピペ利用して下さいね。



ABOUTこの記事をかいた人

ブログ・投資・ビジネスをメインテーマにした俳句ブログ『Office Exitの俳句』編集者。ブログ運営→投資→ブラック企業から独立。ブログ収益360万、投資収益450万。趣味は俳句。特技は俳句。仕事も俳句。NHK全国俳句大会『入賞』、枕草国際俳句大会『入賞』、子規顕彰全国俳句大会『入賞』、福岡総合俳句大会『優秀賞』。