サイトミニカスタマイズで差別化戦略 見出し編

差別化戦略

たくさんの人に集まってもらうために、サイト（ブログ）によって様々な工夫がなされていますね。
細かな装飾を施すことで、サイトの見栄えをよくしてみます。

手早くサイトやブログを構築するためにあまり手間をかけずにできるので、お薦めです。


簡単に言えば、

本物のサイトっぽく少しは綺麗に着飾ってみましょう！

のコーナーです（大袈裟ですかね＾＾；

特徴

お気づきだと思いますが、この記事の見出しの部分を見てください。

ブルーのバーに文字が中に格納されて、左の部分と下の部分にラインが引かれています。
また、左と下のラインの太さも違うのが特徴です。

画像を使ってサイトの見栄えをよくするためには、時間がかかり、この方法では、ＨＴＭＬの記述だけでこうした装飾が施せるので、場合に応じて利用のしがいがあると思います。

ＨＴＭＬの記述

<table cellpadding="0" cellspacing="0" bgcolor="#D5DFFF" width="425" height="23">
<tr>
<td style="border-left:#0040FF 3px solid; border-bottom:#0040FF  1px solid;" width="10">
&nbsp;
</td>
<td style="border-bottom:#0040FF  1px solid;">
<strong><font color="#000000">説明</font></strong>
</td>
</tr>
</table>


縮小版（コピペして使用してください）

<table cellpadding="0" cellspacing="0" bgcolor="#D5DFFF" width="425" height="23">
<tr><td style="border-left:#0040FF 3px solid; border-bottom:#0040FF  1px solid;" width="10">&nbsp;</td><td style="border-bottom:#0040FF  1px solid;"><strong><font color="#000000">ここに文字を入れる</font></strong></td></tr></table>


このまま利用してくださって構いませんが、下記で応用的利用法も説明しているので、しばしお付き合いください。

<table height="23" cellspacing="0" cellpadding="0" width="425" bgcolor="#d5dfff">
    <tbody>
        <tr>
            <td style="BORDER-LEFT: #0040ff 3px solid; BORDER-BOTTOM: #0040ff 1px solid" width="10">&nbsp;</td>
            <td style="BORDER-BOTTOM: #0040ff 1px solid"><strong><font color="#000000">説明</font></strong></td>
        </tr>
    </tbody>
</table>
<br />
まず、一行目の&lt;table&gt;内のbgcolorで背景の色を入れます。（現在：薄い青色）<br />
そして、この装飾の大きさは、1行目のwidth（幅）とheight（高さ）で調節できます。<br />
少し小さくしたい場合は、width=&quot;425&quot;の中の数値を小さくしてください。高さも同じようにして調節できます。<br />
<br />
<br />
次に3行目の&lt;td&gt;内はborder-leftとborder-bottomの二つに分かれていますが、ここで3つのパラメーターを調節します。<br />
<br />
左から色（ #0040ff )、線の太さ( 3px )、線の形( solid )となっています。<br />
border-leftの太さが3pxとなっているので、下のラインよりも太く見えるという仕組みです。<br />
線の形については、ＨＴＭＬのサイトがあるので、詳しいことは検索して調べてみてください。<br />
<br />
参考ＵＲＬ　<a target="_blank" href="http://www.htmq.com/style/border-style.shtml">ボーダーのスタイルを指定する</a>（クイックリファレンス）<br />
<br />
doubleで二重線、ridgeで窪んだ形などいろいろできますが、あまり懲りすぎないようにシンプルに描くほうが訪問者にとっても親切だと思います。<br />
<br />
<br />
同じく3行目の末尾にwidth=&quot;10&quot;とありますが、これは、文字部分との感覚を開けるために記述しています。<br />
&amp;nbsp;&lt;/td&gt;までが間隔を開けるために必要なタグとなっています（別の記述方法でもできますが、ここでは割愛します）。<br />
<br />
<br />
6行目に再びborder-bottomと出てきていますが、今度はborder-leftはありません。<br />
これは、&lt;td&gt;が移行しているために、必要な記述です。<br />
ここで、border-bottomを入れないと、下線部がきちんと表示されません。<br />
<br />
<br />
7行目には文字を挿入します。強調タグ&lt;strong&gt;は必要に応じて設定してください。<br />
フォントタグ&lt;font&gt;も色を設定でき、文字の大きさを変更したい場合は、&lt;font color=&quot;xxxxxx&quot; size=&quot;3&quot;&gt;のようにフォントサイズを変更することができます。<br />
<br />
<br />
<br />
<table height="23" cellspacing="0" cellpadding="0" width="425" bgcolor="#d5dfff">
    <tbody>
        <tr>
            <td style="BORDER-LEFT: #0040ff 3px solid; BORDER-BOTTOM: #0040ff 1px solid" width="10">&nbsp;</td>
            <td style="BORDER-BOTTOM: #0040ff 1px solid"><strong><font color="#000000">効率的な使用法</font></strong></td>
        </tr>
    </tbody>
</table>
<br />
手間はそれほどかかりませんが、いちいちタグを書くのが面倒だという人は当然いると思うので、ここで効率的に利用できる方法を少し説明します。<br />
<br />
辞書ツールでは1度に登録できる文字数に限りがあるため、辞書ツールは使えません。<br />
バラバラにして登録するものいいと思いますが、それ以外の方法を示しておきます。<br />
<br />
<br />
▼<strong>保存用フォルダを作る<br />
</strong><br />
作業効率させる目的で、先に保存する前に保存用フォルダを作ります。（理由はあとでわかります）<br />
他にも応用的に利用できるので、このやり方は覚えていても損ではないと思います。<br />
<br />
フォルダ名、例えば、「便利タグ」という名前のフォルダをわかりやすいところに作ります。<br />
<br />
<br />
▼<strong>メモ帳に記録する</strong><br />
<br />
上記のタグをコピペして、メモ帳に貼り付けます。<br />
そして、さっき作ったフォルダ内に保存します。<br />
<br />
縮小版<br />
<br />
&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bgcolor=&quot;#D5DFFF&quot; width=&quot;425&quot; height=&quot;23&quot;&gt;<br />
&lt;tr&gt;&lt;td style=&quot;border-left:#0040FF 3px solid; border-bottom:#0040FF&nbsp; 1px solid;&quot; width=&quot;10&quot;&gt;&amp;nbsp;&lt;/td&gt;&lt;td style=&quot;border-bottom:#0040FF&nbsp; 1px solid;&quot;&gt;&lt;strong&gt;&lt;font color=&quot;#000000&quot;&gt;ここに文字を入れる&lt;/font&gt;&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
<br />
<br />
▼<strong>保存フォルダを移動させる</strong><br />
<br />
保存フォルダを選択し、ドラッグ＆ドロップで、スタートメニューに放り込みます。<br />
<br />
<br />
▼<strong>完成</strong><br />
<br />
そうすれば、スタートメニューでいつでも「便利タグ」フォルダを開いて、タグを使用できるようになります。<br />
<br />
辞書ツールのようには便利とはいきませんが、いちいちドキュメントフォルダを使って・・・のようなやり方ではないので、効率的に作業をする上ではこういった方法は便利だと思います。<br />
<br />
<br />
▼<strong>応用<br />
</strong><br />
最後におまけとして応用的な使用法について説明しておきます。<br />
<br />
<br />
&rArr;<strong>フォルダに保存するものはいろいろ</strong><br />
<br />
フォルダを作るときに、ここでは「便利タグ」という名前をつけましたが、それは、他にもこうした利用価値のあるタグをメモ帳に書き残しておくためにこのフォルダを使いました。<br />
<br />
例えば、ＨＴＭＬを記述する際には、&lt;html&gt;&lt;head&gt;&lt;title&gt;～～&lt;/body&gt;&lt;/html&gt;といろいろ必要に応じて記述する必要がありますが、これも便利タグ帳に保存しておけば、いつでもHTMLを書くことができるようになります。<br />
<br />
<br />
&rArr;<strong>ショートカットの利用</strong><br />
<br />
また、この「便利タグ」フォルダに関わらず、他にも頻繁に使用するファイルがあれば、この方法でスタートアップメニューに予め入れておくことで、作業が効率化されます。<br />
<br />
<br />
▼補足：<br />
<br />
私のＯＳは現在ＶＩＳＴＡなので、ＸＰの場合はわかりません。<br />
スタートアップに登録する方法で可能なので、試してみてください。<br />
<br />
ちなみに、角を落としたり、丸くするためには画像を作る必要があります。<br />
<br />
<br />
さらに工夫した利用法もありますが、これはまたの機会のお楽しみに！！<br />
<br />
<br />
▼サポート<br />
<br />
もし、上記の説明でわからないことがあれば、コメント欄かメールで尋ねてください！<br />
<br />
メールフォームは現在ありませんけど！（笑）<br />