こんにちは😀広瀬ユキです。
今回は、WordPress有料テーマ【JIN】を使っている方向けに、ブログのデザインをカスタマイズする方法をご紹介します。
まず押さえておきたいのが、ブログのデザインをカスタマイズする＝ブログのデザインを自由に変更する、アレンジする、という意味です。
ブログのデザインは、CSSに指示を入れることでカスタマイズすることができます。
WordPress有料テーマ【JIN】には、「追加CSS」の欄があり、そこにCSSのコードを入力することで、もとのデザインから自分の好きなデザインに変更することができます。
WordPress有料テーマ【JIN】を使っている方向けの記事です。
CSSとは・・・？
CSSとは、プログラミング言語の一種で、Webページの配置や見栄えなどを構築するための言語のこと。Webページの装飾・デザインを作るために必要な言語です。
言語・・・？と言われると、いまいちピンと来ませんが、Webページ上の「日本語」や「英語」や「フランス語」といった感じですね。
また、CSSはCascading Style Sheetsの略で、スタールシートとも呼ばれます。
Webページの基本構造はHTMLとCSSでできています。
家づくりで例えると、HTMLがWebページの骨組みで、CSSがWebページの外装や内装となります。
Webページ ＝ HTML + CSS
子テーマをインストールしよう！
カスタマイズする前に、まず、子テーマをダウンロードしましょう。
- ↓こちらのページを下へスクロールして、子テーマをご自身のパソコンにダウンロードします。
- ↓こちらのページの要領に従って、子テーマをWordPressにインストールし、有効化しましょう！
親テーマのデザインを特に大きく変更したくない、する必要がない場合は、子テーマをダウンロードしなくてもOKです。
方法①カスタマイズ画面からCSSを追加する
ひとつめに、カスタマイズ画面からCSSにコードを追加する方法についてご紹介します。
- WordPressの編集画面から、「外観」→「カスタマイズ」を開きます。
- 画面左の「追加CSS」を開きます。
※このとき、子テーマが有効化されていると、「現在のテーマ」の下に「jin-child」と表示されます。 - 「追加CSS」の欄に、カスタマイズしたいCSSのコードを入力します。
※入力したコードによって変更されたデザインは、右側にプレビューとして表示されるので、公開前に確認しましょう。 - 最後に、画面上部の「公開」をクリックします。
CSSでブログデザインのカスタマイズができました‼
方法②テーマエディターからCSSを追加する
もう一つの方法として、テーマエディターからCSSにコードを追加する方法をご紹介します。
- WordPressの編集画面から、「外観」→「テーマエディター」を開きます。
- 画面右側の「編集するテーマを選択」で「jin-child」を選択します。
※子テーマを使わない方は「JIN」を選択。非推奨 - テーマファイルは「スタールシート（style.css）」を開きます。
- 「スタイルシート（style.css）」にカスタマイズしたいCSSのコードを入力します。
- 最後に、画面下部の「ファイルを更新」をクリックします。
CSSでブログデザインのカスタマイズができました‼
編集後記
いろいろなブログのデザインがカスタマイズできるので、取り入れてみるとオリジナリティのあるブログができると思います。
☆クリックで応援お願いします☆