当サイトにて実際に使用している CSS をまとめてみました。
class 名や、文字(font)、色コードなどは好みの数値を指定してください。
個人的には、テーマに付帯されているスタイル機能は使わず「自分でCSSを書く」ことをおすすめします。
なぜなら、テーマを変更した時にデザインが崩れて修復が大変だからです。
CSSの記述場所
HTMLサイト
エディタなどに記述し「style.css」で保存します。
Cocoonの場合
- 外観
- テーマエディタ
- Cocoon Child: スタイルシート (style.css)
サイトが AMP に対応している場合は「amp.css」にも記載します。
ルクセリタスの場合
- 外観
- テーマエディタ
- Luxeritas Child Theme: スタイルシート (style.css)
サイトが AMP に対応している場合は「style-amp.css」にも記載します。
良く使う基本的なコード
background: | 背景 |
border: | 線・枠線 |
font-color: | 文字の色 |
font-size: | 文字の大きさ |
letter-spacing: ※広め0.07em | 文字の間隔 |
line-height: ※狭い1.5 標準1.7 広い1.9 | 行の高さ |
margin: | paddingの外の余白の上下左右 |
padding: | 要素の上下左右 |
margin-left:auto;margin-right:auto; | とにかく中央に寄せる |
@media screen and (max-width:599px){} | モバイル用 |
ウィジェット
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;}
吹き出し
結局まだ上手くできていません。むずい。めんどい。
ダウンロードボタン
リンクボタン
主に公式サイトを載せる時に使っています。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;} }