SIRIUSシリウスの見出しフォントに影をつける方法

トップページ＞ SIRIUSのカスタマイズ＞ SIRIUSシリウスカスタマイズや小技＞ SIRIUSシリウスの見出しフォントに影をつける方法

SIRIUSシリウスの見出しフォントに影をつける方法

今回は上図のようにSIRIUSシリウスの見出しフォントに影をつける方法をご紹介したいと思います。

見出しフォントに影をつける方法

フォントに影を付けるCSSのタグ

影を付けるタグは　『text-shadow: 2px 2px 2px #000000;』です。

1つ目のpxは横の影の位置を指定する
2つ目のpxは縦の影の位置を指定する
3つ目のpxは影のぼかす範囲を指定する
#000000は黒の影を指定する

『#』から始まるモノは色を指定するコマンドです。

例えば#000000は黒の影を指定し、#ffffffは白の影を指定します。

スタイルシート（CSS)に書き込む

作業は回復ができるように、必ずテンプレートのバックアップを取ってから行ってくださいね。

h2見出しとh3見出しの場合：

編集　⇒　スタイルシート（CSS)　を開いて、『#main h2,#main h3,』を検索して『text-shadow』の部分をタグの一番後ろに入れてください。

#main h2,#main h3,.blog .title {
font-size: 18px;
line-height: 20px;
background-repeat: no-repeat;
background-position: left top;
margin-bottom: 5px;
margin-top: 5px;
color: #FFF;
padding-left: 35px;
overflow: hidden;
padding-top: 7px;
padding-bottom: 7px;
background-color: #333;
background-image: url(./img/h3.jpg);
text-shadow: 2px 2px 2px #000000;
}

h4見出しの場合：

#main h4 {
font-size: 16px;
line-height: 34px;
background-image: url(img/h4.jpg);
background-repeat: no-repeat;
margin-top: 15px;
margin-bottom: 10px;
background-position: left bottom;
padding-right: 8px;
padding-left: 30px;
padding-top: 0px;
padding-bottom: 0px;
color: #E27905;
text-shadow: 2px 2px 2px #000000;
}

h5見出しの場合

#main h5{
background-image: url(img/h5.jpg);
background-position: left 2px;
background-repeat: no-repeat;
font-size: 15px;
line-height:26px;
text-indent: 25px;
margin-top: 10px;
margin-bottom: 3px;
text-shadow: 2px 2px 2px #000000;
}

h6見出しの場合

#main h6{
background-image: url(img/h6.jpg);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
font-size: 15px;
line-height: 20px;
margin-top: 6px;
margin-bottom: 6px;
text-shadow: 2px 2px 2px #000000;
}

関連ページ

シリウス（SIRIUS）で2カラムサイドメニュー幅変更方法: デフォルトテンプレートの2カラムサイドメニュー幅変更方法について説明します。
シリウスでサイドメニューのフリースペースを増やす方法: シリウスでサイドメニューのフリースペースを増やす方法について説明します。
SIRIUSシリウスで更新履歴の位置を変更する方法: SIRIUSシリウスで更新履歴の位置を変更する方法について解説していきます。
SIRIUSシリウスで更新履歴の背景画像を変更方法: SIRIUSシリウスで更新履歴の背景画像を変更方法について、解説していきます。
SIRIUSシリウスの更新履歴枠の角を丸くする&影をつける方法: SIRIUSシリウスの更新履歴枠の角を丸くすると影をつける方法について解説していきます。
SIRIUSでカーソルを置くとリンク画像を動かす設定方法: SIRIUSでカーソルを置くとリンク画像を動かす設定方法について、詳しく解説していきます。
SIRIUS サイドバーに画像付きのプロフィールを設置方法: SIRIUS サイドバーに画像付きのプロフィールを設置方法について、詳しく解説していきます。
SIRIUS　クラスの設定機能で蛍光ペンを設定方法: SIRIUS　クラスの設定機能で蛍光ペンを設定方法について、詳しく解説していきます。
SIRIUSに無料でメールフォームを設置する方法: SIRIUS（シリウス）に無料でメールフォームを設置する方法について、詳しく解説していきます。
SIRIUSで記事途中に飾り枠を挿入する方法: SIRIUS（シリウス）で記事途中に飾り枠を入れる方法について、詳しく解説していきます。
SIRIUS　同じページ内で指定の場所にリンクする方法: SIRIUS　同じページ内で指定の場所にリンクする方法について、詳しく解説していきます。
SIRIUSで動くボタンを作成方法: SIRIUSで動くボタンを作成方法について、詳しく解説していきます。
SIRIUSでスクロールの途中でサイドバーが消えないよう固定する方法: SIRIUSでスクロールの途中でサイドバーが消えないよう固定する方法について解明します。
SIRIUSで1つの記事を複数のカテゴリに登録する方法: SIRIUSで1つの記事を複数のカテゴリに登録する方法について説明します。
SIRIUSで蛍光ペンをカスタマイズする: SIRIUSで蛍光ペンをカスタマイズする方法
SIRIUSでトップへ戻るボタンを実装する方法: SIRIUSでトップへ戻るボタンを実装する方法について紹介します。
SIRIUSのサイトにYouTube動画を『埋め込み』方法: SIRIUSのサイトにYouTube動画を『埋め込み』方法について紹介していきます。
SIRIUSでGoogleマップをサイトに埋め込む方法: SIRIUSでGoogleマップをサイトに埋め込む方法についてご紹介していきます。
SIRIUSでトップへ戻るボタンに画像を使用する方法: SIRIUSでトップへ戻るボタンに画像を使用する方法について紹介していきます。
SIRIUSで画像を横に自動スライドさせて動かす方法: SIRIUSで画像を横に自動スライドさせて動かす方法を紹介していきます。
SIRIUS(シリウス）で画像を振り子のように左右に揺らす実装方法: SIRIUS(シリウス）で画像を振り子のように左右に揺らす実装方法を紹介します。
SIRIUS(シリウス）で<MAQUEE>タグを使って簡単に画像を動かす: SIRIUS(シリウス）でタグを使って簡単に画像を動かす方法をご紹介します。