コピペで使えるCSS紹介

読者に読んでもらうアフィリエイト記事を作成するためには記事の内容も重要ですが文章の装飾も重要です。
例えば、何も装飾されていない文章と重要な所にマーカーが引いてある文章ではその見栄えは全然変わってきます。
しかし、文章を装飾するにはCSSというスタイルシート言語を使う必要があります。
このページでは誰でも簡単にコピペで装飾を実現できるCSSを公開しますので是非、使ってみてくださいね!

CSSとは?

CSSとはカスケーディングスタイルシートというものでホームページの装飾を司るスタイルシート言語です。一般的にホームページを制作する時にはHTMLという言語で「ここはヘッダーですよ」とか「ここがメインコンテンツですよ」など大まかな構造をつくります。
この時点ではレイアウトを行っていないので下記、左図のような形になっています。
これでは見栄えが悪く文字も読みにくい状態ですよね。

なんとかしてメインコンテンツとサイドエリアを横並びにしたり背景色を変えたりとレイアウトと装飾を綺麗にしたいところです。そこでCSSの出番です!CSSを使って見栄えを整えていくのです。
CSSを使えばレイアウトを調整したり、余白を開けたり、文字の色を変えたり、背景色を好きな色に変えたりと色々な装飾をすることができます。

CSSはどこに入力すれば使えるの?

CSSを反映させるためには大きく分けて2つの方法があります。1つはCSS専用のファイルを作ってHTML側で読み込む方式です。

もう1つはHTMLタグに直接CSSを書き込む方式です。
ここで新しい言葉HTMLタグという言葉がでてきましたがHTMLタグとはHTMLファイルを構成しているコードのことです。HTMLファイルを開くとHTMLタグがびっしりと書かれています。決まったルールに従えばHTMLタグに直接CSSを書き込むことができます。
今回ご紹介するCSSとはHTMLタグに直接書き込むタイプのCSSです。

無料ブログサービスの記事投稿エディタに入力したのにCSSが反映されない時もある?

無料ブログサービスでは今回ご紹介するコードをそのまま記事投稿エディタに入力してもうまく反映されないことがあります。
その理由として考えられるのは記事投稿エディタがHTMLタグに対応していないことが考えられます。
普通の人はHTMLタグを使わなくても日記を書くのには十分なためそもそもHTMLタグを書けない仕様になっている場合があります。

しかし、多くのブログサービスではHTMLタグが入力できるモードに切り替えるボタンがついています。これでHTMLモードに切り替えてから今回ご紹介するコードを貼り付けるとCSSがうまく反映されます。

ファンブログをご利用の方はこのモード変更なしでそのまま貼り付けるだけで反映がされるので簡単です。

また、CSSやサイト作成に必要なテクニックをもっと詳しく知りたい方はこちらを参考にしてみてください。

CSSでは色をカラーコードで指定します

CSSでは様々な装飾ができますが、色を指定する時にはカラーコードで指定する必要があります。
カラーコードというのは#と6つの英字や数字で表されるものでコンピューターが理解しやすいルールでできています。例えば「赤」をカラーコードに変換すると「#ff0000」となります。
しかし、このカラーコードを覚えるのはとても大変ですよね。実際、プロの制作者の人でも覚えている人はほとんどいません。
このページでは基本的なカラーコードを載せておきますが以下のようなサイトを使えばこのカラーコードを教えてくれますので是非使ってみてくださいね。

HTMLカラーコード

原色大辞典

代表的なカラーコード

黒色 #000000 緑色 #008000
白色 #ffffff 黄色 #ffff00
灰色 #808080 青色 #0000ff
赤色 #ff0000 橙色 #ff8c00

注意事項

※CSSは環境によって正しく動作しない場合もあります。
以下で紹介しているCSSコードは動作を保証するものではありませんので予めご了承ください。

CSS装飾【文字編】

文字の色を変更する

サンプルテキストここの文字を赤色に

文字を太字にする

サンプルテキストここの文字を太字に

文字の大きさを変える

サンプルテキストここの大きさを変更

※数字の所を変えれば大きくしたり小さくしたりすることができます。

文字を中央揃えにする

サンプルテキスト

※「center」となっている所を「left」にすれば左揃え「right」にすれば右揃えになります。

文字に打ち消し線を入れる

サンプルテキストここを打ち消し

文字に下線を引く

サンプルテキストここに下線

参考URLなどを記載するときに使える

※「#fe9ba0」の所を好きなカラーコードに変更すれば色を変更できます。

※<a href=”#” target=”_blank”>内の#のところにリンク先のURLを入れることができます。

文字にマーカーを引く

サンプルテキストここにマーカー

※「#f6e67c」の所を好きなカラーコードに変更すれば色を変更できます。

※<span>で括られたところにマーカーが引かれます。

※ブラウザによって表示が異なる場合があります。

CSS装飾【見出し編】

下線つき見出し(実線)

サンプルテキスト

※「#fe9ba0」の所を好きなカラーコードに変更すれば色を変更できます。

※「3px」の数字を変更すると下線の太さが変わります。

下線つき見出し(破線)

サンプルテキスト

※「#fe9ba0」の所を好きなカラーコードに変更すれば色を変更できます。

※「3px」の数字を変更すると下線の太さが変わります。

背景色つき見出し

サンプルテキスト

※「#fe9ba0」の所を好きなカラーコードに変更すれば色を変更できます。

枠線を角丸の線で囲む見出し

サンプルテキスト

※「#fe9ba0」の所を好きなカラーコードに変更すれば枠線の色を変更できます。

※「3px」の数字を変更すると枠線の太さが変わります。

※「8px」の数字を変更すると角丸の強さを変更することができます。

左に実線+背景色つき見出し

サンプルテキスト

※「#efefef」を変えれば背景色が変わり、「#fe9ba0」を変えれば左の実線の色が変わります。

CSS装飾【箇条書き編】

箇条書き(まるポチver)
  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト

※「#fe9ba0」のカラーコードを変更すればまるポチの色を変えることができます。

箇条書き(数字ver)
  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト