tetoblog 初心者にもわかるブログデザインレシピ

【初心者必見】SWELL追加CSSを書く前に知っておきたいサンプルコード

広告
SWELL カスタマイズ
【初心者必読】追加CSSを書く前に知っておきたいサンプルコード

WordPressの有料テーマ「SWELL」を購入したけど、デザインを自分の好みにカスタマイズしたい！と悩んでいませんか？

「SWELL」では難しい知識がなくても、直感的にデザインをカスタマイズできる方法があります。

この記事では「SWELL」をダウンロードした後に自分好みのデザインにカスタマイズする前に知っておきたいサンプルコードを紹介しています。

この記事をおすすめしたい方
  • SWELLを使って簡単にデザインをカスタマイズしたい
  • HTML、CSS、PHPの知識がなくて諦めてる
  • お金をかけずに自力でデザインしたい

これを読めば、「SWELL」の追加CSS機能を使って簡単にデザインを反映させる方法が分かります！

テト

初心者にも優しく教えているので読んでみてください。

目次

SWELLの特徴とCSSカスタマイズの重要性

SWELLは、WordPressを使ったサイト作成ができる、とても人気のあるテーマの1つです。その特徴は、直感的に使えるデザインや、豊富なカスタマイズ機能にあります。

特に、CSSカスタマイズが可能で、サイトの外観を細かく変更できる点が大きな魅力です。

例えば、ヘッダーやフッターのデザイン、ボタンやリンクの色を自由に変えることができて、ユーザーのブランドにぴったり合ったデザインに仕上げられます。SWELLを使えば、HTMLやPHPに詳しくなくても、CSSだけで美しいデザインが可能です。

そのため、初心者にも使いやすく、SEO対策としても有利に働きます。

カスタマイズに必要な準備と基礎知識

CSSカスタマイズを行う前に、いくつかの準備が必要です。

まず、CSSの基礎知識を持っておくことが重要です。例えば、CSSとは「Cascading Style Sheets」の略で、ウェブサイトのデザインを変更するための言語です。基本的なCSSの構造やセレクタの使い方を学んでおくと、カスタマイズ作業がスムーズに進みます。また、SWELLテーマに慣れておくことも大切です。具体的には、SWELLのテーマ設定メニューや、カスタマイズできる部分を理解しておくと、変更を反映しやすくなります。最初は難しく感じるかもしれませんが、少しずつ学んでいけば問題なくカスタマイズが可能です。

子テーマで行うカスタマイズのメリット

「SWELL」でカスタマイズを行う際、子テーマを使うことが推奨されます。

子テーマを使用することで、テーマの更新があった場合でもカスタマイズ内容が失われる心配がありません。具体的には、SWELLの親テーマを更新しても、子テーマで行った変更はそのまま維持されます。また、子テーマを使うことで、カスタマイズ内容が管理しやすく、バックアップが取りやすいという利点もあります。

初心者でも簡単に導入できるため、最初から子テーマを作成しておくことをお勧めします。

テト

親テーマではなく子テーマを必ず「有効」にして使ってください。

基本的なCSSカスタマイズ方法

CSSコードを追加する手順

SWELLでCSSカスタマイズを行うには、まずCSSコードを追加する手順を理解する必要があります。

WordPressの管理画面から追加CSSに進みます。

WordPressの「外観」→「カスタマイズ」→「追加CSS」

操作手順 ↓

STEP
管理画面（ダッシュボード）を開く
STEP
外観 ＞ カスタマイズ の順にクリックする
STEP
カスタマイザーが開く
STEP
「追加CSS」をクリック

一番下段に「追加CSS」があります

STEP
CSSを記述するスペース

黄枠内がCSSを書いていくスペースです

黄枠内にCSSコードを直接入力することができます。

SWELL専用エディタ「追加CSS」とは

SWELLには、専用のCSSエディタ「追加CSS」が用意されていて、そこから直接編集ができます。これにより、テーマのスタイルを簡単に変更でき、カスタマイズがより直感的になります。

特に、カスタマイザーのおかげで視覚的な変更を反映させるために、リアルタイムでデザインがどのように変わるか確認しながら作業を進められるため、効率的です。

これにより、デザイン変更が失敗するリスクを減らすことができます。

テト

内容がリアルタイムで反映されるから確認しながら進められます。

簡単なデザイン変更の実例

例えば、ボタンの色を変更する場合、以下のようなCSSコードを追加します。

CSS
button {
  background-color: green;
  color: white;
}

これにより、サイト内のすべてのボタンの色が緑に変わり、テキストが白く表示されます。少しの入力でデザインを一新できるため、直感的に作業が進む点が魅力的です。

テト

ここからは例を出してデザイン変更のCSSを紹介してゆきます！

ヘッダーとフッターのデザイン変更

ヘッダー背景色の変更方法

ヘッダー部分のデザインを変更する際、背景色や高さを変えることが多いです。SWELLでは、以下のCSSコードを追加することで、ヘッダー背景色と高さを変更できます。

CSS
.header {
  background-color: #ebebeb;
  height:80px;
}

これにより、ヘッダーの背景色がグレーになり、高さが80pxに変わります。

ロゴの色に合わせて背景色を変えるとデザインセンスが光って見えます。

フッターの文字サイズの調整

フッター部分の文字サイズを変更するには、次のようにCSSを使います。

CSS
.footer {
  background-color: #ebebeb;
  font-size: 14px;
}

これで、フッター内の背景色がグレーになり、テキストの大きさを調整できます。

スマホで見たときに見えにくくなってしまうため、文字のサイズは小さくても12pxまでに留めましょう。

カスタムロゴの配置調整

カスタムロゴを調整したい場合、以下のCSSを使って位置やサイズを変更できます。

CSS
.custom-logo {
  max-width: 100px;
  margin-top: 10px;
}

これにより、ロゴのサイズや位置を変更できます。ロゴの配置を調整することで、サイト全体のバランスを取ることができます。

投稿ページのデザイン調整

記事タイトルのデザイン変更

記事タイトルのフォントやサイズを変更するために、以下のCSSコードを使用します。

CSS
.entry-title {
  font-size: 28px;
  font-weight: bold;
}

これにより、記事タイトルが大きくて強調された印象になります。ユーザーが最初に目にする部分なので、インパクトを与えるデザインにすることが大切です。

本文フォントと行間の編集

本文のフォントや行間を変更するためには、次のようなCSSを追加します。

CSS
p {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

これで、本文が読みやすくなるため、ユーザーが長時間サイトに滞在しやすくなります。

カテゴリラベルのカスタマイズ

カテゴリラベルをカスタマイズする場合、次のCSSを使います。

CSS
.category-label {
  background-color: #ff6347;
  color: white;
}

これにより、カテゴリラベルが目立つようにデザインされ、ユーザーが特定のカテゴリーにすばやくアクセスできるようになります。

ボタンデザインのカスタマイズ

ボタンの色と形状の変更

ボタンの色や形状を変更する場合、以下のようなCSSを使います。

CSS
button {
  background-color: #green;
  border-radius: 5px;
}

これで、ボタンが丸みを帯び、青い背景に変わります。ボタンのデザインをカスタマイズすることで、サイトのインタラクティブ性が向上します。

ホバー時の動きの追加

ボタンにホバー時の動きを追加するには、次のCSSを使います。

CSS
button:hover {
  opacity:0.7;
}

これにより、ボタンにカーソルを合わせたときにボタンが透過されます。

CTAボタンの特別なスタイル

CTA（Call to Action）ボタンのデザインを強調するためには、次のようなCSSを使います。

CSS
.cta-button {
  background-color: red;
  padding: 10px 20px;
  font-size: 16px;
  font-weight:bold;
}

これにより、CTAボタンの背景色が赤になり、余白もつきます。フォントサイズと太さを調整することで目立つようになり、ユーザーがクリックしやすくなります。

メニュー部分のカスタマイズ

メニューバーの背景デザイン変更

メニューバーの背景色を変更するためには、次のようなCSSコードを使用します。

CSS
.menu-bar {
  background-color: #ebebeb;
}

これで、メニューバーがグレーに変わり、サイト全体のデザインと統一感が増します。

CSS
.dropdown-menu {
  background-color: #666666;
}

これにより、ドロップダウンメニューの背景色がダークグレーになります。

選択中メニューの強調方法

選択中のメニュー項目を強調するために、次のようなCSSを追加します：

CSS
.menu-item.current-menu-item {
  color: blue;
}

これにより、現在選択されているメニュー項目が赤く強調され、ユーザーがどのページを見ているかが一目でわかります。

ウィジェットエリアの調整

サイドバー背景と枠線の変更

サイドバーの背景や枠線を変更するためには、以下のCSSコードを追加します。

CSS
.sidebar {
  background-color: #f8f8f8;
  border: 1px solid #fdfdfd;
}

これにより、サイドバーに優れた視覚的な区切りができ、サイトが整理されて見えます。

ウィジェットタイトルのデザイン

ウィジェットタイトルをカスタマイズする場合、次のようなCSSを使います。

CSS
.widget-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

これにより、ウィジェットタイトルが目立ち、ユーザーが重要な情報にすぐにアクセスできるようになります。

人気記事リストの装飾

人気記事リストをカスタマイズするには、以下のようなCSSを使います。

CSS
.popular-posts {
  border-left: 5px solid green;
}

これにより、人気記事リストに特別な装飾を加えることができます。

モバイル表示の最適化

レスポンシブデザインのCSS設定

モバイルデバイス向けに最適化するため、レスポンシブデザインを適用します。次のようなCSSコードで、モバイル用のデザインを設定できます。

CSS
@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

これにより、画面サイズに応じた最適なフォントサイズが設定され、ユーザーがモバイル端末でも快適に閲覧できるようになります。

特定デバイス向けのスタイル指定

特定のデバイス向けにデザインを調整するためには、次のようにCSSを書きます。

CSS
@media only screen and (max-width: 768px) {
  .menu-bar {
    background-color: gray;
  }
}

これにより、タブレット端末（横幅768pxまで）ではメニューバーの背景色がグレーに変わります。

タップ操作を考慮したデザイン変更

タップ操作を考慮したデザイン変更も重要です。例えば、タッチスクリーン向けにボタンを大きくするには次のようなCSSを使用します。

CSS
button {
  padding: 25px;
  font-size: 18px;
}

これにより、タッチスクリーンでの操作がしやすくなります。

注意点とトラブルシューティング

CSS変更が反映されない場合の対処法

CSS変更が反映されない場合、ブラウザのキャッシュクリアやリロードを試してみてください。また、エラーが発生している場合は、コードに間違いがないか再確認しましょう。

テト

cssは1箇所の誤字脱字が全体に反映します。「:」「;」「#」「.」の抜けや重複がないか要チェックです。

CSSの書き方に関するよくあるミス

CSSを書く際にセレクタの指定ミスや、スペルミスがよく見られます。正確な構文を守り、コードのミスを減らすことが大切です。

CSS
/*
｝を2つ書いてしまう
*/
h2 {
font-size:32px;
}
}

/*
:を;と打ってしまう
*/
h2 {
font-size;32px;
}

/*
}を最後に書き忘れる
*/
h2 {
font-size:32px;

作業を効率化するデベロッパーツール

追加CSSに記述していくために、ブラウザの開発者ツールがとても便利です。

Chromeのデベロッパーツールを使えば、リアルタイムでCSSを編集し、変更がどう反映されるか確認できます。

使い方を知りたい方向けにこちらで解説しています。

あわせて読みたい
【SWELL】追加CSSで自由にカスタムする方法を知ろう ブログサイトを自由にカスタムしたいけど、どうやってやるのか分からなくて困っていませんか？ SWELLの追加CSSを使えばおしゃれなブログサイトに変更することが出来ます…

まとめ

SWELLの追加CSSを使用することで、簡単に自分好みのサイトにデザインできます。

使用頻度が高いCSSを知れば、今回の記事だけである程度のデザインはカスタマイズできちゃいます。

よく分からなかった方は、ぜひ何度も読み返してみてください。

SWELL カスタマイズ
  • URLをコピーしました！

関連記事

目次