【WordPress】文字装飾＋文字囲み＋色サンプル

このページではWordPressでブログを各場合に便利な文字装飾を色々まとめてみました。

プラグインのアプリをインストールするだけのものから、HTMLの構文をちょっと調べないと作ることができないものまで色々あります。

文字の背景色を変える

TinyMCE Advanceを利用する

「TinyMCE Advance」というアドインを使うと、WordPressに標準で付いている文字装飾井女に便利な機能があります。

詳しくは「TinyMCE Advance」の使い方をまとめたページを見て下さい。

文字の背景色を変える

文字の背景色を変える

背景色が変わる

↓↓↓上の文字はこのようなコードで書かれています。↓↓↓

<span style=”background-color: #ffff00;”>背景色が変わる</span>

文字サイズを変える

通常の文字サイズは12ptというサイズですが、文字サイズを変更することもできます。

文字サイズ(24pt)

文字サイズ(18pt)

文字サイズ(14pt)

文字サイズ（12pt）

↓↓↓上の文字はこのようなコードで書かれています。↓↓↓

<span style=”font-size: 24pt;”>文字サイズ(24pt)</span>

ただし、文字サイズの変更を多用しすぎると、文章全体が見にくくなるので、多用しすぎない用に注意する必要があります。

文字を線で囲む

文字をか囲む線を追加します。

こうすることで文章の中で強調したい部分をはっきりと分けると子ができますね。

ブログ記事を枠で囲み色を付ける

↓↓↓上の文字はこのようなコードで書かれています。↓↓↓

<div style=”padding: 16px; border: solid 3px #00008b; border-radius: 10px; background-color: #e0ffff; margin-top: 20px; margin-bottom: 20px;”>文字が入ります。</div>

↓↓↓これらはこんな理由のコマンドです。↓↓↓

• padding: 16px
  文字渡船との間隔。ココでは16ピクセル
• border: solid 3px #00008b
  線のスタイルです。
  solidは実線で線の太さが3ピクセル。線の色が#00008b。
• border-radius: 10px
  角を丸くします。半径10ピクセルで角を丸めます。
• background-color: #e0ffff
  背景色の指定です。
• margin-top: 20px、margin-bottom: 20px
  枠の余白部分の幅

線の種類は以下の用になります。

• solid(実線)
• dotted(点線)
• double(二重線)
• dashed(幅広の点線)
• none(無し)

見出し＋枠内の文字列１

上の文字囲みの応用として、囲み線の中に文章を追加することもできます。

↓↓↓上の文字はこのようなコードで書かれています。↓↓↓

<fieldset><legend>見出し</legend>枠内の文字列</fieldset>

• <fieldset>タグ：フォームの入力項目をグループ化する
• <legend>タグ：グループにタイトルを付ける

見出し＋枠内の文字列２

<div style=”padding: 5px 10px; color: #ffffff; background: #8a2be2;”>見出し</div>
<div style=”padding: 10px; border: 1px solid #8a2be2; background: #ffffff;”>枠内の文字列</div>

色見本

よく使いそうな色をまとめてみました。

もっと詳しく色々な色番号を知りたい時は原色大辞典を利用します。

 - ★☆★雑談, 雑談=インターネット・ブログ 雑談=ブログ・インターネット=WordPress