人気テーマ「SWELL」は、組み込まれている機能だけでもかなり自分好みのデザインにできます。
ただ、人気のテーマゆえに、似たようなデザインになりがち…
そんな時に、独自のデザインを取り入れられるのがCSSでのカスタマイズです。
今回は、CSSを使って、内部リンクのブログカードをカスタマイズする方法を紹介していきます。
SWELLのテーマを使用する前はCocoonテーマでいろいろ遊んでいた筆者が、コピペで可能なカスタマイズ例を紹介していきますので、ぜひ参考にしてみてください。
＼ おしゃれで使いやすい ／
SWELLのCSSコードの貼り方
SWELLをCSSでカスタマイズする場合、コードを記述する場所が3パターンあります。
- 管理画面内のカスタマイズにある追加CSS
- テーマファイルエディタのstyle.css
- 記事の編集画面下部「カスタムCSS ＆ JS」
まずはこれらコード記述場所についての違いを解説していきます。
1｜カスタマイズ「追加CSS」
サイト全体に反映させたい場合は、ここにCSSコードを貼るのが一般的です。
と進むと、コード記述箇所があらわれます。
ここに記述すれば、横の画面にリアルタイムでデザインが反映されますので、とても便利です。
全ページに反映させるCSSコードを書くときは、まず「追加CSS項目」を活用してください。ただしここに記述すると、サイトのソースコードを見られたときに追加した分のCSSが丸見えになるというデメリットはあります。
だからといって特別に困ったことがあるわけではありませんが、あまり人から見られたくない場合などは、後述する「style.css」に書くと良いでしょう。
2｜テーマエディタのstyle.css
SWELLのテーマファイルに、直接CSSを記述することもできます。
と進むと、下記のような画面へ。
ここに記述すると、全ページで読み込まれます。
ここに書くと、ソースコードを見られたときにも表向きは見えないメリットがあります。style.cssを覗かれれば見られますが、それはもう仕方のないことです。
まずはカスタマイザーの追加CSS項目に書いて動作をチェックして、問題なさそうなコードはstyle.cssに移すような使い方が良いかと思います。
この方法でカスタマイズをする場合は、必ず子テーマを使用してください。
親テーマのstyle.cssを使ってしまうとテーマのアップデートがあった際にファイルが上書きされてしまうため、加えた変更点がリセットされてしまいます。
3｜SWELL編集画面下部「カスタムCSS ＆ JS」
SWELLには、各投稿ページや固定ページ編集画面の下部にCSSコードを入力する項目が用意されています。
ここの「CSS用コード」欄に貼ったCSSコードは、その記事だけに反映されます。
そのページにだけ反映させたいCSSは、この部分に記述すれば他のページでは読み込まれませんので、個別で書くと良いでしょう。
ブログカードのカスタマイズ
それでは、「内部リンク」のブログカードをカスタマイズしていきます。
変更前は以下のようなデザインです。
CSSを使いこなして、ブログカードのデザインをカスタマイズしましょう。以下は一例です。
タイトルを太文字にする
タイトルを際立たせるために、文字の太さを変えてみます。
.p-blogCard__title{
font-weight:600;
}枠線を変更する
枠を変えてみます。
.p-blogCard__inner:before {
border: 2px solid #FFC042; /* 枠線 */
background-color:#fff; /* 背景色 */
}上記コードのborderが枠線のことを指します。
続いて、2pxの部分が線の太さ、solidの部分が線の種類、#FFC042の部分が線の色となります。
枠線の太さは2px部分の数字を変更します。
細い線は数字を小さく、太い線は数字を大きくします。
線の種類を変えたい場合は、以下の表を参考にしてください。
| solid | 実線 |
|---|---|
| dashed | 粗い点 |
| dotted | 点線 |
| double | 2重線 |
| groove | 谷線 |
| ridge | 山線 |
| inset | 内線 |
| outset | 外線 |
背景の色を変更したい場合は、background-colorの後にお好みのカラーコードを入れてください。
内部リンクのキャプションのアイコンを、外部リンク用のアイコンに揃える
通常、内部リンクのキャプションに付いているアイコンは ですが、これを外部リンクと同じ に変更するCSSです。
.p-blogCard__caption::before {
content: "\e91a";
}上記コードの\e91aがアイコンを指定する部分となります。
他のアイコンに変更したい場合は、こちらを参考にしてください。
キャプションの文字色を変える
キャプションの文字色を変えることもできます。
.p-blogCard__caption {
color: #333333; /* 文字色 */
background-color: #fff; /* 文字部分背景色 */
}上記コードのcolorが文字の色となります。
紹介したコードを全て組み合わせると、
/******ブログカード装飾*******/
/* ブログカードタイトルを太文字に */
.p-blogCard__title{
font-weight:600;
}
/* ボーダー */
.p-blogCard__inner:before {
border: 2px solid #FFC042; /* 枠線 */
background-color: #fff; /* 背景色 */
}
/* キャプション */
.p-blogCard__caption::before {
content: "\e91a";
}
.p-blogCard__caption {
color: #333333; /* 文字色 */
background-color: #fff; /* 文字部分背景色 */
}というコードになり、できあがりはこのようになります。
枠線の一部をカスタマイズする
枠線の一部分だけを変更することもできます。
上で紹介したコードでは、borderと枠全体に指示がいくようにしましたが、border-topのようにすることで、その指定した部分だけを変更することも可能です。
例えば、下記のようなコードにすると
/* ボーダー 上下のみ */
[data-type=type1] .p-blogCard__inner:before {
border-top: solid 2px #5989cf; /* 枠線上 */
border-bottom: solid 2px #5989cf; /* 枠線下 */
border-right: none; /* 枠線右 */
border-left: none; /* 枠線左 */
}このようになります。
これを応用すると、こんなこともできます。
/* ボーダー 4色 */
.p-blogCard__inner:before {
border-top: solid 5px #FF0000; /* 枠線上 */
border-bottom: solid 5px #0000FF; /* 枠線下 */
border-right: solid 5px #FFFF00; /* 枠線右 */
border-left: solid 5px #008000; /* 枠線左 */
}さすがにこんなおバカなことをする人はいないと思いますが…
キャプションの非表示
キャプションを非表示にして、枠線だけにしたい場合は、以下のコードを追加です。
.-internal .p-blogCard__caption {
display: none;
}タイプ毎にカスタマイズする
SWELLでは、設定からブログカードのデザインを「タイプ１」、「タイプ２」、「タイプ３」に選ぶことができます。
それぞれのタイプを指定して、カスタマイズすることももちろん可能です。
例えば、上で解説した枠線のカスタマイズを「タイプ１」に反映させたい場合は、
[data-type=type1] .p-blogCard__inner:before {
border: 2px solid #FFC042; /* 枠線 */
background-color: #fff; /* 背景色 */
}と記述します。
１行目の頭に[data-type=type1]が入りました。
type1の数字をtype2にすれば「タイプ２」に、type3にすれば「タイプ３」に反映されます。
まとめ
コード改変は、WordPressの中でも中〜上級者向けの部分かもしれません。
焦らずゆっくりと、自分好みのページを作っていきましょう。
