サイト作成で私がよく使っているCSSなどをまとめて紹介してみようかと思います。もし参考になる部分があればアレンジして使ってみて下さい。
ちなみにWordPressの方はプラグイン「AddQuicktag」で使えそうなやつを登録しておけば投稿画面ですぐに呼び出せます。
⇒よく使うタグを登録し簡単に挿入できるプラグイン【AddQuicktag】
蛍光マーカー
強調したい部分や目立たせたい部分で使う蛍光マーカー。マーカーの部分を太字（bold）にしてます。
■CSS：青の蛍光ペン
1 2 3 4 | .marker_blue { background: linear-gradient(transparent 80%, #66ccff 0%); font-weight:bold; } |
■CSS：黄色の蛍光ペン(%の部分の数値が小さくなると太くなる)
1 2 3 4 | .marker_yellow { background: linear-gradient(transparent 60%, #ffff66 0%); font-weight:bold; } |
アレンジするならクラス名（.marker_blueの部分）と線の太さと、線の色の部分を変更できます。線の太さは0%が一番太く、90%とかになると細くなります。
linear-gradient(transparent 線の太さ, 線の色 0%)
■HTML：記事内で次のように書くと反映されます（テキストエディタ）。
1 | <span class="marker_blue">蛍光ペンのテキスト</span> |
カラーボックス
グレーのボックス。
こんな感じのグレーのボックス内にテキストが入ります。
もちろん色はグレーである必要はないのでアレンジ可能。
■CSS
1 2 3 4 5 6 | .graybox { padding: 20px 20px 0 20px; border: solid 1px #ccc; background-color: #f3f3f3; margin-bottom: 20px; } |
- padding（ボックス内の余白）：時計回りに上、右、下、左の順に余白を調整。
- border（外枠の線）：solidが実線、線の太さ、線の色
- background-color:背景色の色
- margin-bottom（ボックス下の余白）: 数値が小さいと下のコンテンツにくっつく。
■HTML：記事内で次のように書くと反映されます（テキストエディタ）。
1 2 3 4 5 | <div class="graybox"> ボックス内テキスト </div> |
ドット線のボックス
上記のグレーボックスと同じ要領でこんなやつも使ってます。
↓ドット線のボックス。
こんな感じのドット線内にテキストが入ります。
ちょっとした追記などをする時に使っているMEMOボックス。
■CSS
1 2 3 4 5 6 7 8 9 10 11 12 | .memo { margin: 30px 0 30px; padding: 20px; border: 1px dashed #d64e80; } .memo-moji { font-size:18px; color:#d64e80; margin-bottom:20px; font-weight:bold; } |
■HTML：記事内で次のように書くと反映されます（テキストエディタ）。
1 2 3 4 5 6 | <div class="memo"> <div class="memo-moji">MEMO</div> ボックス内テキスト。 </div> |
おすすめ！チェック！マーク
読んで欲しい記事のリンクなどに使うマーク。
「Check!」「オススメ」こんな感じにできるCSSです。
■CSS
1 2 3 4 5 6 7 | .check { color: #ff0505; font-size: 10px; text-decoration: underline; background-color: #ffcbcb; font-weight: bold; } |
文字の大きさ（font-size）とか色（color）はお好きに変更どうぞ。
■HTML：記事内で次のように書くと反映されます（テキストエディタ）。
1 | <span class="check">オススメ！</span> |
この「オススメ！」という部分がテキスト部分になるので、ここは「check!」でもいいし、「必読！」とか変更したらOK。
「Check!」「オススメ」こんな感じ。リンク誘導などでも。
⇒アフィリエイトで稼ぐ方法まとめページ999999users
みたいなはてなブックマーク風にも使えます。クリック率上がります。
リンクのボタン化。単品ボタン、並列ボタン
リンクをボタン化するCSSです。
もしくは２つ横並びとか。
■CSS：１つのボタン
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /* 赤ボタン単品 */ .red-btn { box-shadow:2px 2px 2px #555; font-size:16px; text-align:center; /*ボタンの中央配置 */ margin:40px auto 40px auto; /*ボタンの上右下左の余白 */ max-width: 300px; /*ボタンの横幅 */ text-align: center; /*ボタン内の文字中央寄せ */ padding: 7px; /*ボタン内文字の余白 */ background-color:#ed254e; margin-right: auto; margin-left: auto; border-radius: 5px; /*ボタンの角を少し丸く */ -webkit-border-radius: 5px; -moz-border-radius: 5px; font-weight: bold; /*ボタン内文字は太字 */ color: #fff !important; /*ボタン内の文字色 */ height: 30px; line-height:30px; } .red-btn a { text-decoration: none !important; /*ボタン内テキストリンク下線無し */ color: #fff !important; /*ボタン内の文字色 */ display: block; } |
■HTML：記事内で次のように書くと反映されます（テキストエディタ）。
1 | <div class="red-btn">ココにテキストリンク</div> |
横並びの２つボタン
■CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | /* 左ボタン */ .left-btn { box-shadow:2px 2px 2px #555; text-align:center; /*ボタンの中央配置 */ width: 100%; /*ボタンの横幅 */ text-align: center; /*ボタン内の文字中央寄せ */ padding: 7px; /*ボタン内文字の余白 */ background-color: #039BE6; /*ボタンの背景色#cc1812#ef5771#d64e80#e37878 */ border-radius: 5px; /*ボタンの角を少し丸く */ -webkit-border-radius: 5px; -moz-border-radius: 5px; font-weight: bold; /*ボタン内文字は太字 */ color:#fff !important; margin-bottom:10px; margin-left:-10px; height: 30px; line-height:30px; } .left-btn a { text-decoration: none !important; /*ボタン内テキストリンク下線無し */ color: #fff !important; /*ボタン内の文字色 */ display: block; } /* 右ボタン */ .right-btn { box-shadow:2px 2px 2px #555; background-color: #ed254e; text-align:center; /*ボタンの中央配置 */ margin-bottom:15px; display: block; width: 100%; /*ボタンの横幅 */ text-align: center; /*ボタン内の文字中央寄せ */ padding: 7px; /*ボタン内文字の余白 */ float:left; color:#fff; font-weight:bold; margin-left: -10px; border-radius: 5px; /*ボタンの角を少し丸く */ -webkit-border-radius: 5px; -moz-border-radius: 5px; height: 30px; line-height:30px; } .right-btn a { text-decoration: none !important; /*ボタン内テキストリンク下線無し */ color: #fff !important; /*ボタン内の文字色 */ display: block; } .box-main:after { content:""; display:block; clear:both; } .box-main { text-align:center; font-size:16px; margin:40px 0; } /* 600px以上は横並び それ以外は縦に並ぶ */ @media screen and (min-width: 600px) { .right-btn { width:43%; margin-left:10px; } .left-btn { width:43%; float:left; margin-right: 10px; margin-left:0; } } |
■HTML：記事内で次のように書くと反映されます（テキストエディタ）。
1 2 3 4 | <div class="box-main"> <div class="left-btn">リンク１</div> <div class="right-btn">リンク2</div> </div> |
リンクテキスト部分が長くなると文字が切れますので、ボタン内は短めのテキストで。
あと、スマホでも文字が入りきっているか？チェックしておいた方が無難。
とりあえず思いついた分だけ書いてみました。まだまだあると思うんですが、今ちょっと集中力なくて思い出せません。
また気が向いたら追記していきます。
サイト作成で個人的によく使う蛍光マーカー、ボックス、その他CSSまとめでした。
