装飾タグの使い方
fineとgrandではオリジナルスタイルコード表に書いてある通り、アフィリエイトやサイト制作に便利な装飾タグを入れています。
んで、コードのほとんどが<span class>から始まっていますが、その後のコードを半角スペースで区切って複数書きこむと、組み合わせることができます。
賢威テンプレートを使っている人なら多分分かりますよね。
今回のSIRIUSテンプレートも同じようにタグを使えるようにしています。
文章だと分かりにくいので、もうちょっと具体的に説明しましょう。
装飾タグの組み合わせ方法
実例１
例えば赤文字にするタグは、
<span class="red"></span>
太字にするタグは、
<span class="b"></span>
フォントサイズを20pxにするタグは、
<span class="big2"></span>
この3種類のタグを同時に使う場合、以下のように３つのタグを半角で区切ります。
<span class="big2 red b">テキスト</span>
実際は以下のように表示されます。
テキスト
実例２
太字テキストリンクカラーのタグは、
<span class="textlink3b">テキストリンクタグ</span>
リンクの横の矢印を表示させるタグは、
<span class="arrow1_blue">リンクタグ</span>
この2種類を組み合わせて使う場合、以下のように２つのタグを半角で区切ります。
<span class="arrow1_blue textlink3b">リンクタグ</span>
実際は以下のように表示されます。
SIRIUSでもワードプレスでも通用する使い方だよ
このspan classの後に複数のタグを半角で区切って両方反映させる使い方は、SIRIUSでもワードプレスでも共通して使う事ができます。
覚えておくと便利です。
もしこの方法を使わなかったら、赤文字＋太字＋大文字にする時、コードが以下のようになっちゃうんですよ。
<span class="red"><span class="b"><span class="big2">テキスト</span></span></span>
これでも機能はしますが、見にくいですしHTMLソースも無駄にボリュームが大きくなってしまうので、SEO的にあまりよろしくありません。
ということで、複数のタグを併用する場合は半角で区切って使いましょう。
稀にスタイルシートのルール仕様で併用不可のものもありますが、試してみて「表示されない」ってものがあったら諦めてください。
【著者：マナ】
【運営サイト】SIRIUSアピールサイト
【twitter】 @マナ
【お問い合わせ】 フォームはこちら
※本テンプレートのカスタマイズご相談は現在ご遠慮頂いております。
※本テンプレートはプレミアム会員様向け専用でご利用頂けます。
関連ページ
- アフィリエイトリンクのクリック率を良くするには
- PC閲覧が多いなら背景は何か入れよう
- 行間・改行幅の変更方法
- PCとスマホで別々のフォントサイズを表示させる方法
- ヘッダー画像をトップページへリンクさせる方法
- H1をロゴ画像にしてヘッダーを消去する方法
- テキスト入りリボンのテキストを変更したい場合
- ヘッダー画像をテンプレートサイズに合わせる方法
- スマホ表示でサイト説明文が全て表示されない場合のカスタマイズ
- サイトタイトルをデフォルト表示にしている場合にH2タグに変える方法
- トップページだけを1カラムにする方法
- コンテンツ横幅、サイドバー幅の変更方法
- サイドメニューのカテゴリー階層をスマホで表示させる方法
