無料会員制サイト

WordPressカスタムCSSで簡単ボックスデザイン

カスタムCSS

カスタムCSSって何?

ちょっとデザインを変えたい時に、テーマファイルをを直接編集するのは非常に危険です。

そんな時に便利なのがカスタムCSS。

なぜ、今回カスタムCSSの記事を書こうと思ったのか、それには理由があります。

実は、お叱りのお問い合せがありました。
TSさんありがとうございます。

以前に書いた記事

この記事を読まれた方から、どこにどうやってコードを貼り付けたらいいのか?

たしかに、記事を読んでいるとカスタムCSSには全く触れていません。

あまりにも不親切な記事だと反省しています。

今回は改めてカスタムCSSの使い方を詳しく解説していきます。

そして、アフィリエイト記事を書く時に役立ちそうなボックスデザイについても紹介していきたいと思います。

カスタムCSS
カスタムCSSについてもう少し詳しく説明します
カスタムCSSの機能
  • 直接テーマファイルを編集する必要がない
  • ちょっとしたデザインの変更が簡単にできる
  • カスタムCSSは導入が簡単
カスタムCSSのデメリット
  • 多くのCSSを記述し過ぎると表示が遅くなる
  • 元のCSSと干渉しあって上手く表示されないことがある
  • 全てのコードを正確に記述しないと表示が崩れる
カスタムCSSはHTMLファイルの<head>~</head>の中に記述されることになります。

カスタムCSSでテーマのレイアウトを変えたりする事はは、あまりオススメできません。

あくまでも、記事を見やすくするための小規模のカスタマイズなどに使用するようにしましょう。

どうしてもテーマのレイアウトなどをカスタマイズをしたい時は、子テーマを作成してカスタマイズするようにしましょう。

今回は子テーマの紹介ではないので、後日改めて紹介したいと思います。

それでは次からはカスタムCSSの導入の方法について説明していきます。

意外に簡単にできるカスタムCSSの導入方法

現在のWordpressのテーマには、ほとんどカスタムCSSの機能が組み込まれています。

まずはテーマにカスタムCSSの機能が組み込まれている前提で話を進めていきます。

ダッシュボードにログイン

ログイン
ダッシュボードにログインしてください。
左メニュー「外観」⇒「カスタマイズ」をクリック。

カスタマイズページ

カスタマイズページ
カスタマイズのページが開きます。

左側にカスタマイズできる項目が並んでいます。
テーマによって表示される項目は変わってくるので注意してください。

私の使用しているテーマでは一番下に「追加CSS」と表示されています。

追加CSSが表示

追加CSS
画像のように追加CSSの説明とCSSを記入するボックすが表示されます。

表示されたボックスの中にCSSを貼り付けて「公開済み」をクリック。

これでカスタムCSSの設定は終わりになります。

カスタムCSSをプラグインで導入する場合

現在使用しているWordpressのテーマに、カスタムCSSの機能がない場合はプラグインを使用することになります。

一番有名なカスタムCSSのプラグイン「Simple Custom CSS」の導入方法を説明していきます。

プラグインの導入

プラグイン検索
ダッシュボード左メニュー「プラグイン」⇒「新規追加」をクリック。

検索窓に「Simple Custom CSS」と入力して「今すぐインストール」⇒「有効化」の順番にクリック。

Simple Custom CSS

カスタムCSS画面
再びダッシュボード左メニューの「外観」⇒「カスタムCSS」の順番にクリック。

Simple Custom CSSの画面が開きます。
名前の通り非常にシンプルです。

実際にボックスの中にCSSを貼り付けてみましょう。

CSSを貼り付けたら最後に「カスタムCSSの更新」をクリックしてください。

以上でプラグインの導入は終了しました。

WordPressのテーマは頻繁に更新される事が多いですが、プラグインに記入したCSSはテーマが更新されても上書きされることはありません。

テーマにカスタムCSS機能があっても、「Simple Custom CSS」の方が見やすかったりするので導入してみてはどうでしょうか。

ただし、プラグインの数は増やしすぎないようにしましょう。

「FlexboxとFloat」ボックスデザインはどっち?

Flexbox
ボックスを横に並べたりする時に使用するのがFlexboxとFloat。

CSS3に非常に便利なFrexboxというプロパティが追加されて、Floatに比べて格段にボックスのデザインが簡単にできるようになりました。

それでも今まではというか今でもFloatが多用されています。

それは何故か?
一番の原因はブラウザ、特にIE問題。

Frexboxは「IE10以降」でしか対応していないんです。
なので「IE9以前」のプラウザでは表示が崩れてしまいます。

それで、私から一つの提案が!
無視しましょう、「IE9以前」のプラウザを。

そんなに簡単に無視して大丈夫?
そうですよね、でも、私たちはアフィリエイターです。

多くのアクセスはスマホからになります。

プラウザのシェアも「IE9以前」のものは少なくなっているので、私は無視しても問題ないと考えています。

それでも気になる方はFloatを使用するようにしましょう。

ただ、今回はFrexboxを中心に紹介していきます。

アフィリエイト記事を書くためのFlexboxの使い方

スマホからのアクセスを前提にして1カラムレイアウトを想定しています。

なので2カラムの侍仕事塾のブログでは見づらいかもしれませんが大目に見てくださいね。

価格の比較や説明
エステ1

全身脱毛コース

¥35,000/月

画像サイズは780×300です。画像サイズやブレークポイントはご自身の環境に合わせて変えてください。

お申し込み

エステ2

部分脱毛コース

¥10,000/月

基本的に、ボックスは何個でも表示できますが、読者の読みやすさを考えて追加するようにしてください。

お申し込み


<div class="pricelist">
<div class="pricelist-contents">
<div><!-- 画像 --></div>
<p class="price-title"><!-- タイトル --></p>
<p class="price"><!-- プライス --><small><!-- 例 /月 --></small></p>
<p class="price-info"><!-- テキスト入力 --></p>
<a class="price-btn" href="#"><!-- お申し込み --></a>
</div>
<div class="pricelist">
<div class="pricelist-contents">
<div><!-- 画像 --></div>
<p class="price-title"><!-- タイトル --></p>
<p class="price"><!-- プライス --><small><!-- 例 /月 --></small></p>
<p class="price-info"><!-- テキスト入力 --></p>
<a class="price-btn" href="#"><!-- お申し込み --></a>
</div>
/* 全体を囲む部分 */
.pricelist {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
} 
/* 個別ボックス部分 */
.pricelist-contents {
  position: relative;
  flex: 1 0 20%;
  display: flex;
  flex-flow: column;
  margin: 0 8px 8px 0;
  padding: 0 0 40px;;
	border: 1px solid #dadada;
	border-radius: 10px;
}
/* 画像部分 */
.pricelist-contents img {
	width: 100%;
	border-radius: 10px 10px 0 0;
}
/* タイトル部分 */
p.price-title {
	margin: 16px auto 0;
	padding: 0;
	text-align:center;
	font-size: 16px;
}
/* 値段表部分 */
p.price {
	margin: 0;
	padding: 0;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 40px;
}
.price small {
	font-size: 14px;
	font-weight: normal;
}
/* 説明部分 */
p.price-info {
	margin: 0;
	padding: 0 10px 10px;
	font-size: 16px;
}
/* ボタン部分 */
.price-btn {
  position: absolute;
  right: 10%;
  bottom:10px;
  display: block;
  margin-top: auto;
	padding: 10px; 
  max-width: 80%;
  width: 100%;
	border-radius: 30px;
	background-color: #0d47a1;
  font-weight: bold;
	text-align:center;
	text-decoration: none;
	color: #ffffff;
}
.price-btn:hover {
	background-color: #e0e0e0;
}

画像とテキストを横ならびにするFlexbox

画像のサイズやブロックの幅などは自由に変えることができます。

説明文が多い場合は、テキストブロックを広げたりして対応して下さい。
その場合、画像サイズとテキストのバランスを考えると、見栄えの良いデザインになります。

画像とテキスト
サンプル画像1

画像のサイズは780×300になっております。
画像サイスは、それぞれのブログに合わせて選んで下さい。

サンプル画像2
画像のブロックとテキストのブロックは、それぞれ50%になっております。
それぞれの環境に合わせて調整してください。

<div class="side-by-side">
<div class="side-by-side-image"><!-- ここに画像を挿入 --></div>
<div class="side-by-side-text">
<p><!-- ここにテキストを挿入 --></p>
</div>
</div>
<div class="side-by-side">
<div class="side-by-side-image"><!-- ここに画像を挿入 --></div>
<div class="side-by-side-text">
<p><!-- ここにテキストを挿入 --></p>
</div>
</div>
/* Flexbox 画像と説明文を横並びに
**************************************/
/* 全体を囲むボックス */
.side-by-side {
 display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
  margin: 10px auto;
  padding: 5px;
  border: solid 1px #CCCCCC;
}

/* 画像左 */
.side-by-side-image {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding: 0;
  text-align: center;
}
.side-by-side-image img {
  width: 100%;
}

/* テキスト右 */
.side-by-side-text {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding: 0 10px; 
  text-align: left;
}

/* ブレイクポイント */
@media(max-width: 800px) {
  .side-by-side {
	  display: block;
    margin: 10px auto; 
 } 
}

画像を左右に振り分けるFlexbox

これは、あくまでもレイアウトにアクセントを持たせるための手法です。

あまり使いすぎると読者が読みづらい記事になってしまうので気をつけるようにしましょう。

奇数のブロックを入れ替える
サンプル画像1

奇数行だけ画像とテキストの位置が入れ替わります。
ご自分で記事を読んでみて、読みづらいと感じたら使用しないようにしましょう。

サンプル画像2

このブロックは偶数行なので、先程のように画像が左でテキストが右に表示されます。

サンプル画像1

デスクトップではご覧のような表示になりますが、スマホで見た場合は通常の1カラムで表示されます。


<div class="side-by-side2">
<div class="side-by-side-image2"><!-- ここに画像を挿入 --></div>
<div class="side-by-side-text2">
<p><!-- ここにテキストを挿入 --></p>
</div>
</div>
<div class="side-by-side2">
<div class="side-by-side-image2"><!-- ここに画像を挿入 --></div>
<div class="side-by-side-text2">
<p><!-- ここにテキストを挿入 --></p>
</div>
</div>
<div class="side-by-side2">
<div class="side-by-side-image2"><!-- ここに画像を挿入 --></div>
<div class="side-by-side-text2">
<p><!-- ここにテキストを挿入 --></p>
</div>
</div>
/* Flexbox 画像と説明文が奇数行が逆に
**************************************/
/* 全体を囲むボックス */
.side-by-side2 {
 display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
  margin: 10px auto;
  padding: 5px;
  border: solid 1px #CCCCCC;
}
/* 奇数のブロック */
.side-by-side2:nth-child(odd) {
  flex-direction: row-reverse;
}
/* 画像左 */
.side-by-side-image2 {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding: 0;
  text-align: center;
}
.side-by-side-image2 img {
  width: 100%;
}

/* テキスト右 */
.side-by-side-text2 {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding: 0 10px; 
  text-align: left;
}

/* ブレイクポイント */
@media(max-width: 800px) {
  .side-by-side2 {
	  display: block;
    margin: 10px auto; 
 } 
}

アフィリエイト記事には欠かせないボックスの基本

アフィリエイト記事を書いていると、ボックスを使いたい場面が多くあります。

ほとんどのテーマでは様々なボックスが用意されているので、必ずしも自分で作成する必要はないでしょう。

  • どうしても自分のイメージに合わない
  • もっとリッチなデザインのボックスが欲しい
  • 読者が読みやすいボックスを作りたい
こんな人のためにボックス作成の基礎について紹介します。

基本的なボックスの作成方法

色はクラスで追加するようにしよう

例えばボーダーの色だけ変えたいとか、背景の色を変えたい。
そんな時に、新しいCSSを追加していくのは効率的ではありません。

そんな時は積極的にクラス指定で色などを変えるようにしましょう。

この点を気をつけるだけでCSSのサイズも小さくなりますし、何度も同じようなコードを書く必要はありません。


<div class="forecast LB-border">
<p class="forecast-title"><!-- ここにタイトルを記入 --></p>
<p class="forecast-text"><!-- ここに記事を記入 --></p>
<p class="forecast-text"><!-- ここに記事を記入 --></p>
<p class="forecast-text"><!-- ここに記事を記入 --></p>
</div>
/* 基本的なボックス */
.forecast {
	max-width: 780px;
  width: 100%;
  margin: 12px auto;
	padding: 25px;
  text-align: left;
	border: 5px solid #5abbe4;/* ライトブルー */
}

p.forecast-title {
  font-size: 20px;
  font-weight: bold;
}

p.forecast-text {
  font-size: 16px; 
  line-height: 1.4;
  padding: 0 16px; 
}

ボーダーの色を赤にしてみましょう

基本的なCSSのコードは前のボックスと変わりません。

クラス指定をするだけでボーダーの色を変えることができます。HTMLのハイライトの部分にクラスを追加しています。

あらかじめ、CSSに色の設定のコードを書きたしていくだけなので非常にシンプルで使いやすいCSSになります。


<div class="forecast LB-border #ff0000">
<p class="forecast-title"><!-- ここにタイトルを記入 --></p>
<p class="forecast-text"><!-- ここに記事を記入 --></p>
<p class="forecast-text"><!-- ここに記事を記入 --></p>
<p class="forecast-text"><!-- ここに記事を記入 --></p>
</div>
/* 色(ボーダー、背景、テキスト
******************************************/
/* ボーダー色 */
.LB-border {
	border: 5px solid #5abbe4;/* ライトブルー */
}
.Red-border {
	border: 5px solid #ff0000;/* 赤 */#5f9ea0
}
.Cadetblue-border {
	border: 5px solid #5f9ea0;/* cadetblue */
}

タイトル色を変えてみました

タイトル色と背景色を変えてみました。全てクラスを加えていっただけです。

最初にクラスの設定を

CSSに色のクラス設定をしておけば、ボックスに限らず色々なスタイルに適用することができます。

クラス設定をするときの注意点

クラスを多く設定していくと、同じクラス名を書いてしまうことがありますので気をつけてください。


<div class="forecast Cadetblue-border Wsmoke-bg">
<p class="forecast-title Teal-color"><!-- ここにタイトルを記入 --></p>
<p class="forecast-text"><!-- ここに記事を記入 --></p>
</div>
<div class="forecast Cadetblue-border Palego-bg">
<p class="forecast-title Brown-color"><!-- ここにタイトルを記入 --></p>
<p class="forecast-text"><!-- ここに記事を記入 --></p>
</div>
<div class="forecast Cadetblue-border Wheat-bg">
<p class="forecast-title Orange-bg"><!-- ここにタイトルを記入 --></p>
<p class="forecast-text"><!-- ここに記事を記入 --></p>
</div>
/* 背景色 */
.Wsmoke-bg{
  background-color: #f5f5f5;/* whitesmoke */
}
.Palego-bg{
  background-color: #eee8aa;/* palegoldenrod */
}
.Wheat-bg{
  background-color: #f5deb3;/* wheat */
}
/* 文字色 */
.Teal-color{
  color: #008080;/* teal */
}
.Brown-color{
  color: #a52a2a;/* brown */
}
.Orange-bg{
  color: #ff4500;/* orangered */
}

以上がボックスの基本的な作成方法でした。

次からは応用編について紹介していきます。

タイトル入りの角丸テキストボックス

今までは背景に画像を使用するケースが多かったのですが、最近ではCSSだけで設定できるようになりました。

PIE.htc の使い方について

「PIE.htc」とは、おバカさんなIEにCSS3を適用させるためのファイルです。

「PIE.htc」と検索するとダウンロード先のURLなどが紹介されていますので、ファイルをダウンロードしてください。

直接、Wordpress のメディアの追加かからはアップロードできないので、「FileZilla」などのFTPソフトを使ってサーバーにアップロードしてください。

おバカなさんなIEを無視するなら、「PIE.htc」をアップロードする必要はありません。


<p class="kaku-box-title"><!-- ここにタイトルを記入 --></p>
<div class="kaku-box">
<p class="kaku-text><!-- ここに記事なとを記入 --></p>
<p class="kaku-text><!-- ここに記事なとを記入 --></p>
</div>
/* 角丸テキストボックス
****************************************/
/* テキストボックス */
.kaku-box p.kaku-text{
  line-height:1.8;
  padding:8px;
  margin:0;
}
.kaku-box{
  padding:10px;
  color: #444;
  background:#fff;
  border:1px solid #cacaca;
  -webkit-border-radius: 0 0 7px 7px;
  -moz-border-radius: 0 0 7px 7px;
  border-radius: 0 0 7px 7px;
  behavior: url(PIE.htc);
}
/* タイトルのスタイル */
p.kaku-box-title{
  margin:0;
  padding:5px 10px;
  font-size:110%;
  text-shadow: 0px 1px 0px #fff;
  color: #fcfcfc;
  border-top:1px solid #cacaca;
  border-left:1px solid #cacaca;
  border-right:1px solid #cacaca;
  border-bottom:2px solid #d6d4d3;
  -webkit-border-radius: 7px 7px 0 0; 
  -moz-border-radius: 7px 7px 0 0; 
  border-radius: 7px 7px 0 0; 
  -webkit-box-shadow: 0 -1px 1px #9e9b9a inset;
  -moz-box-shadow: 0 -1px 1px #9e9b9a inset;
  box-shadow: 0 -1px 1px #9e9b9a inset;
  background: #fcfcfc;
  background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#eaeaea));
  background: -moz-linear-gradient(top, #fcfcfc, #eaeaea);
  background: -o-linear-gradient(top, #fcfcfc, #eaeaea);
  background: -ms-linear-gradient(top, #fcfcfc, #eaeaea);
  background: linear-gradient(top, #fcfcfc, #eaeaea);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fcfcfc', endColorstr='#eaeaea');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fcfcfc', endColorstr='#eaeaea)";
  -pie-background: linear-gradient(top, #fcfcfc, #eaeaea);
  behavior: url(PIE.htc);
}
/* タイトルのスタイル */
p.kaku-box-title{
  padding: 5px 10px;
  font-weight: bold;
  color: #e4016f;
}

遊び心満点のノート風ボックス

あまり真面目にやりすぎてもつまらないので、少し可愛いデザインのボックスを作ってみしょう。

このボックスも、以前は画像を使わないと作成するのが難しかったのですが、CSS3を使うことで簡単に作成できるようになりました。

メモ帳に見えるかもしれないテキストボックス

ボックスのサイズは私のブログに合わせて指定していますので、自分の環境に合ったサイズに指定してください。

タイトルの文字サイズなども見やすいように自由に変更しても構いません。

デザインが崩れない範囲でお願いします。


<div class="note-box">
<div class="note-ttl">
<p class="note-title"><!-- ここにタイトルを入力してください --></p>
</div>
<p class="note-text"><!-- ここに記事を入力してください --></p>
<p class="note-text"><!-- ここに記事を入力してください --></p>
<p class="note-text"><!-- ここに記事を入力してください --></p>
</div>
/* ノート風テキストボックス
**********************************************/
.note-box, note-box:before, .note-box:after {
  background-color: #eee9b5;
  background-image:-webkit-linear-gradient(#cfcba2 1px, transparent 1px);
  background-image:-moz-linear-gradient(#cfcba2 1px, transparent 1px);
  background-image:-o-linear-gradient(#cfcba2 1px, transparent 1px);
  background-image:linear-gradient(#cfcba2 1px, transparent 1px);
  background-size: 36px 36px;
  background-repeat: repeat;
  background-position:0 50px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
}

.note-box {
  position: relative;
  margin: 16px auto; 
  padding: 0 23px 14px;
  max-width: 780px;/* このサイズは各自に環境に合わせて指定して下さい */
  width: 100%;
  line-height: 32px;
  font-size: 16px;
  color: #666;
}
.note-box p.note-text {
  margin-bottom: 30px; 
}
.note-box :last-child {
  margin-bottom: 0;
}
.note-box:before, .note-box:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 3px;
  right: 3px;
  margin-top: -2px;
  height: 4px;
  background-size: 1px 1px, 1px 1px, 0 0;
}
.note-box:before {
  z-index: -2;
  left: 6px;
  right: 6px;
  height: 6px;
  background-color: #eee;
}
.note-ttl {
  position: relative;
  margin: 0 -23px 14px;
  height: 40px;
  background: #14466a;
  border-radius: 3px 3px 0 0;
  background-image: -webkit-linear-gradient(top, #a87a68, #5d423b);
  background-image: -moz-linear-gradient(top, #a87a68, #5d423b);
  background-image: -o-linear-gradient(top, #a87a68, #5d423b);
  background-image: linear-gradient(to bottom, #a87a68, #5d423b);
  -webkit-box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
  box-shadow: inset 0 1px #c19983, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
}
.note-ttl &gt; p.note-title {
  line-height: 38px;
  font-size: 18px;/* タイトルのフォントサイズはここで指定して下さい */
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
}
.note-title:before, .ttl:after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 1px;
  right: 1px;
  height: 0;
  border-top: 1px dashed #617c90;
  border-color: rgba(255, 255, 255, 0.35);
}
.note-title:after {
  bottom: 3px;
  border-color: #cfcba2;
  border-color: rgba(0, 0, 0, 0.5);
}
@media(max-width: 800px) {
  .note-box p.note-text{
    padding-top: 4px;
    font-size: 16px;
  }
}

気分転換にデザインをイジってみては?

今回はカスタムCSSとボックスデザインを紹介してきました。

あまりデザインに凝りすぎるのも良くありませんが、アフィリエイターにとってHTMLとCSSの知識も必要です。

どうしても毎日記事を書いていると知らず知らずのうちに手を抜いてしまったりします。

そんな時には気分転換のにデザインをイジって見るとリフレッシュになるかもしれません。

まだまだ色々なデザインのボックスや、文章を読みやすくするリストデザインなどが存在します。

HTMLとCSSを勉強する。
そんな軽い気持ちでデザインにチャレンジしてみてはどうでしょうか?

あなただけの素敵なブログができますように、心より応援しています!

あなたも正しい方法でメルマガ始めてみませんか?

前代未聞の超絶価格破壊。こんな価格で会員制サイトが作成できるなんて!

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください