当サイトで使っているCSSと記述場所

当サイトにて実際に使用している CSS をまとめてみました。
class 名や、文字（font）、色コードなどは好みの数値を指定してください。

個人的には、テーマに付帯されているスタイル機能は使わず「自分でCSSを書く」ことをおすすめします。
なぜなら、テーマを変更した時にデザインが崩れて修復が大変だからです。

◆【CSS】Cocoon
◆【CSS】Luxeritas

CSSの記述場所

HTMLサイト

エディタなどに記述し「style.css」で保存します。

Cocoonの場合

1. 外観
2. テーマエディタ
3. Cocoon Child: スタイルシート (style.css)

サイトが AMP に対応している場合は「amp.css」にも記載します。

ルクセリタスの場合

1. 外観
2. テーマエディタ
3. Luxeritas Child Theme: スタイルシート (style.css)

サイトが AMP に対応している場合は「style-amp.css」にも記載します。

良く使う基本的なコード

ウィジェット

WordPressウィジェットの文字のサイズや色を変更する方法

preタグ（ソースコード）

文字サイズは PC は本文の95%、モバイルは本文の90%にして、行間も少し狭くしました。
また、PC で見た時の幅を90%（モバイル100%）にしてあります。

/*pre*/
pre {
font-size:95%;
line-height:1.5;
width:90%;
margin-left:
auto;margin-right:auto;
}
@media screen and (max-width:599px){
.pre{
font-size:90%;
line-height:1.5;
width:100%;}
}

blockquoteタグ（引用）

文字サイズは本文の95%、行間は少し狭く、PC で見た時の幅を90%（モバイル100%）にして引用であることを把握しやすいようにしました。

/*引用*/
blockquote {
line-height:1.5;
font-size:95%;
width:90%;
margin-left:auto;
margin-right:auto;
}
@media screen and (max-width:599px){
blockquote{
width:100%;
font-size:95%;
line-height:1.5;}
}

ul・ol・liタグ（箇条書き）

pre や blockquote と同じですね。「本文以外は少し小さく狭く」するのがマイブーム。

.ul li {
font-size:95%;line-height:1.5;
}

.ol li {
font-size:95%;line-height:1.5;
}

リンク

リンクの下線は非表示にして、色を変えています。

a{
text-decoration:none;
color:#04c;
}

広告を中央に寄せる

楽天市場や Amazon のコードなどを中央に寄せたい場合に使っています。
楽天市場のコードは下の余白が狭いように思うので「margin」で調整しています。

HTML

<div class="ad-center">
アフィリエイトコード挿入
</div>

CSS

/*広告を中央に寄せる*/
.ad-center{
text-align:center;
margin:0px 0px 25px 0px;
}

モバイルサイドバー非表示

設定できるテーマが多いかと思いますが一応。
クラス名「#sidebar」はテーマによって異なる場合があります。

@media screen and (max-width:599px){
#sidebar{display:none}
}

デバイスの幅を100％に指定

画像などの幅が各デバイスの幅に収まるようにしています。

img {
max-width: 100%; 
height:auto;
}

キーボード

HTML

<kbd>Z</kbd>

CSS

kbd {
height: 40px;
min-width: 20px;
padding: 0 10px;
margin: 5px 10px;
background: #EDEDED;
border-radius: 10px;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
color: #808080;
font: bold 20px arial;
text-align: center;
line-height: 40px;
display: inline-block;}

吹き出し

結局まだ上手くできていません。むずい。めんどい。

• 吹き出しをパクり自作
• Cocoonで設定した吹き出しをルクセリタスで表示

ダウンロードボタン

◆CSSとHTML5で作る簡単ダウンロードボタン

リンクボタン

主に公式サイトを載せる時に使っています。Webアイコンフォント「Font Awesome」を組み合わせました。

HTML

<a class="btn-pagelink" href="URL">
公式サイト 
<i class="fa fa-home"></i>
</a>

CSS

/*サイトリンク*/
.btn-pagelink {
display: inline-block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #313131;
border: solid 1px #313131;
transition: .4s;
border-radius: 5px;
}
.btn-pagelink:hover {
background: #313131;
color: #fff;
}

ボックス

HTML

<div class="boxz">
文章
</div>

CSS

/*ボックス*/
.boxz{
padding:.5em 1em;
margin:2em 0;
color:#5d627b;
background:#fff;
border-left:solid 5px #5d627b;
box-shadow:0 3px 5px rgba(0,0,0,.22)
}
.boxz p{
margin:0;padding:0
}

特定の記事のみ変更

HTML

<div class="entry-content">本文</div>

CSS

/*本文中の文字間隔*/
.entry-content { letter-spacing: 1.5px; }

/* 本文中の行間*/
.entry-content p { line-height: 40px; }

h2はたまに記事によって変えています。

/*本文中のh2*/
.entry-content h2 { 
padding: 30px 0px 30px 10px; 
margin: 80px 0px 30px 0px; 
color:#fff; 
background-color:#595959; 
border-left: 4px solid #ff9900;
}

クラス名はテーマによって異なります（「.entry-content」や「.post-content」など）。

Cocoon だと記事の下に CSS を記述できる場所が表示されるので便利。
投稿画面の上にある「表示オプション」の「カスタムCSS」にチェックを入れて、、

記事の下に表示された「カスタムCSS」に記述するとその記事だけ CSS が反映されます。

カッテネ

◆カッテネをプチカスタマイズしてカエレバ/トマレバ風に使用

カエレバ・ヨメレバ・トマレバ

RoughLogさんの「CSSコピペでOK！カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]」のコードをアレンジさせていただきました。

「amazlet風-2(cssカスタマイズ用)」で作成します。

CSSでこんな感じになります。

/*カエレバ*/
.cstmreba {
width: 98%;height:auto;margin:36px 0;line-height:1.5;
word-wrap:break-word;box-sizing:border-box;display:block;
}
.cstmreba p {margin: 0;padding: 0;}
.cstmreba a {transition: 0.8s ;color:#285EFF;}
.cstmreba a:hover {color:#FFCA28;}
.booklink-box,.kaerebalink-box,.tomarebalink-box {
width:100%;background-color:#fff;
overflow:hidden;border: 1px solid #ddd;
border-radius:0px;box-sizing:border-box;
padding:12px 8px;
}
/* サムネイルボックス */
.booklink-image,.kaerebalink-image,.tomarebalink-image {
width:150px;float:left;
margin:0 14px 0 0;text-align: center;}
.booklink-image a,.kaerebalink-image a,.tomarebalink-image a {
width:100%;display:block;}
/* サムネイル */
.booklink-image a img, .kaerebalink-image a img, .tomarebalink-image a img {
margin:0;padding:0;text-align:center;}
.booklink-info, .kaerebalink-info, .tomarebalink-info {
overflow:hidden;line-height:170%;color: #333;}
/* infoボックス内リンク下線非表示 */
.booklink-info a,
.kaerebalink-info a,
.tomarebalink-info a {text-decoration: none;}
/* 作品・商品・ホテル名 リンク */
.booklink-name>a,.kaerebalink-name>a,.tomarebalink-name>a {
border-bottom: 1px dotted ;font-size:20px;}
/* powered by */
.booklink-powered-date,.kaerebalink-powered-date,.tomarebalink-powered-date {
font-size:10px;line-height:150%;}
.booklink-powered-date a,.kaerebalink-powered-date a,
.tomarebalink-powered-date a {
border-bottom:1px dotted ;color:#333;}
.booklink-powered-date a:hover,.kaerebalink-powered-date a:hover,
.tomarebalink-powered-date a:hover {
color:#333;}
/* 著者・住所 */
.booklink-detail,.kaerebalink-detail,.tomarebalink-address {
font-size:17px;}
.kaerebalink-link1 img,.booklink-link2 img,.tomarebalink-link1 img {
display:none;}
.kaerebalink-link1,.booklink-link2,.tomarebalink-link1 {
display:inline-block;width:100%;margin-top:5px;}
.booklink-link2>div,.kaerebalink-link1>div,.tomarebalink-link1>div {
float:left;width:31%;min-width:125px;margin:0.5% 1%;}
/* ボタン */
.booklink-link2 a,.kaerebalink-link1 a,.tomarebalink-link1 a {
width:100%;display:inline-block;
text-align:center;box-sizing:border-box;
font-size:20px;font-weight:bold;
line-height:180%;padding:3% 1%;
margin:1px 0;border-radius:4px;
box-shadow:0 2px 0 #ccc;background:#fafafa;
}
.booklink-link2 a:hover,.kaerebalink-link1 a:hover,.tomarebalink-link1 a:hover {
text-decoration: underline;
}
/* トマレバ */
.tomarebalink-link1 .shoplinkrakuten a {color:#76ae25;}
.tomarebalink-link1 .shoplinkjalan a {color:#ff7a15;}
.tomarebalink-link1 .shoplinkjtb a {color:#c81528;}
.tomarebalink-link1 .shoplinkknt a {color:#0b499d;}
.tomarebalink-link1 .shoplinkikyu a {color:#bf9500;}
.tomarebalink-link1 .shoplinkrurubu a {color:#000066;}
.tomarebalink-link1 .shoplinkyahoo a {color:#ff0033;}
/* カエレバ */
.kaerebalink-link1 .shoplinkyahoo a {color:#ff0033;}
.kaerebalink-link1 .shoplinkbellemaison a {color:#84be24;}
.kaerebalink-link1 .shoplinkcecile a {color:#8d124b;} 
.kaerebalink-link1 .shoplinkwowma a {color:#ea5404;}
.kaerebalink-link1 .shoplinkkakakucom a {color:#314995;}
/* ヨメレバ */
.booklink-link2 .shoplinkkindle a {color:#007dcd;}
.booklink-link2 .shoplinkrakukobo a{color:#d50000;}
.booklink-link2 .shoplinkbk1 a {color:#0085cd;}
.booklink-link2 .shoplinkehon a {color:#2a2c6d;}
.booklink-link2 .shoplinkkino a {color:#003e92;}
.booklink-link2 .shoplinkebj a {color:#f8485e;}
/* カエレバ・ヨメレバ共通 */
.kaerebalink-link1 .shoplinkamazon a, 
.booklink-link2 .shoplinkamazon a {color:#FF9901;}
.kaerebalink-link1 .shoplinkrakuten a , 
.booklink-link2 .shoplinkrakuten a {color:#c20004;}
.kaerebalink-link1 .shoplinkseven a, 
.booklink-link2 .shoplinkseven a {color:#225496;}
/* ボタン終わり */
.booklink-footer{clear:both;}
/*** 480px以下 ***/
@media screen and (max-width:480px){
.booklink-image,.kaerebalink-image,.tomarebalink-image {
width:100%;float:none;}
.booklink-link2>div,.kaerebalink-link1>div,.tomarebalink-link1>div {
width: 49%;margin: 0.5%;}
.booklink-info,.kaerebalink-info,.tomarebalink-info {
text-align:center;padding-bottom: 1px;}
}
/*カエレバ終わり*/

アフィリエイト用のボタン【横並び】

HTML

<div class="box-main">
<div class="left-btn">
<a href="URL" rel="sponsored nofollow">左</a>
</div>
<div class="right-btn">
<a href="URL" rel="sponsored nofollow">右</a>
</div>
</div>

CSS

/***ボタン横並び***/
/*左ボタン（横並び）*/
.left-btn{width:100%;}
.left-btn a {display:block;position:relative;z-index:2;overflow:hidden;
font-weight:500;box-shadow:2px 2px 2px #9C4836;background-color:#F8CB33;
color:#313131;padding:3px 0;text-align:center;
text-decoration:none;transition: .25s linear;}
.left-btn a:hover{transform:translateY(4px);box-shadow:none;}
/*右ボタン（横並び）*/
.right-btn{width:100%;float:left;}
.right-btn a{display:block;position:relative;z-index:2;overflow:hidden;
font-weight:500;box-shadow:2px 2px 2px #437043;background-color:#B2FFB2;
color:#313131;padding:3px 0;text-align:center;
text-decoration:none;transition: .25s linear;}
.right-btn a:hover{transform:translateY(4px);box-shadow:none;}
.box-main{font-size:1.1rem;margin-bottom:20px;}
.box-main:after{content:"";display:block;clear:both;}
@media screen and (min-width:481px){.right-btn {width:48%;margin-left:10px;}
.left-btn{width:46%;float:left;margin-right:10px;margin-left:10px;}}
@media screen and (max-width:480px){.right-btn{margin-top:20px;font-size:1.3rem;}
.left-btn{margin-top:20px;font-size:1.3rem;}}
/*ボタン横並び終わり*/

アフィリエイト用のボタン【縦並び】

PCやタブレット（835px以上）では幅50%、モバイルでは幅90%にしてあります。
角を丸くしたい場合は「border-radius:5px;」を追記します。

HTML

赤

<div class="red-btn">
<a href="URL" rel="sponsored nofollow">＊＊＊</a>
</div>

青

<div class="blue-btn">
<a href="URL" rel="sponsored nofollow">＊＊＊</a>
</div>

ゴールド

<div class="gold-btn">
<a href="URL" rel="sponsored nofollow">＊＊＊</a>
</div>

グレー

<div class="gray-btn">
<a href="URL" rel="sponsored nofollow">＊＊＊</a>
</div>

CSS

/*赤*/
.red-btn{
width:50%;
display:block;
margin-left:auto;margin-right:auto;
margin-bottom:20px;}
.red-btn a{
display:block;
text-align:center;
text-decoration:none;
position:relative;
z-index:2;
font-size:1.2rem;
font-weight:500;
box-shadow:2px 2px 2px #555;
background-color:#de070b;
color:#fff;
padding:3px 0;
transition:.25s linear;}
.red-btn a:hover{
transform: translateY(4px);
box-shadow:none;}
@media screen and (max-width:834px){
.red-btn{width:90%;}.red-btn a{font-size:1.4rem;}
}

/*青*/
.blue-btn{
width:50%;
display:block;
margin-left:auto;margin-right:auto;
margin-bottom:20px;}
.blue-btn a{
display:block;
text-align:center;
text-decoration:none;
position:relative;
z-index:2;
font-size:1.2rem;
font-weight:500;
box-shadow:2px 2px 2px #555;
background-color:#0099FF;
color:#fff;
padding:3px 0;
transition:.25s linear;}
.blue-btn a:hover{
transform:translateY(4px);
box-shadow:none;}
@media screen and (max-width:834px){
.blue-btn{width:90%;}
.blue-btn a{font-size:1.4rem;}
}

/*ゴールド*/
.gold-btn{
width:50%;
display:block;
margin-left:auto;margin-right:auto;
margin-bottom:20px;}
.gold-btn a{
display:block;
text-align:center;
text-decoration:none;
position:relative;
z-index:2;
font-size:1.2rem;
font-weight:500;
box-shadow:2px 2px 2px #555;
background-color:#8b7b04;
color:#fff;
padding:3px 0;
transition:.25s linear;}
.gold-btn a:hover{
transform:translateY(4px);
box-shadow:none;}
@media screen and(max-width:834px){
.gold-btn{width:90%;}
.gold-btn a{font-size:1.4rem;}
}

/*グレー*/
.gray-btn{
width:50%;
display:block;
margin-left:auto;margin-right:auto;
margin-bottom:20px;}
.gray-btn a{
display:block;
text-align:center;
text-decoration:none;
position:relative;
z-index:2;
font-size:1.2rem;
font-weight:500;
box-shadow:2px 2px 2px #555;
background-color:#dcdcdc;
color:#000;
padding:3px 0;
transition:.25s linear;}
.gray-btn a:hover{
transform:translateY(4px);
box-shadow:none;}
@media screen and (max-width:834px){
.gray-btn{width:90%;}
.gray-btn a{font-size:1.4rem;}
}