ショップハンター

2015.01.09

[やってみよう] css でつくる h タグの幅をカスタマイズしてみよう

テーマ：楽天ブログの活用法(10)

カテゴリ：楽天ブログ・アフィリエイト関連

　不定期でお送りする「css でつくる h タグ」のカスタマイズシリーズですが、今回は、公開済みの h タグの幅の変更方法をご紹介します。

幅を変更するには width: をつかう

　まずはフラットタイプからやってみましょう。
　以下のページをご覧ください（クリックで別タブで開きます）

ブログ用見出しテンプレート[フラット系]

　実線タイプ、一番上の「のしめはないろ」の幅を変えてみましょう。
　コピー＆ペースト用コードの最後の部分に、赤色で示したようなコードを追加すると見出しの幅を変えられます。

のしめはないろ

<h3 style="border-bottom:1px solid #426579;border-left:10px solid #426579;padding:7px; width: 80%; ">ここにテキストを入力します</h3>

　これだけです。今までの流れに比べると圧倒的に簡単ですね^^。
width: 80%; を追加することによって、 Web ブラウザで閲覧したときに元の表示幅（デフォルトが 100%）の 80% の幅で見出しが表示されます。

ここにテキストを入力します

　元の幅の 80% の幅で表示されていますね。
　これは相対的な指定方法ですので、ウィンドウの見出し表示幅が 1000 ピクセルだった場合、800 ピクセルの幅に換算されて表示されるということになります。

　このとき、相対幅を 50% 以下にするなど、あまり数値を小さくしてしまうと、小さな（画面解像度の低い）ディスプレイを使っている訪問者が閲覧した場合に、表示幅が狭くなりすぎてかえって不格好に見えることもありますから、必要に応じて固定幅も検討してみてください。

　固定幅の指定のしかたは次のとおりです。
　以下に 3 種類の方法を示しますが、Web で最もよく使われる単位は px ですね。

width: 500px; ― 幅を 50 ピクセルにする
width: 20em; ― 幅を 20 文字分にする
width: 30pc; ―幅を 30パイカにする

　こちらが width: 20em; でカスタマイズしたの表示効果になります。

ここにテキストを入力します

　つぎは立体系でやってみましょう。

　以下のページをご覧ください（クリックで別タブで開きます）

ブログ用見出しテンプレート[立体系]

　例として、この中から「文字エフェクト＆ラウンドボックスタイプ」を使います。

width: 550px; ですね。最後のセミコロン(;)も忘れないようにしましょう。

ここにテキストを入力します

<h3 style="text-shadow:1px 1px 3px #000;border-left:25px solid #8491c3;padding:7px;background:#ccd6ff;-webkit-border-radius:20px;border-radius:20px;-webkit-box-shadow: 3px 3px 3px;-moz-box-shadow: 3px 3px 3px;box-shadow: 3px 3px 3px;font-size:18pt;color:#8491c3; width: 550px; ">ここにテキストを入力します</h3>

　こちらがカスタマイズ後の表示効果になります。

ここにテキストを入力します

　こんどはインパクト系の「ネイルファイル形」でやってみます。

　以下のページをご覧ください（クリックで別タブで開きます）

ブログ用見出しテンプレート[インパクト系]

width: 30pc; ）にしてみます。

ここにテキストを入力します

<h3 style="background:#c7dc68;color:#69821b;font-size:18pt;width:80%;border-radius:30px;border-radius: 0 30px 30px 0 / 0 30px 30px 0;box-shadow: 0 1px 10px 0 #69821b;text-shadow: 0 0 5px;padding:10px;margin-left:20px; width: 30pc; ">ここにテキストを入力します</h3>

　こちらがカスタマイズ後の表示効果になります。

ここにテキストを入力します

　最後にフィルム系の「ノーマル」でやってみます。

　以下のページをご覧ください（クリックで別タブで開きます）

ブログ用見出しテンプレート[フィルム系]

　黒いフィルムを 20文字分の幅（ width: 20em; ）にしてみます。

ここにテキストを入力します

<h3 style="background:#000;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #000;text-shadow: 0 0 5px;padding:20px;margin-left:10px; width: 20em; ">ここにテキストを入力します</h3>

　こちらがカスタマイズ後の表示効果になります。

ここにテキストを入力します

　必要に応じてお試しいただければ幸いです。
　その他、コードが複雑なものに関しては、また改めてカスタマイズ方法をご紹介したいと思います。

おまけ：カスタマイズ時のセミコロン(;)について

　これまで、css のカスタマイズ時には、最後にセミコロンをつけ忘れないようにと説明してきましたが、列記されたコードの最終のセミコロンは省略してもかまいません。

　たとえば、このようになります。

　<h3 style="border-bottom:1px solid #426579;border-left:10px solid #426579;padding:7px; width: 700px ">ここにテキストを入力します</h3>

　しかし、いったんはスタイルコードを書き終わっても、後でコード修正が必要になることもありますので、普段からセミコロンを打つクセをつけておくと記述ミスが少なくなるでしょう。