【コピペでOK】ブログ装飾CSSテンプレート＆プラグイン【保存版】

リスト
ボックス
吹き出し
ぷるぷるボタン

アフィリエイトで売り上げるには、売れるデザインが必須

Web制作にエンジニアとして勤務しているボクですが、特に「リスト・ボックス・吹き出し・ぷるぷるボタン」は超頻出

「CSSとか難しい機能はわからない！」

という人もつかえるように、よく使うブログ装飾を公開！

コピペやプラグインで使えます。

本記事はすぐに使えるようにブクマ推奨

＞＞追加CSSがわからない方はコチラ

リストのデザイン
1. 点線リスト
2. シンプルリスト
ボックスデザイン
吹き出し。。はプラグインね！
ぷるぷるボタン
1. ぷるぷるボタン
2. プルプル拡大するボタン
追加CSSの使い方
1. 事前準備：追加CSSにコードを追加
2. デザインを活用する
まとめ：売れる記事はデザインから

リストのデザイン

H２タグ直後に重要ポイントを箇条書き

点線リスト

リストの装飾
リストの装飾
リストの装飾

クラス：list-blue

.list-blue {
  border: dashed 2px #668ad8;/*囲いのカラー*/
  padding: 0.5em 0.5em 0.5em 2em;
}
.list-blue li {
  color: #888888;/*文字カラー*/
  line-height: 1.5;
  padding: 0.5em 0;
}

シンプルリスト

チェックリスト
チェックリスト
チェックリスト

クラス：list-simple

/*シンプル*/
.list-simple {
  border: solid 2px #ffb03f;
  padding: 0.5em 1em 0.5em 2.3em;
}
.list-simple li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: square;
　　border-bottom:dashed #ccc 2px;
}
.list-simple li:last-child{
　　border:none;
}

要点をシンプルにまとめるためのリスト

複雑なデザインはいりません。

＞＞いろんなデザインを試したい人はコチラ

＞＞色を変えたい人はコチラ

ボックスデザイン

H３タグの直後に結論を書くと読まれます

スマートなブルーボックス

青いボックスです

クラス：blue-box

.blue-box{
	background-color: #f3fafe;
        border:dotted 1px #6C9FCE ;
        margin:2em 0px 2em 0px;
        padding:2em;
}

noteみたいな色のボックス

noteの色ってシンプルでかわいい

クラス：note-box

.note-box{
	background-color: #F6F9F9;
        border:dotted 1px #666 ;
        margin:2em 0px 2em 0px;
        padding:2em;
}

ゆるふわ女の子カラー

ゆるふわカラーでキュートなブログ　

クラス：cute-box

.cute-box{
	background-color: #fff0f5;
        border:dotted 1px #ff69b4 ;
        margin:2em 0px 2em 0px;
        padding:2em;
}

吹き出し。。はプラグインね！

重要ポイントは吹き出しでしゃべる

おすすめは下記のプラグイン

＞＞Word Balloon

エル

このブログはCocoonの機能を使っているよ！

テーマの機能で吹き出しがついてるものもある

ぷるぷるボタン

申し込みアイコンをプルンプルン動かせば、コンバージョン率は上がる！
100%確実に売上がアップする最強の仕組み　加藤公一レオ

売りたい商品のボタンを記事下部でぷるぷる動かすべし。
見本はこの記事。

ちなみにボタンは緑にすべきです。

もう一度いいます。

ボタンは緑にすべきです。

理由はコチラに書いてありますが、

読みたくない人は思考停止で「緑」にしましょ

１００％確実に売上がアップする最強の仕組み

Amazon公式サイトでみる▶

Webで物を売りやすくする方法がギュッと詰まっている

ぷるぷるボタン

めっちゃぷるぷるしとるやろ？

クラス：puru01

.puru01{
    animation: btn-anime 1s infinite;
}
@keyframes btn-anime{
  0% {transform: rotate(0deg);}
  40% {transform: rotate(0deg);}
  50% {transform: rotate(2deg);}
  60% {transform: rotate(-1deg);}
  70% {transform: rotate(3deg);}
  80% {transform: rotate(-2deg);}
  90% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}

プルプル拡大するボタン

これめっちゃオススメだよ！！！

クラス：puru02

.prupru02{
  animation-name: puru;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-direction: normal;
  animation-delay: 0s;
  position: relative;
  bottom: 0;
  transition: all 100ms;
}
@keyframes puru {
  3% { transform: scale(0.93); }
  9% { transform: scale(1); }
  15% { transform: scale(0.96); }
  19% { transform: scale(1); }
  23% { transform: scale(0.99); }
  26% { transform: scale(1); }
}