CSS 見出しhの装飾をする オリジナル作成方法の説明

CSS 見出しhの装飾をする オリジナル作成方法の説明

見出しの装飾の説明を致します。デザインのセンスも無いですがそれでも見出しの装飾を行い少しでも訪問してくれているユーザーに分かり易いページの作成を心掛けたいと思います。CSSの編集の知識は無いですがそれでもここまで出来るんだと言う事を皆さんにお見せ出来ればいいかなぁ~と思います。

 

スポンサーリンク

キャッシュ機能が有るのをお忘れなく

キャッシュ機能によりCSS変更してもブラウザでキチンと反映されない事が有りますので外部でCSSを作成して完成後サイトに反映させましょう。cache(キャッシュ)フォルダを消すと言う方法が有りますが・・・・あまりお勧めしないです。そこでキャッシュを受けない所で編集を行い確認・反映させて各ユーザーのキャッシュ有効期限が過ぎのを待つ方法をお勧めします。又各ブラウザで確認する必要が有るのでもしブラウザのダウンロードがまだの方はこちらから取得して下さい。各ブラウザでの確認するツールをお持ちの方はそちらで確認して下さい。

ウェブブラウザ人気一覧 ダウンロード方法とバージョンアップと特長

キャッシュの影響を受けない所で編集する

大袈裟な書き方をしていますが単純に自分のPC内で編集するだけです。

確認するファイルの用意

下記コードをコピーしてメモ帳に貼り付けて下さい。

<head>
//CSSスタイルシートの記載
<style type="text/css">
h1 {
color:red;
}
</style>
</head>
<body>
//CSSスタイルが反映される言葉
<h1>あいうえお</h1>
</body>

ファイル名前を付けて保存をクリックします。

 

見出しh1~h4までの装飾をしてユーザーに分かり易いページを作成 準備前

cssで見出しhの装飾をする オリジナル作成方法の説明 準備前1

 

ファイル名をtest.htmlに変更して保存をクリックします。

 

見出しh1~h4までの装飾をしてユーザーに分かり易いページを作成 前準備2

cssで見出しhの装飾をする オリジナル作成方法 前準備2

 

保存場所でtest.htmlダブルクリックで表示させて今現在使用中のブラウザにあいうえおと赤字で表示されれば成功です。※使用中のブラウザのバージョンにより上手く表示されない場合が有ります。

 

見出しh1~h4までの装飾をしてユーザーに分かり易いページを作成 前準備3

cssで見出しhの装飾をする オリジナル作成方法の説明  前準備3

 

各ブラウザで確認する

先程保存したファイルtest.htmlにカーソルを合わせて右クリックしてプロパティを選択します。

 

見出しh1~h4までの装飾する 各ブラウザへの確認1

cssで見出しhの装飾をする 各ブラウザへの確認1

 

test.tmlのプロパティ画面の変更をクリックします。

 

見出しh1~h4までの装飾する 各ブラウザへの確認2

cssで見出しhの装飾をする 各ブラウザへの確認2

 

推奨されたプログラム欄に各ブラウザが表示されます。もし対象のブラウザが無い場合は参照より対象のブラウザを探して下さい。※勿論ですがダウンロードしていない場合はプログラム一覧に表示されません。対象のブラウザを選択してOKをクリックします。

 

見出しh1~h4までの装飾する 各ブラウザへの確認3

cssで見出しhの装飾をする 各ブラウザへの確認3

 

ツールを使用される際は各ツールの取説を確認の上各ブラウザの確認をお願いします。キャッシュ機能が有るのをお忘れなくの説明を終わります。

 

見出しcolorで文字の色を変える

基本中の基本ですね。文字の色を変えるコードは以下の様になります。

<head>
//CSSスタイルシートの記載
<style type="text/css">
//↓色の指定
h1 {
color:red;
}
</style>
</head>
<body>
//↓CSSスタイルが反映される言葉
<h1>あいうえお</h1>
</body>

h1{}内にcolor:red;と記載されています。colorは色redは赤を意味しています。それを<h1>~</h1>の間の文字に反映させています。簡単ですね。しかしcolorの使い方は2つ有ります。一つは上記の様にred(赤)と指定する方法と#ff0000(赤)と指定する方法が有ります。両方とも赤色の表示なのですが後者の#ハッシュが付く方の記載方法の方がより細かい色の指定が出来ます。赤色の指定方法は下記コードになります。

//赤色指定
h1 { 
color:#ff0000; 
} 

検索にてカラーネームと掛ければ#ハッシュ付きのカラー表示されますのでお好みのカラーを選択して下さい。種類は膨大にあります。

 

見出しbackground-colorで背景色を変える

文字の背景色を変えてみます。記載コードは以下の様になります。

h1 { 
//文字の色指定 
color:#ff0000; 
//文字の背景黒色指定
background-color:#000000;
}

background-color:で背景の色を塗り潰すと言うコードになります。そこの#000000(黒色)を指定しています。勿論ですがred等のローマ字での色指定も出来ます。表示のされ方は下記様に文字は赤色・背景は黒色で表示されるh1が出来ました。CSS出力結果は以下の様になります。

 

見出しh1~h4までの装飾する 色指定

cssで見出しhの装飾をする 文字の色指定 背景の色指定

 

見出しfont-sizeで文字の大きさを変える

これも基本中の基本ですね。おさらいしておきましょうね。

h1 {
//文字の色指定
color:#ff0000;
//文字の背景黒色指定
background-color:#000000;
//文字サイズの変更
font-size: 26px;
}

もはや説明する必要も無いですが一応記載しておきます。任意の大きさを数値pxで変更して下さい。ただし10px以下は絶対に使用しないで下さい。※10pxも含みます。Google様にスパム扱いされる恐れが有ります。

 

見出しborder属性で枠を作る

文字の装飾をするのに枠が有った方がカッコイイですもんねそこで枠を作成するCSS言語のborder属性で見出しの枠を表示する方法を説明します。コード記載方法は下記の様になります。

全ての枠が同じスタイルの場合

border:線の種類_大きさ_色; で見出しの枠が表示されます。記入例を紹介します。後で詳しく説明しますがsolidは実線・3pxは線の大きさ・redは線の色をしてしています。

h1 {
//文字の色指定
color:#ff0000;
//文字の背景黒色指定
background-color:#000000;
//文字サイズの変更 
font-size: 26px; 
//枠の指定
border: solid 3px red;
}

CSS出力結果は以下の様になります。

 

見出しh1~h4までの装飾 CSS border属性の説明1

cssで見出しhの装飾をする border属性の説明1

 

上下左右別のスタイルを別々で指定する場合

右だけ線は無しで上は点線でと枠をそれぞれ違うスタイルを使用したい場合が有ると思います。その場合のborder属性のコード記載方法は以下の様になります。borderに – 横棒を追加して top 上 bottom 下 left 左 right 右を追加して線の種類・大きさ・色をしています。違いは見て頂いたら分かる様に上には赤色下は青色左は緑色右は黄色で表示する様に指定しています。

h1 {
color:red;
background-color:ffffff;
//上の線のスタイル指定
border-top: solid 3px red;
//下の線のスタイル指定
border-bottom: solid 3px blue;
//左の線のスタイル指定
border-left: solid 3px green;
//右の線のスタイル指定
border-right: solid 3px yellow;
}

CSS出力結果は以下の様になります。

 

見出しh1~h4までの装飾 CSS border属性の説明2

cssで見出しhの装飾をする border属性の説明2

 

今までの説明でもう既に結構いい見出しが作れそうですね。大きさを変えたり・下だけ表示・背景色を変更するだけでそれなりの見出しが作れそうです。しかし説明はまだ続きます。

線の種類を選ぶ

dotted 点線・dashed 破線・solid 実線・double 2重線・groove 立体凹・ridge 立体凸の種類が有ります。コードの書き方は以下の様になります。

<head>
<style type="text/css">

h1 {
border: dotted 3px red;
}
h2 {
border: dashed 3px red;
}
h3 {
border: solid 3px red;
}
h4 {
border: double 3px red;
}
h5 {
border: groove 3px red;
}
h6 {
border: ridge 3px red;
}

</style>
</head>
<body>
<h1>あいうえお</h1>
<h2>あいうえお</h2>
<h3>あいうえお</h3>
<h4>あいうえお</h4>
<h5>あいうえお</h5>
<h6>あいうえお</h6>
</body>

CSS出力結果は以下の様になります。※文字サイズを指定していないのにも関わらず、見出しのフォントサイズがh1~h6で違うのは各PC内のブラウザの設定で割り当てられているからです。後日詳しく説明します。

 

見出しh1~h4までの装飾 CSS border属性の説明3

cssで見出しhの装飾をする border属性の説明3

 

groove 立体凹・ridge 立体凸が上手い事立体に表示されないのは線の大きさを3pxで表現したからです。有る程度の大きさを与えて表現すると立体に見えます。又色のを上手い事使用する事によりより立体に見せる事も可能です。線の大きさを30pxにした場合のgroove 立体凹・ridge 立体凸の出力結果

 

見出しh1~h4までの装飾 CSS border属性の説明4

cssで見出しhの装飾をする border属性の説明4

 

見出しborder-radiusを使用して角を丸める

角を丸めてまろやかな見出しにしたいと思います。全ての角を丸める方法と部分で丸める方法を説明します。最後の8pxの数値を大きくするとより丸くなります。

h1 {
border: solid 30px red;
//角を全て丸める記述
border-radius: 8px;
}
h2 {
border: solid 30px red;
//左上の角を丸める
border-top-left-radius: 8px;
//右上の角を丸める
border-top-right-radius: 16px;
//左下の角を丸める
border-bottom-left-radius: 24px;
//右下の角を丸める
border-bottom-right-radius: 32px;
}

CSS出力結果は以下の様になります。

 

見出しh1~h4までの装飾 CSS border属性の説明5

cssで見出しhの装飾をする border-radiusを使用して角を丸める

 

以上でborder属性で枠を作るの説明を終わります。細かい設定なども他に有るのですがそれはまた後日説明します。

 

見出しpaddingを使用して文字と枠にスペースを開ける

見出しの文字との間にスペースが無くて窮屈ですよね?そんな時に使用するpaddingの設定方法を紹介します。他の記述方法も有りますが、一番簡単なpaddingの説明を致します。コードの下記方は以下の様になります。

h1 {
//paddingの設定10px
padding: 10px;
border: solid 30px red;
}
h2 {
//paddingの設定50px 
padding: 50px;
border: solid 30px red;
}

CSS出力結果は以下の様になります。

 

見出しh1~h4までの装飾 CSS padding

cssで見出しhの装飾をする paddingの説明

 

ここで注意なのですがpaddingは枠の内からの寸法になるみたいです。細かい設定をされる際は(padding+枠の大きさ)×2=実際の大きさになる事を頭に入れて下さい。

paddingで上下左右違うpxを指定する方法

paddingの下記方で上下左右違うpxを指定する事が出来ます。各それぞれのコード記載方法は以下の様になります。

//上下左右10px
padding: 10px;
//上下10px 左右20px
padding: 10px 20px;
//上10px 左右20px 下30px
padding: 10px 20px 30px;
//上10px 右20px 下30px 左40px
padding: 10px 20px 30px 40px;

 

見出しbackground-imageで画像を貼る

見出しに画像を付けて装飾します。まずは見出しに貼る画像を用意します。今回は下の画像を見出しに貼り付けたいと思います。

見出し説明画像

cssで見出しhの装飾をする 説明画像の用意

 

CSSコード記載は以下の様になります。

h1 {
padding: 50px;
border: solid 10px red;
//:url("画像の絶対パス");で表示されます。
background-image: url("見出し説明画像.jpg");
}

CSS出力結果は以下の様になります。ありゃりゃ繰り返されていますね。

 

cssで見出しhの装飾をする background-imageの使い方1

cssで見出しhの装飾をする background-imageの使い方1

 

繰り返されていると言う事で繰り返しを無くします。background-repeatを使用して繰り返しを1回だけにします。そのCSSコード記載は以下の様になります。

h1 {
padding: 50px;
border: solid 10px red;
background-image: url("見出し説明画像.jpg");
//no-repeat;一回だけ使用する。
background-repeat: no-repeat;
}

その他属性が有りますがそれは又機会があれば説明します。CSS出力結果は以下の様になります。

 

cssで見出しhの装飾をする background-imageの使い方2

cssで見出しhの装飾をする background-imageの使い方2

 

画像が使える事によりかなりの視野が広がりますね。CSSで簡単な図形等記載出来ますが高度な図形等は画像を使用した方が簡単に作成出来ます。

 

見出しtext-shadowで文字に影を付ける

文字に影を付ける事により背景と同化している色を分かり易く出来ます。又影が有る事により格好いい文字のが作成出来ると思います。使い方はtext-shadow:横方向のずらし_縦方向のずらし_ぼかし具合_色になります。PHPコード記載は以下の様になります。

h1 {
padding: 10px;
border: solid 10px red;
//右に10px 下に10px ぼかし0px 黒色指定
text-shadow: 10px 10px 0px #000000;
}

h2 {
padding: 10px;
border: solid 10px red;
//マイナスが付いている事に注目 左に10px 上に10px ぼかし5px 黒色指定
text-shadow: -10px -10px 5px #000000;
}

CSS出力結果は以下の様になります。

 

cssで見出しhの装飾をする text-shadowで文字に影を付ける

cssで見出しhの装飾をする text-shadowで文字に影を付ける

 

センスが思いっきり出ますね。私には使いこなせそうに無いかも?です。皆さんは上手に使用して格好いいボカシを作って下さい。

 

見出しbox-shadowで枠に影を付ける

文字では無く枠に影を付ける事も出来ます。使用方法はtext-shadowと同じですので省略します。名前が違うだけです。これもセンスが要りますね・・・・出力だけ表示しておきます。

 

cssで見出しhの装飾をする box-shadowで文字に影を付ける

cssで見出しhの装飾をする box-shadowで文字に影を付ける

 

見出しbeforeとafterで前後の装飾する

before(前)とafter(後ろ)を使用する事により前後にお好みの画像・言葉・図形を挿入する事が出来ます。では見てみましょうPHPコード記載方法の紹介からです。

h1 {
padding: 10px;
border: solid 10px red;
}
//前に□を追加
h1:before{
content: "□";
}
//後に三角を追加
h1:after{
content: "三角";
}

content:””;はお決まりになります。使用しない場合でも記述する必要が有るみたいです。出力結果は以下の様になります。

 

cssで見出しhの装飾をする beforeとafterで前後の装飾する

cssで見出しhの装飾をする beforeとafterで前後の装飾する

 

before(前)で□を指定してafterで三角を指定しています。出力値もそのまま表示されていますね。

 

CSSで簡単な図形を作成する

図形を使用して表示したい場合等有ると思います。一例ですが作成方法を説明しておきます。今回は4角形・3角形をCSSのborderを使用して作成したいと思います。CSSコード記載方法は以下の様になります。

//四角形
h1 {
//wight:0;で自動で伸びる横幅の制限をしています。
width:0;
border-top:50px solid blue;
border-right:50px solid black;
border-bottom:50px solid red;
border-left:50px solid yellow;
}
//三角形
h2 {
width:0;
//borderの色指定をtransparent(表示しない)にします。
border-top:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid red;
border-left:50px solid transparent;
}

出力結果は以下の様になります。四角形・三角形を疑似的に作成しています。分かり易い様に色分けしています。

 

cssで見出しhの装飾をする CSSで簡単な図形を作成する

cssで見出しhの装飾をする CSSで簡単な図形を作成する

 

WordPressに移植する

ここまで記載してきた見出しの装飾を利用して作成したCSSをWordPressstyle.cssに移植したいと思います。勿論ですが移植する前に各ブラウザでの表示が正しくなされているか?確認して下さい。今回の説明ではその対処方法の記載はしていませんので、後日機会が有れば説明致します。又必ずバックアップを取って下さいね。

Worpressの使用しているテーマにより記述名が異なる事を注意してstyle.cssのh1を変更致します。場所はwp-content/themes/現在使用中のテーマ名/style.cssです。私の場合はentry-content h1の場所になります。

 

まとめ

如何だったでしょうか?その他装飾方法は一杯有りますが、上記記載内容だけでもかなりいい見出しが作成出来ると思います。しかしこれだけは覚えておいて下さい。加工すればする程表示速度が低下する事を!!SEOとユーザーの利便性を天秤に掛けてあなた自身が納得する見出しを作成すればいいですよ。見出しの装飾や記事の装飾でユーザーの閲覧時間が延びたと言う事例も数ほど有りますので!!カッコイイ見出しを作成して下さい。

 

ここまで読んで頂いてありがとうございます。これからも分かり易いCSSの説明をしていきますので、どうぞこれからも宜しくお願いします。

 

Posted in CSS
スポンサーリンク

コメントを残す

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