特定の記事のCSSをカスタマイズする
今回は、特定の記事のCSSをカスタマイズする方法について解説します。
このテーマでは、特定の記事にのみ反映させたいCSSをカスタマイズすることができます。
スタイルシートなどを触ることなく投稿画面内で完結できる上に、コピー＆ペーストだけで簡単に記事のカスタマイズが行えます。
カスタムCSSを入力する場所
特定の記事にCSSをカスタマイズ追加したい場合は、投稿画面を下にスクロールしていくと出てくる「ページ設定」の「カスタムCSS」に特定の記事にだけ適用したいCSSを入力をします。
※styleで囲む必要はありません。
CSSカスタマイズの例
コピー＆ペーストでできるパーツや装飾、便利ツールなども、簡単に反映させることができます。
通常のスタイルシートをカスタマイズする場合と同様、
- html
- CSS
を編集します。
例えば、アコーディオンメニューを個別記事に表示させたい場合、投稿画面の「テキストエディター」でhtmlを編集します。
<div class="cp_actab"><input id="tab-two" type="checkbox" name="tabs" />
<label for="tab-two">アコーディオンメニュー</label>
<div class="cp_actab-content">「カスタムCSS」の枠内にCSSを入力すると、この記事内のみに反映されます。
.cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
color: #ffffff;
}
.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}
.cp_actab label {
font-weight: bold;
line-height: 3;
position: relative;
display: block;
padding: 0 0 0 1em;
cursor: pointer;
margin: 0 0 1px 0;
background: #da3c41;
}
.cp_actab .cp_actab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.35s;
transition: max-height 0.35s;
color: #333333;
background: #f1c6c6;
}
.cp_actab .cp_actab-content p {
margin: 1em;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
max-height: 20em;
}
/* Icon */
.cp_actab label::after {
line-height: 3;
position: absolute;
top: 0;
right: 0;
display: block;
width: 3em;
height: 3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}カスタマイズすると、下のアコーディオンメニューが表示されます。
WordPress テーマ
関連記事
コメントを残す