JINカスタマイズ

【WordPress】【JIN】ブログのデザインをカスタマイズする方法:2種類【追加CSS】

こんにちは😀広瀬ユキです。

今回は、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

子テーマをインストールしよう!

カスタマイズする前に、まず、子テーマをダウンロードしましょう。

  1. ↓こちらのページを下へスクロールして、子テーマをご自身のパソコンにダウンロードします。
  2. ↓こちらのページの要領に従って、子テーマをWordPressにインストールし、有効化しましょう!

親テーマのデザインを特に大きく変更したくない、する必要がない場合は、子テーマをダウンロードしなくてもOKです。

方法①カスタマイズ画面からCSSを追加する

ひとつめに、カスタマイズ画面からCSSにコードを追加する方法についてご紹介します。

  1. WordPressの編集画面から、「外観」→「カスタマイズ」を開きます。
  2. 画面左の「追加CSS」を開きます。
    ※このとき、子テーマが有効化されていると、「現在のテーマ」の下に「jin-child」と表示されます。
  3. 「追加CSS」の欄に、カスタマイズしたいCSSのコードを入力します。
    ※入力したコードによって変更されたデザインは、右側にプレビューとして表示されるので、公開前に確認しましょう。
  4. 最後に、画面上部の「公開」をクリックします。

CSSでブログデザインのカスタマイズができました‼

方法②テーマエディターからCSSを追加する

もう一つの方法として、テーマエディターからCSSにコードを追加する方法をご紹介します。

  1. WordPressの編集画面から、「外観」→「テーマエディター」を開きます。
  2. 画面右側の「編集するテーマを選択」で「jin-child」を選択します。
    ※子テーマを使わない方は「JIN」を選択。非推奨
  3. テーマファイルは「スタールシート(style.css)」を開きます。
  4. 「スタイルシート(style.css)」にカスタマイズしたいCSSのコードを入力します。
  5. 最後に、画面下部の「ファイルを更新」をクリックします。

CSSでブログデザインのカスタマイズができました‼

編集後記

追記:画像に「ここにカスタマイズしたいCSSを入力する」と書いてありますが、正確に言うと「ここにカスタマイズしたいCSSコードを入力する」となりますので、ご理解のほどよろしくお願いいたします。

いろいろなブログのデザインがカスタマイズできるので、取り入れてみるとオリジナリティのあるブログができると思います。

【WordPress】【JIN】サイトアイコン(ファビコン)を設定する方法とGoogleの変更点【WordPress】有料テーマ【JIN】サイトアイコン(ファビコン)を設定する方法の解説と2019年5月22日にGoogleが公式発表した変更点について書きました。...
【WordPress】親テーマから子テーマにファイルを追加する方法【JIN】【Xserver】親テーマから子テーマにファイルを追加する方法について書きました。サーバーからWordPressにファイルをアップロードする方法としてもご覧いただけます。...
【WordPress】【JIN】ハンバーガーメニューの閉じるボタンが表示されないときの対処法:2種類【WordPress】【JIN】スマホのハンバーガーメニューの閉じるボタンが表示されないときの対処法について書きました。...

☆クリックで応援お願いします☆

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ