WordPressをカスタマイズ。CSSの記述場所・追加CSS・スタイルシート

当サイトにて実際に使用しているCSSをまとめてみました。

文字の大きさ(font)、色コード(color。コードはこちらを参照)などは、お好みの数値を指定してください。

尚、どっかから拾って改良したコードもあります。まだまだ勉強中。

CSSの記述場所

Simplicityの場合

小テーマに記載します。

1. 外観
2. 子テーマ
3. カスタマイズ

一番下の「追加CSS」

もしくは、

1. 外観
2. テーマの編集
3. 子テーマ
4. スタイルシート（style.css）

Simplicity以外のテーマをお使いの場合

スタイルシートに記載します。

1. 外観
2. テーマ
3. テーマの編集
4. スタイルシート（style.css）

本文中の文字間隔

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

本文中の行間

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

サイドバーの行間と文字の大きさ

/*サイドバーの行間と文字の大きさ*/
.widget-area .widget li {
line-height: 28px; /*行間*/
font-size: 14px; /*文字の大きさ*/
}

リストタグの行間（Simplicity）

こんな感じに行間が空きます。

1. テスト
2. テスト
3. テスト

/*リストタグの行間*/
.article li {
margin-top: 1em;
margin-bottom: 1em;
}

見出し（Simplicity）

h2を指定

h3を指定

h4を指定

h5を指定

/*見出し*/
.article h2 {
padding: .2.5em .75em;
background-color: #F5DA81;
border-left: 6px solid #ccc;
}
.article h3,
#comment-area h3,
#related-entries h3{
font-size:23px;
padding: .25em 0 .25em .75em;
border-left: 6px solid #FE9A2E;
border-bottom:none;
}
.article h4 {
border-left: 30px solid #FE9A2E;
border-bottom: 0px;
padding: 5px 0 5px 10px;
margin-bottom: 30px;
}
.article h5 {
font-size:23px;
}

見出し（Luxeritas）

/*見出し*/
.post h2 {
padding: .9em .75em;
background-color: #F5DA81;
border-left: 5px solid #ccc;
}
.post h3,
#comment-area h3,
#related-entries h3{
font-size:23px;
padding: .25em 0 .25em .75em;
border-left: 6px solid #FE9A2E;
border-bottom:none;
}
.post h4 {
border-left: 30px solid #FE9A2E;
border-bottom: 0px;
padding: 5px 0 5px 10px;
margin-bottom: 30px;
}
.post h5 {
font-size:23px;
}

blockquote引用タグ設定（Simplicity）

こんな感じになります

/*blockquote引用タグ設定*/
blockquote {
background: #F7F7F7 url(img/blockquote.png) no-repeat 0 0;
padding: 25px;
border: 2px solid #CCCCCC;
color: #212121;
box-shadow: 1px 1px 2px rgba(204, 204, 204, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
clear: both;
}

リンクの色を変える（Simplicity）

リンクの色を薄いグレーにする方法です。

/*リンクの色を変更*/
a{
color:#808080;
text-decoration:none;
}
a:hover { text-decoration: underline;
color:#808080;
}

投稿日、更新日、カテゴリ（Simplicity）

/*投稿日、更新日、カテゴリ*/
/*メタ情報の大きさを変更・右側*/
.post-meta,.entry .post-meta a {
font-size: 12px;
line-height: 160%;
}

.entry .post-meta {
text-align: right !important;
margin-top: 1px !important;
}

.fa-fw {
display: none/*アイコンをなくす*/
}

.entry .post-date {
font-family: 'Didot', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, serif,'Dynalight', cursive;
font-style: italic;
font-weight: 200;
}

.post-meta a {
color: #000000;
}

.post-meta {
font-size: 12px;
background-color: #FFFFFF;
margin-bottom: 0.5em;
text-align:right;
color:#555;
}

.post-date,.entry-date,.entry-date.date.updated {
font-family: 'Didot', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, serif,'Dynalight', cursive !important;
font-size: 0.93em !important;
font-style: italic;
font-weight: 200;
}

.entry .post-meta .category,.entry .post-meta .category a,.post-meta .category,.post-meta .category a,.entry .post-meta .category a {
background: #fff;
padding: 0.5px 0.5px 0px 0px;
font-size: 1.06em;
color: #555;

letter-spacing: 0.07em;
vertical-align: baseline;
text-transform: uppercase;
}

ブログカードのカスタマイズ（Simplicity）

/*ブログカードカスタマイズ*/
.blog-card {
background: #FBF2EF; /*背景色*/
max-width: 95%;/*横幅*/
margin:0 auto;/*センタリング*/
border: solid 1px #c0c0c0;/*枠線の幅と色*/
border-radius: 20px;/*角を丸くする*/
}

（Simplicity）モバイルのブログカード抜粋を非表示

モバイルですっきり表示。

/* モバイルのブログカードカスタマイズ*/
@media screen and (max-width: 430px) {

/* モバイルのブログカード抜粋を非表示*/
.blog-card-excerpt{
display:none;
}

（Luxeritas）モバイルのブログカード抜粋を非表示

/* モバイルのブログカードカスタマイズ*/
@media screen and (max-width: 430px) {

/* モバイルのブログカード抜粋を非表示*/
.blog-card-desc{
display:none;
}

（Luxeritas）モバイルのブログカードリンクサイズを変更

/* モバイルブログカードリンクサイズ*/
p.blog-card-link{
font-size: 10px;
}

（Luxeritas）モバイルのブログカード文字サイズを変更

/* モバイルブログカード文字サイズ*/
p.blog-card-title{
font-size: 14px;}

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

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

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