【wordpress】おしゃれな囲み枠の使い方を優しく説明(HTML・CSS)

ぽんこつ
おしゃれしたいけどセンスないぽんこつです

見やすいブログを書く上では、囲み枠(ボックス)って大事ですよね。

黒板こういうやつ

とか

メモ風こういうやつ

こういった囲み枠をwordpressで使用する方法を説明します。

ざっくり流れ①好きな枠を探す
②wordpressに『囲み枠』とはなんぞやを教える(CSSの追加)
③『囲み枠』を呼び出す(htmlの記載)

 


デザインの選定(CSS・HTML)

1から囲み枠のデザインを自分で作るのはHTMLやCSSの知識が必要になります。

ぽんこつ
もう無理

と泣きたいところですが、ネット上には優しい人がいて、デザインをネット上に公開してくれていますこれを惜しげもなく使っていきます。

私はこのあたりのサイトからデザインをいただいてます。

このサイトでCSSとHTMLを取得して、使用するまでの流れを説明します。

HTMLやCSSのことが分からなくても手順に沿ってやれば簡単にできますのでご安心を。

 

では早速行きましょう。

 

まずは先ほどのサイトで好きなデザインを探します。(今回は1個目のサイトを使用)

好きなデザインを見つけたらコードを表示』をクリックします。

クリックすると、『HTML』と『CSS』というコードが書かれたものが表示されると思います。

これらのコードを使ってブログに囲み枠を表示させます。

今回は『box14』という囲み枠を選びました。
このCSSには『box14とはなんぞや』ということが、HTMLには『box14』の呼び出し方が書いてあるわけです。

CSSの追加

まずはwordpressに『box14とはなんぞや』ということを教えていきます

デザインのページはコピペするときに使用しますので、別でwordpressを開きます。
開いて左側ツールバーの外観』をクリックします。

『外観』をクリックすると、下の階層が現れますのでカスタマイズ』をクリックします。

『カスタマイズ』をクリックして移動したページの左ツールバーの追加CSS』をクリックします。

クリックして現れた画面に先ほどの選んだデザインのCSS』のコードを貼り付けます
icon-exclamation-circle 今まで追加したことない方はまっさらです。

コピペしたら、上の公開』をクリックします。

これでCSSが保存されました。

wordpressは『box14』というのが青地に破線の枠があるボックスであることを覚えました

なので今後、選んだ囲み枠を使うことが出来るようになりました。

では早速

ぽんこつ
出でよ!!!水色に破線の囲み枠!!!!

 

 

 

 

 

 

・・・・・・・・

 

 

 

出ませんね。

ということで、青い囲み枠を出すには専用の呪文が必要になるわけです。これがデザインのページの『HTML』になります。

囲い枠の呼び出し(HTMLの記載)

テキストの画面でHTML」をコピペして貼り付けます。

『ビジュアル』の画面では使用できません。


ここに文章

 icon-arrow-circle-up  icon-arrow-circle-up 上に選んだ枠が表示されていますよね。これで枠を表示することが出来ました。(下に補足説明あり)

 

 

あとは『ここに文章』の箇所を自由に書き換えて使ってください。文字の装飾も可能です。

ここでは自由に書き換えられます装飾も可能です。

 

 

 

CSSの追加によってあなたのwordpressに『box14』を覚えさせているので、初回以降はCSSの記載は不要HTMLだけ記載すればすぐにボックスを呼び出すことが出来ます

 

HTMLを毎回さきほどのサイトから持ってくるのは大変ですので、AddQuicktagというプラグインを使うと便利です。
(今後使い方をまとめた記事を書きます。)

補足説明

枠使いたいマン
チョットマッテチョットマッテオニーサン!!!投稿の『テキスト』画面に戻ったら「ここに文章」しか書いてないんですけど!!!!

安心してください。それで問題ありません。

右上の公開ボックスの『プレビュー』を押してください。

ちゃんと出てきてますよね?

CSSにて追加させた装飾は、wordpressでの『ビジュアル』画面では表示されませんが、これは仕様です。

面倒ですが、デザインが気になる際は都度『プレビュー』で確認してください。 

 

まとめ

今回、おしゃれな囲み枠(ボックス)の使い方を説明しました。
ブログにとってデザインはかなり大事なところですので、こういったおしゃれな枠を使えるのはかなり大きいですよね。

是非是非囲み枠(ボックス)を利用しておしゃれにブログを仕上げていってください。

ぽんこつ
私はセンスがないので使いどころに迷いますが
追加CSSの名前には気を付けて
今回は『box14』という名前の枠をwordpressに覚えさせました。
いろんなサイトからデザインを取ってきて追加していると、名前が被る可能性があります

被った場合、CSSの下に書かれているほうが優先されるようです。

そのため出来るだけ、上のような単純な『ボックス数字』といった名前の場合は、ご自身で名前を付けることをお勧めします。
CSSのドットの後の部分『.〇〇〇』の〇〇〇が名前になりますので、CSSおよびHTMLのすべての名前を別の名前に書き換えてあげればOKです。