うえせいWP.net

WordPressのホームページ制作とWEB活用コンサルティング【大阪府】

WordPress使い方

アメブロユーザーが大好きな罫線囲みを、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)が説明しているのは、いつもこの方法です。

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

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

 

「うえせいや」のLINE@を友だち追加して下さい

うえせいのお知らせやメッセージを受け取ったり、ブログ相談会の募集告知を受け取ったりしたい方は、ううえせいやのLINE@を友だち追加してくださいね!
「うえせいや」のLINE@を友だち追加して下さい

sponsored link

合同会社うえせいやについて

合同会社うえせいやについて
「合同会社うえせいや」では、リーズナブルで柔軟性の高い月額管理費が0円の、自分で更新できるホームページの制作を承っております。
最終的に納品の際には、使い方のご指導をさせて頂くとともに、以降のサボート費用を質問の回答に限り、永年0円としておりましす。
ですので、以降の更新はご自身で、しかもスマホからも可能です。

お申込み、お問合せは無料です。
お気軽に、以下よりご連絡ください。

こんな記事も書いています

コメントを入れて頂くと嬉しいです。

*