MENU
当サイトはテーマSWELL！
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
WordPressの始め方＆SWELL初心者向け実用・実践記事
Favorite Button
  1. ホーム
  2. 実践WordPress
  3. WordPress初心者へ！SWELLの小さなカスタマイズ！CSSコピペだよ

WordPress初心者へ！SWELLの小さなカスタマイズ！CSSコピペだよ

AD
実践WordPress
CSS SWELL カスタマイズ 初心者

超人気テーマ「SWELL」は、組み込まれている機能だけでもかなり自分好みのデザインにできます。

たくさんのSWELLユーザーがステキなサイトを作っているのを見て、刺激を受けるのも楽しみな部分です。

SWELLのCSSカスタマイズ

この記事は、SWELLの機能を使うカスタマイズではなく、SWELLに独自のCSSを追加して小さなカスタマイズをする方法です。

SWELL公式サイト

CSSを扱う練習にピッタリな気もします！

  • CSSコードをコピペで完成
  • メッチャ小っちゃいカスタマイズ
  • 意外と目立つ

独自CSSはSWELLのスタイルを上書きするだけなので、サイトが変になったらCSSコードの削除、これで元通り。

と～っても気が楽です。そして楽しい！

自分で設定したコードがサイトに反映された時の嬉しさ、達成感って半端ないですよ。

記事の内容（もくじ）

独自CSSコードの貼り方

CSSコードを貼る場所は3ヵ所（それぞれ使い方が違う）あります。

  1. 管理画面内のカスタマイズにある追加CSS
  2. 子テーマのstyle.css
  3. 記事毎のCSSカスタマイズ
    SWELL編集画面下部「カスタムCSS ＆ JS」
私のやり方
  1. 反映結果がわかるページを開いておく
  2. CSSを所定の場所にタイプまたはコピペ
  3. 予め開いているページで確認
    • ダメならCSSコードを即削除し保存
    • OKなら喜ぶ！

1｜カスタマイズ「追加CSS」

ここにCSSコードを貼るのが一般的です。

CSSはサイト全体に反映されます。

左メニュー → 外観 → カスタマイズ（最下段）→ 追加CSS

2｜子テーマのstyle.css

子テーマを使っている場合はこちらでも。

SWELLの子テーマは会員サイトのマイページからダウンロードできます（無料）。

3｜SWELL編集画面下部「カスタムCSS ＆ JS」

編集画面の下の方に「カスタムCSS ＆ JS」があります。

ここの「CSS用コード」欄に貼ったCSSコードは、その記事だけに反映されます。

ちょっと小技を利かせたページを作る時に便利です！

WordPress初心者へ！CSSカスタマイズのやり方〈編集＆反映〉

＼おしゃれで使いやすいテーマ／

SWELL公式サイト

カスタマイズのCSSコード

紹介するのは小っちゃい部分のカスタマイズです。

でも、こうしたらもっとページが活きる！と思って手を加えています。

ブログカードのタイトルをボールド＆リンク色にする

ブログカードのデザイン

ブログカードのタイトルをボールドにする

.p-blogCard__title{font-weight:bold;}

ブログカードのタイトルをリンク色にする

.p-blogCard__title{color:#0000de;}

※「#0000de」の部分はサイトに合わせて変更してください。私は当サイトのリンク色と同じにしています。

ネット初心者の中にはブログカードのリンク設定に気づかない人もいます。

リンク先あり！と思ってもらえるよう、タイトルをリンク色に変更しました。

（両方）タイトルをボールド＆リンク色にする

.p-blogCard__title{
font-weight:bold;
color:#0000de;
}

※「#0000de」の部分はサイトに合わせて変更してください。私は当サイトのリンク色と同じにしています。

  • タイトルをボールドに
  • テキストをリンク色と同じに

SWELLのブログカードは使い方がとても便利。

内部リンク・外部リンクを1機能で兼用しているので、わずらわしさがないです。

ちょっと物足りないのが、表示されたブログカードのタイトル部分が目立ちにくいです。

多くの読者は丁寧に記事を読まないと言われています（拾い読み）。だから抜粋文に威力をあまり感じていません。

なので、タイトルはしっかり見て欲しい、読んで欲しいと思っています。

目立て！タイトル !!

ブログカード「テキストリンクで表示する」アイコン・リンク色などの装飾変更

ブログカード「テキストリンクで表示する」装飾

「テキストリンクで表示する」アイコンの変更

アイコンを白抜き矢印に変更。

i.c-blogLink__icon{
background:#0000de;
}

i.c-blogLink__icon::before{
text-decoration:none;
content: "\e921" !important;
color:#ffffff;
}

※「#0000de」の部分はサイトに合わせて変更してください。

  • アイコンの背景色
  • アイコン指定
  • アイコンの色

アイコンを丸白抜き矢印にして「リンクをたどってね」とお願いするスタイルwww

「テキストリンクで表示する」タイトルを装飾 1

アイコンだけでは弱い気がして、更にしつこくアピールを試みる！

.c-blogLink__text{
text-decoration:none;
font-weight:bold;
line-height:2.2;
border-bottom: dotted 2px #0000de;
padding-bottom:3px;
}

※「#0000de」の部分はサイトに合わせて変更してください。

  • リンクの通常のアンダーラインを非表示
  • タイトルテキストをボールド
  • 行間
  • 独自のアンダーライン設定
  • テキストとラインの空き

「line-height」はタイトルが（スマホなどで）折り返した時に（行が重ならないように）必要なスペースを確保するためです。

タイトルテキストをボールドにして、その下に2pxのドットラインを付けました。

しつこすぎるかも？とは思いますが、画像が無い弱さを補いたくて…。

そしてさらに…爆

「テキストリンクで表示する」タイトルを装飾 2

リンク箇所にマウスを置いた時のアクションです。

とりあえず、タイトルテキストとアンダーラインをグレーにしてみました。

.c-blogLink__text:hover{
color:#999;
border-bottom: dotted 2px #999;
}

※「#999（＝#999999）」の部分はお好みでどうぞ。

PC表示の「目次」と「ページトップ」に背景色をつける

SWELLの「目次」と「ページトップ」ボタンは、設定画面で色指定できます。反映されるのは、輪郭と文字色です。

右下の便利なボタンなので、もう少し目立つようにしたいと思います。

「目次」「ページトップ」ボタン
.c-fixBtn{
color:#ffffff;
background:#68D6DD;
}

※それぞれのカラーをサイトに合わせて変更してください。

  • テキスト色を白に
  • ボタンの背景色

記事タイトルを少し強調

記事タイトルの装飾です。

記事タイトルのデザイン

SWELLにはカスタマイザーで見出し（H2、H3、H4）のデザインを選べます。

ですが、記事タイトルの設定画面はありません。自由にデザインしてね、という意味だと思います。

.c-postTitle__ttl{
border-top:9px solid #68d6dd;
border-bottom:1px dotted #ccc;
padding:18px 0 3px 0;
}

※それぞれのサイトに合わせて変更してください。

  • タイトル上のライン
  • タイトル下のドットライン
  • タイトル上下の空き調整

記事にするほどのカスタマイズではないかもしれませんが、CSSにあまり馴染んでいない時はこんなところから手を付けたら良いのではないかと思います。

初心者さん、頑張って～！　おばあさんも頑張りますwww

実践WordPress
CSS SWELL カスタマイズ 初心者
記事の内容（もくじ）