アメブロユーザーが大好きな罫線囲みを、WordPressで楽に実現する方法

アメーバブログ(以下アメブロ)を運営されている方は、よく目立たせたい部分を罫線で囲ったりしますよね。
WordPressはもとより、他の無料ブログサービスでもあまり見かけない独自文化のようです。

WordPress 罫線で囲む

その罫線で囲む方法をWordPressで実現するには、アメブロと同じHTMLタグを記事中に書けばいいのですが、念のため紹介しておきます。
その上で、せっかくWordPressを使うのですから、もっと簡単に使う方法も併せてご紹介します。

 

sponsored link

アメブロと同じく、HTMLタグを書き込み、罫線で囲む方法

この「#000000」は、罫線の色。「#ffffff」は背景色ですので、6桁のカラーコードを調べてお好きな色にしてくださいね。

 

これでは、毎回このコードを入力しないといけないので、オススメできません

このコードを毎回初めから入力するのか、どこかに保存してあるものをコピペして使うかしないといけませんね。

一見それでもいいように思いますが、次の理由からオススメできません。

  • 面倒くさい
  • コピペする際に間違う可能性がある
  • あとで、記事を編集する時に、コードがグチャグチャでメンテする気になれない
  • デザインなど、装飾に関係することは、CSSファイルにまとめるのがルール
  • 後に色などのデザインを変えた場合には、以前の分はそのまま残ることになり、統一感が損なわれてしまい素人くさいサイトになる

 

WordPressでは、プラグインを使って解決ができる

「Symple Custom CSS」で、CSSを記述しておく

Simple Custom CSSは、WordPressのテーマ本体を直接編集することなく、テーマのCSSをカスタマイズできるプラグインです。
通常WordPressの場合、「Style.css」というテーマファイルを編集することになるのですが、テーマを変更したときに、そこに追記したものまで、無くなってしまいます。

それを防ぐために、このプラグインをインストールして、以下のように書き込んでおくといいでょう。

【関連記事】
http://www.uesei.net/1684

 

「Add Quick Tag」を使って、いつでも呼び出せるようにしておく

Add Quick Tagに次のような設定をしておきましょう。
Add_quick_tag

  • ラベル名:任意の名前
  • Start Tag: 
  • 終了タグ: 

 
使う時は、囲みたい文字を選択しておいて、先ほど設定の時につけた任意の名前のボタンを押すと、両サイドにタグが出てきて完了です。
Addquicktag使い方

 

【関連記事】
http://www.uesei.net/2825

 

【まとめ】好きな方はどうぞ使ってくださいまし

うえせいイラスト

私自身は、ほとんど使うことのないタグですが、問い合わせが多いのでご紹介しておきます。

ご紹介する時に、コピペ方式だと説明が簡単なのですが、非常に面倒なので私うえせい(@charin_co)が説明しているのは、いつもこの方法です。

良かったら参考にしてくださいまし。

では、また。テリマカシ。

 

sponsored link

lineat
「この記事が気に入ったらLINE@で友だち追加をしよう!
合同会社うえせいやの最新情報をお知らせします。

友だち追加
うえせいイラスト

「合同会社うえせいや」代表の「うえせい」こと上原誠司です。
 
弊社では、WordPressを専門で扱うホームページの制作を承っております。
月額管理料は0円な上、納品後のサボート費用は質問の回答だけであれば永年0円です。
 
お問合せは無料です。お気軽にご連絡ください。