Word pressの記事内の文章を枠線で囲む挿入の仕方

記事内をおしゃれにするには色々ありますが、枠で囲った部分があったら目を引きますしさっぱりとした記事に仕上がると思いますので今回は記事内に枠を挿入するやり方を説明していきます。

私はWord pressを使っていますが、どれも一緒だと思いますのでやってみてください。

記事内に枠線を入れる

まずテキストタブにしてそこに記載していきます。（他のブログではHTMLに表示されている場合もある）

テキストタブを選んで任意の場所に

<div style=”border: solid 2px #004488; padding: 15px;width: 50%;”>記事</div>

と書き込みます。

border＝線の種類　　　solid＝実線　　 2px＝線の太さ　　#004488＝線の色

padding＝線と文字の余白　　15px余白の大きさ　　width＝線の幅

50%＝コンテンツ幅と線の割合　　>記事<＝枠線で囲いたい記事の内容

このようになります。

これを自分なりに変更して使ってみてください。

このようにいろいろ変更可能です。

 

記事の内容

失敗したら消せば良いだけなので慣れるまで色々実際にやってみて覚えてください。

記事や枠線を<center></center>で囲うと記事が真ん中に移動したり枠線全体が真ん中に移動したり出来ますので自分なりの方法を見つけることが簡単に出来ます。

▼ border = 線の種類
▼ solid ＝ 実線
▼ dotted = 点線
▼ dashed = 粗い点線
▼ double = 二重線
▼ border-radius = 角丸の半径
▼ background-color = 背景色

私の知っているのは以上ですが、その他にも色々あると思いますし色の種類だけでも相当な数です。

私はホームページビルダーを持っているので色を見て記号に変えれますが、ない人は色を記号化してくれるサイトがあるみたいですので探してみてください。

最後に言い忘れたことがあって枠を指定する記号がありますが、それも順番があるみたいです。

線の種類→線の色→余白→枠線の記事に対する割合という具合にあるはずです。

あんまり詳しくはないのでどうかもわかりませんが

この法則で私は指定しています。

今回はwidth: 50%という所を消しています。

記事幅になっていますが私は680pxなのでその幅になっています。

今はテーマがTwenty TwelveからSimplicityに変更したので横幅が680pxに変わってます。

 

記事を枠線で囲む方法はわかったと思うのですが、枠内を塗りつぶす方法を載せました。