更新日2019/12/13読者に読んでもらうアフィリエイト記事を作成するためには記事の内容も重要ですが文章の装飾も重要です。何も装飾されていない文章と重要な所にマーカーが引いてある文章ではその見栄えは全然変わってきます。文章を装飾するにはCSSというスタイルシート言語を使う必要があります。CSSでは色をカラーコードで指定します。箇条書き(数字ver)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」となります。このカラーコードを覚えるのはとても大変ですよね。実際、プロの制作者の人でも覚えている人はほとんどいません。このページでは基本的なカラーコードを載せておきますが以下のようなサイトを使えばこのカラーコードを教えてくれますので是非使ってみてくださいね。※CSSは環境によって正しく動作しない場合もあります。以下で紹介しているCSSコードは動作を保証するものではありませんので予めご了承ください。style="font-size:20px;">ここの大きさを変更</span></p>※数字の所を変えれば大きくしたり小さくしたりすることができます。noreferrer">サンプルテキスト</a></p>※「#fe9ba0」の所を好きなカラーコードに変更すれば色を変更できます。target=”_blank”>内の#のところにリンク先のURLを入れることができます。0%);">ここにマーカー</span></p>※「#f6e67c」の所を好きなカラーコードに変更すれば色を変更できます。※<span>で括られたところにマーカーが引かれます。※ブラウザによって表示が異なる場合があります。padding-bottom:5px;">サンプルテキスト</p>※「#fe9ba0」の所を好きなカラーコードに変更すれば色を変更できます。※「3px」の数字を変更すると下線の太さが変わります。padding-bottom:5px;">サンプルテキスト</p>※「#fe9ba0」の所を好きなカラーコードに変更すれば色を変更できます。※「3px」の数字を変更すると下線の太さが変わります。padding:10px;">サンプルテキスト</p>※「#fe9ba0」の所を好きなカラーコードに変更すれば色を変更できます。padding:10px;">サンプルテキスト</p>※「#fe9ba0」の所を好きなカラーコードに変更すれば枠線の色を変更できます。※「3px」の数字を変更すると枠線の太さが変わります。※「8px」の数字を変更すると角丸の強さを変更することができます。padding:10px;">サンプルテキスト</p>※「#efefef」を変えれば背景色が変わり、「#fe9ba0」を変えれば左の実線の色が変わります。style="color:#000000;">サンプルテキスト</span></li></ul>※「#fe9ba0」のカラーコードを変更すればまるポチの色を変えることができます。