当サイトの一部にはプロモーションを含むことがあります

ワードプレスで囲み枠を作るにはHTML・CSSにコピペするだけ！【図解】

WordPress・PC
2018.02.18

 

いろんなブログを見ていると、デザインが洗練されていてとても見やすいブログがありますよね。

 

ブログを更新していく上で、記事の内容が一番大事であることは間違いないんですが、やっぱりデザインも読者を惹きつけるためには、大事な要素になってくると思います。

 

例えば、単に文字を大きくして太字にするだけじゃなくて、吹き出しなどで見出しを作ったりしてみると、メリハリがついて記事が見やすくなります。

吹き出しの例

吹き出し

 

また、記事の要点をかっこいい（おしゃれな）デザインボックスで囲ってあると、格段に読者にとって理解がしやすくなると思います。

デザインボックスの例

ボックス（ラベル付）

 

ワードプレスで文字の囲み枠を簡単に表示させる方法について、まとめてみました。ス

タイルシート（CSS）というウェブページのスタイルを指定する言語を使用しますが、コピペするだけでOKですので、初心者の方でも簡単にできます。

 

あとは、プラグインをインストールすれば、ボタン一つで囲み枠を表示させることができますよ！

 

スポンサーリンク

囲み枠を表示するためのHTMLとCSS

囲み枠を作成し表示するには、HTMLとCSSの2つの言語を使いますが、細かいことを覚える必要はありません。

 

“CSSで囲み枠のスタイルを指定し、HTMLでその指定した囲み枠を表示させる”ということだけ覚えておけばいいと思います。

 

この後、HTMLとCSSの2つの“コード”が出てきますが、初心者の方でもビビる必要はまったくありませんのでご安心を！

 

ワードプレスのCSSに囲み枠のコードをコピペ

囲み枠のコードを入手

手順としては、まずCSSで囲み枠のスタイルを指定します。

 

指定するといっても、ネットで公開されているコードをコピーして貼り付けるだけ（コピペ）でOKです。

 

例えば、↓ような囲み枠を作る場合のコードは、以下の【CSS】のようになります。

ボックス（丸角）

【CSS】

/* ボックス（丸角） */
.box2 {
     padding: 0.5em 1em;
     margin: 2em 0;
     background: #fff8e8;
     border: solid 2px #ffc06e;/*線*/
     border-radius: 10px;/*角の丸み*/
}
.box2 p {
     margin: 0; 
     padding: 0;
}

 

「サルワカ」様のホームページに囲み枠のコードが公開されています。

ここに30種類の囲み枠のコードがありますので、お好きなコードをコピーしてください。

 

他にもコードを公開しているページがたくさんありますので、googleなどで「css　囲み枠」で検索してみてください。

 

コピーしたコードを子テーマのCSSに貼り付け

子テーマをインストールしていることを前提に話を進めます。

 

子テーマを用意していない方は、「子テーマをインストールする理由と方法」の記事をご覧ください。

なお、このブログでは、WordPressのテーマは「simplicity2」を使用しています。※現在はCocoonというテーマに変更しました。

 

下の図のように、子テーマのstyle.cssを開いて、先ほどコピーしたコードを貼り付けます。

 

この段階のコードをTeraPadなどのエディターにコピペしてバックアップしておくことをおすすめします。万が一、わけがわからなくなっても元に戻せます。

 

より安全に作業をしたい場合は、ファイル転送ソフトでサーバーからstyle.cssファイルをダウンロードし、コピーした上でファイルを更新し、再度アップロードしてください。

ファイル転送ソフトFileZillaの使い方はこちらの記事をご覧ください。

 

子テーマのstyle.css

 

cssコード

 

多くの方がビジュアルエディターを使用していると思いますが、ビジュアルエディターにも囲み枠が反映されるように、ビジュアルエディターのCSSにも同じコードを貼り付けましょう。
これをしないと、ビジュアルエディター上では囲み枠がついているか確認できませんのでご注意を。
 

 

ビジュアルエディターのCSS

 

cssコード（ビジュアルエディター）

 

 

ここまでで、CSSの準備は完了です。

 

AddQuicktagでタグ登録

インストール方法

①WordPressの管理画面から[プラグイン]－[新規追加]をクリックしてください。

 

②「AddQuicktag」を検索してください。

 

③「AddQuicktag」の“今すぐインストール”を押してください。

 

④“有効化”を忘れずに押してください。

 

Addquicktag

 

タグの登録

AddQuicktagにタグを登録すると、ボタン一つでそのタグを呼び出すことができるので、とても便利です。

 

①WordPressの管理画面ら[設定]－[AddQuicktag]をクリックしてください。

 

②下の図のように、ボタン名のところに任意の名前をつけてください。このボタンを押したら、指定した囲み枠が出てくるので、分かりやすい名前がいいですね。

 

③開始タグのところに、先ほどのCSSコードを入手したサイトに一緒に書かれているHTMLのコードを貼り付けてください。

 

【HTML】

<div class="box2">
  <p>ここに文章</p>
</div>

 

④右端のチェックボックスはすべてチェックでOKです。

 

Addquicktagの設定

 

⑤「変更を保存」をクリックしてください。

 

ここまでで、HTMLの設定も完了しました。

 

確認作業

以上の設定で囲み枠が使えるようになりましたが、試しに確認してみましょう。

 

①WordPressの管理画面から[投稿]－[新規追加]をクリックしてください。

 

②AddQuicktagで登録したタグボタンをクリックしてください。

ビジュアルエディターでのAddquicktag

 

③ちゃんと囲み枠が表示されれば確認完了です。

ボックス（丸角）

関連記事

囲み枠を文字の長さに合わせる方法

 

まとめ

これで見た目が格段にアップするのではないかと思います。

いろんな囲み枠を見ていたら、ついつい楽しくなって、5つも登録してしまいした。使うかどうか分かりませんが。。。

ご自身のブログに合った囲み枠を探してみてください。

 

タイトルとURLをコピーしました