ブログ|プラグインを使用して見出しにデザインを設定する方法

Pocket

2020/07/22 執筆

無料のWordPressでプラグインを入れようと思ったら、有料版を購入するように進められます。そのため手書きでコードを入れる必要があります。しかし、せっかく有料版でWordPressを始めたのなら、プラグインを入れて見出しをデザインするのが早いです。

もくじ

  1. 見出しにデザインを設定する利点
  2. 見出しにデザインを追加するには
  3. その他これをやっておくと良い事
  4. 今回の記事のまとめ

見出しにデザインを設定する利点

見出しにデザインが設定されていない場合、記事の内容は白と黒で構成されることになるのでみにくいかもしれません。もちろん、文字に下線を引いたり、色をつけたりする機能は存在します。

しかし、見出しが白黒だけだと文字サイズは変わったにしても色をつけている状態よりは少しみづらく感じられる方もいらっしゃるかもしれません。それだけ、この作業は大事になってきます。

見出しにデザインを追加するには

Simple Custom CSS and JSを使用しています

私の場合、有料でブログを立ち上げているのでプラグインが使えます。今回は、有料のブログをお持ちで、プラグインも入れることが可能である方を対象として操作の案内を進めて参ります。

Simple Custom CSS and JSをコピーして検索窓に貼り付けてください!

Simple Custom CSS and JSの設定方法

プラグインをクリックして虫眼鏡マークをクリック
プラグインの検索にSimple Custom CSS and JSと入力
赤枠のプラグインをダウンロード
ダッシュボードの設定からAddQiktagをクリック
赤枠にコードを入力

見出し2を設定する場合

h2

<h2 id=”danraku2″>

</h2>

h2

見出し3を設定する場合

h3

<h3 id=”danraku3″>

</h3>

h3

見出し4も設定したい場合はhの語尾の数字を4へ変更します!

下までスクロールして変更を保存をクリック
外観からカスタマイズをクリック

ここまで設定を完了させた方、お疲れ様です。まずこれで、見出しを設定する前準備ができました。このままだと、まだ見出しのデザインコードを入れていないので設定完了ではありません。

ここまで設定を完了するとあと一歩です!

見出しにデザインを追加する方法

外観の項目から追加CSSをクリック
デザインコードを追加

私が使用させていただいているコードは下記です!

デザインが掲載されているサイトをみていただけると分かるように、コードがテンプレート化されています。そのため、こちらコードを貼り付けるだけになります。気をつけたいのが、どの見出しにデザインを追加するかによってhの後ろの数字が変わります。必ず、デザインを見ながら設定してみてください。

その他これをやっておくと良い事

私の場合、使用しているPCはMacになります。そのため、このコードをメモに記載して保存しておくことによって、デザインを変更した後などにもう一度貼り付けが可能になります。そのため、もし見出しのデザインを変えたくないのならコピーして保存しておく事をオススメします。

今回の記事のまとめ

今回は、いかにして見出しに色をつけるのか記事にしてみました。プラグインが入れられない場合は手打ちでコードを挿入するようですが、まだそこまで知識がない為記事にはできません。また、無料のWordPressでCSSコードを入れようとすると有料版にする事を促されます。

設定を間違えないようにご注意くださいね!

ブログランキング・にほんブログ村へ

4件のコメント

  • wordpress.comの場合、プレミアムプラン(有料)のさらに上のビジネスプランでないとプラグイン使えないまたいなんです。他のwordpress 使ってるサーバではまた、違うのか、気になってるところです^ ^;
    プラグインで色々拡張できるのは分かってはいるのですが。。。泣

    • ポロリ様
      コメントありがとうございます!
      レンタルサーバーが安く済むと思いますよ!
      私が使っているのはMixhostです!

      • yume aoi様
        ふむふむ。なるほどです。
        まずは、wordpress お引越しが可能かを前提に色々なレンタルサーバ屋さんに問い合わせてみます。mixhostも宣伝は多いので、魅力的ですね^ ^

        • ポロリ様
          たくさんサーバーがあるから悩みますよね><
          無料でたくさん記事を作っておいて移行させるのもオススメですよ!

コメントを残す

Translate »
%d人のブロガーが「いいね」をつけました。