[`yahoo` not found]
Pocket

bandicam 2016-08-29 12-57-39-142

ワードプレスで仕切り線、記事を囲う枠を入れる方法を解説します。 指定されたタグを挿入することにより、様々な仕切り線を入れることが出来ます。 記事の節目などに仕切り線を入れることによって、サイトの画面の見栄えが良くなります。

普通の仕切り線の入れ方

普通の仕切り線を入れるタグです。

<div style=”border-bottom: #c0c0c0 1px solid; margin: 1.62em auto 3.25em; width: 80%; color: #fff;”>.</div>

&nbsp;

 

普通の仕切り線(中央寄せ)です。

.

<hr></hr>または<hr/>で線を書いてみます。

下記のようなややくぼみが入った仕切り線が出来ました。



仕切り線を短くするタグです。

<hr style="background-color: #dddddd; width: 80%; margin: 30px auto;clear: both;" />

 

下記のように仕切り線が短くなりました。



もっと短くするタグです。

<hr style="width: 200px; margin: 0 auto;clear: both;" />

 

下記のようにもっと短く出来ました。



点線状の仕切り線の入れ方

<p style="text-align: center; margin: 1.62em auto 3.25em;">- – - – - – - – - – - – - – - – - – - – - – - – - – - – -</p>

下記のように点線(中央寄せ)が入りました。

– – – – – – – – – – – – – – – – – – – – – – – – – – – – –

仕切り線を2本にするタグです。

下記のようになります。

.

  点線仕切り線タグ

このようになります。

.

 点線の仕切り線

下記のようになります。

.

ビジュアルエディターで簡単仕切り線を入れる方法

記事投稿画面をビジュアルエディターに切り替えると、 下記のような仕切り線がタグ入力無しで挿入できます。

**************************************************************
 
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
★★★
 
------ ◇ ------ ◇ ------ ◇ ------ ◇ ------ ◇ ------ ◇ ------ ◇ ------
タグを入れる場合は、以下ようになります。
 
<p style="text-align: center; margin: 1.62em auto 3.25em;">*****************************************</p>
 
<p style="text-align: center; margin: 1.62em auto 3.25em;">★★★★★★★★★★★★★★★★★★★★★★★★★</p>
 
<p style="text-align: center; margin: 1.62em auto 3.25em;">—— ◇ —— ◇ —— ◇ —— ◇ —— ◇ —— ◇ ——</p>
 
 ****や★★★、また◇ —— ◇ —— ◇の数を変えることにより、
仕切り線の長さを任意の物に変えられます。
 このように簡単ですので、ぜひ、使ってサイトの見栄えを良くしていって下さい。
 

文字を枠で囲む方法

今度は、打ち込んだ文字を枠で囲む方法を説明します。 重要な部分などの文字、文章、見出しなどを枠で囲むことによって、 より強調する効果があります。

下記のタグを入れると、

<fieldset>ここに文章を記入する</fieldset>

下記のように文章を枠で囲むことが出来ます。

ここに文章を記入する

枠に「注記」などを入れたい場合

<fieldset><legend>「注記」</legend>ここに文章を記入する</fieldset>

「注記」ここに文章を記入する

これがあるだけでも大分サイトの見た目が変わってきます。

[`yahoo` not found]
Pocket