家事・子育ての合間にブログ・アフィリエイト・メルマガで収入を得る!

WordPressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル

miiko
WRITER
 
Wordpressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル
この記事を書いている人 - WRITER -
miiko
初心者さんのブログ運営をサポートしています。 Wordpress作成・ブログ記事の書き方・レポートや特典の作り方・メルマガ配信など、初心者さんの『困った(>_<)』をサポートします。
詳しいプロフィールはこちら

Wordpressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル

 

ブログを書いていると、読みやすさを考え文字装飾をしたくなりますよね。

文字装飾されたブログは、文字だけが羅列したブログと比較すると、読みやすいだけでなく、強調したい部分を伝えることができ、メリハリを出すこができます。

 

そこで今回は、ブログの文字装飾で欠かせない、文字を囲む枠の作り方と簡単なHTMLの解説・コピペで使えるサンプルを初心者の方にもわかりやすく紹介します。

文字装飾:囲み枠

 

文字装飾:ボックス

 

慣れないと難しく感じるHTMLですが、仕組みさえ理解できれば自由にアレンジも可能です。
最初はコードのコピペから取り入れ、慣れてきたらアレンジするとわかりやすいと思います。

コードのサンプルも用意してありますので参考にしてください(^^)

まずは、簡単にわかるタグの仕組みから解説します。

 

 

 

『HTMLタグ』の基礎知識

 

見なれないと難しく感じますが『文字を囲む枠』を作るためのコードは、ひとつひとつ分解してあげると、とてもシンプルです。
仕組みさえ理解すれば、あとは自由に変更してアレンジ可能です。

ここに文字を入力
このシンプルな囲み枠のHTMLタグは↓

 

 

『タグ』は要素の範囲を指定しているもので、要素の始めと終わりを<>に記号を使って区切る役割を持っています。
『属性』はタグの役割を細かく指定する役割を持っています。

Wordpressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル

図で見ると構造自体はシンプルなのが、わかりますね(^^)

 

コードの属性

先ほどの、基本となるシンプルな囲み枠コードを使って説明していきます。

ここに文字を入力

 

<div style=”border: 5px solid #FFF5EE; padding: 10px; border-radius: 0px; background: ##ffffff;“>ここに文字を入力</div>

border: 5px solid #FFF5EE;

線の太さ・種類・色の指定です。

太さ→1px 数字が大きくなれば線は太くなります。

種類→solid(線の種類は次ページで紹介します。)

色→#e9967a(カラーコードは原色大辞典を参考にしてください。)

 

padding: 10px;

枠の内側の余白の幅の指定です。数字が大きくなれば余白は広くなります。

 

border-radius: 0px;

枠の角に丸みを持たせる指定です。数字が大きくなると丸みが増します。

ここでのサンプルの枠は角が四角なので数値は0です。

 

background: ##ffffff;

枠の背景色の指定です。(カラーコードは原色大辞典を参考にしてください。)

 

囲み枠の線の種類

枠線は【border: 5px solid #FFF5EE;】の部分を入れ替えることで、様々な線に変更することができます。

お好みで入れ替えてください。

■直線【solid】

Wordpressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル

■点線【dotted】

Wordpressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル

■破線【dashed】

Wordpressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル

■二重線【double】

Wordpressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル

■くぼみのある線【groove】

Wordpressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル

■隆起した線【ridge】

Wordpressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル

 

 

囲み枠の線の色と背景色

囲み枠の線の色【border: 5px solid #FFF5EE;】

囲み枠の背景色【background: ##ffffff;】

カラーコードを入れ替えることで、枠線の色・背景色を変更することができます。

カラーコードは原色大辞典を参考にしてコピペしてください。

 

 

コピペで使える囲み枠のHTMLタグ

 

コピペで使える囲み枠のHTMLタグを記載します。

そのまま使っても大丈夫です(^^)

 

直線

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

直線・角丸点線

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

 

破線

 

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

点線

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

 

二重線

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

 

くぼみのある線・隆起した線

★ここに文字を入力してください。

 

★ここに文字を入力してください。

 

 

見出し付きの枠

□タイトル
★ここに文字を入力してください。

 

□タイトル
★ここに文字を入力してください。

 

□タイトル
★ここに文字を入力してください。

 

 

よく使うタグ入力を登録して入力を簡単にする方法

 

色々なタイプの囲み枠を紹介しましたが、実際に自分が好んで使うものは数種類程度。

とは言え、毎度毎度、文字装飾の度にタグの入力をするのは、意外と面倒です(^^;

そこで、お好みの文字装飾が決まったら、よく使用するタグはプラグイン『AddQuicktag』を使用して、タグ登録を行いワンクリックで呼び出せるようにすると便利です。

 

まとめ

 

囲み枠を使って文字装飾をすれば、いつもの文章もメリハリが出ますね(^^)

今回は文字の囲み枠をご紹介しましたが、ブログの文字装飾には、文字の色や太さを変更したり、下線マーカーを引いたり、様々な種類があります。

ユーザーの読みやすさを第一に考え、使い分けてくださいね(*’▽’)

 

 

最後までご覧いただきありがとうございます。

ポチッと応援してもらえると嬉しいです(*'▽')

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ

 

自宅でお仕事!ブログを仕事にしませんか?

初心者でも・実績がなくても自分のペースで

ブログで稼ぐ力を身に付けるための無料メルマガ講座です。

メルマガ登録透過2

さらに、ブログ運営に役立つ4つのプレゼント付き!

 

 

 

この記事を書いている人 - WRITER -
miiko
初心者さんのブログ運営をサポートしています。 Wordpress作成・ブログ記事の書き方・レポートや特典の作り方・メルマガ配信など、初心者さんの『困った(>_<)』をサポートします。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Copyright© みーこの自宅でネットビジネス , 2018 All Rights Reserved.