インターネット収入初心者さんはiesのグループ活動が最適!みんなで楽しく学び、スピード成功を体験!

記事の見出しデザインをカスタマイズして、WordPressブログ記事をスッキリ見やすくしよう!-後編- (【AddQuicktag】【Simple Custom CSS】)

Clker-Free-Vector-Images / Pixabay

どうも!塾長のカイエンです。

前回、”記事の見出しデザインをカスタマイズして、WordPressブログ記事をスッキリ見やすくしよう!”

ということで、ブログ記事での見出しについて、全般的なお話をしましたが・・・

↓↓↓↓↓

記事の見出しデザインをカスタマイズして、WordPressブログ記事をスッキリ見やすくしよう!-前編-

 

デフォルトの見出しだと、文字の大きさだけ変わっただけだし・・・

そう思った方もいると思います。

今回は、見出しをオシャレにしてみよう!をテーマに書いてみたいと思います!

見出しにオシャレは必要か?

必ずしも、必要ではないかもしれません。

しかし、読み手としては、色や見栄えが変わることによって、

前の文章から内容が少し変わるな!と察知することが容易になり、

記事全体が読みやすくなることがあります。

適度に見出しデザインを取り入れることによって、記事のリズムが良くなると言われたりもしますね。

ですので、見出し自身オシャレとは言わなくとも、

記事のセクションがここで変わるよ、と読み手にわかるようになれば、

文章がスッキリしますね!

では、それがわかりやすくなるように、

見出しのデザインを独自にカスタマイズできたら・・・

(文字の大きさだけじゃなく、デザインを変えられたら・・・)

そう思っちゃいますよね。

デザインを変更するには、CCSとかHTMLコードなどの知識が必要?

 

もちろん、このあたりの知識がある方が、簡単にデザインをカスタマイズできます。

「一から勉強するのはちょっと・・・なるべく簡単にデザインカスタムしたい・・・」

大丈夫です。

プラグインで作っちゃいましょう!!

 

【AddQuicktag】と【Simple Custom CSS】で見出しデザインをカスタマイズ!

まずは、二つのプラグインをインストールしていきましょう。

WordPressのダッシュボードでプラグイン→新規追加で、

2つのプラグインをインストールし、有効化しましょう!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-20-23-02-48

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-20-23-04-01

インストール&有効化が完了したら、次の手順へ!

 

WordPressの見出しのデザインをカスタマイズ!

 

では、実際にカスタマイズしていきましょう。

まずは、どんな見出しのデザインに決めましょう。

インターネット検索エンジン(Yahoo、Google)などにて、

“見出し デザイン サンプル”と調べると、

いろんな見出しのサンプルが公開されており、

CSSのコードが公開されていますので

そのようなサイトでご自分のお好みのコードを探しましょう!

 

オリジナルの見出し挿入ボタンを作成する!

 

オリジナルの見出しボタンを作成するために、

ダッシュボードの”設定”より”AddQuicktag”へいきましょう!

左部分、上下二つのラベル名には、”h3″と記入し、

右側終了タグには、”<h3 id=”danraku3″>”と”</h3>”

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-20-23-27-25

h4も、同じように作成します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-20-23-29-23

 

見出しデザインのCSSをコピーして複製する!

 

次に、先ほど作成した見出しボタンに、
ご自身が選んだデザインをつけます。

ダッシュボードの、”外観”→”カスタムCSS”へ進み、

Simple Custom CSSへ

先ほど作成したh3、h4を以下のように書きましょう。

h3#danraku3{
}
h4#danraku4{
}

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-20-23-44-44

そのあとに、自身が選んだ見出しデザインのCSSをコピー&ペーストします。

その時に、先ほど”<h3 id=”danraku3″>”というように、

h3は”danraku3″で条件を定義すると宣言しているので、

コピー&ペーストした部分で、

#以降の見出しタグソースの名前が違う場合は、

自分でつけた名前に変更してください!

それが完了したら、下に、”カスタムCSSの更新”ボタンがあるので押してください。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-21-21-53-31

カラーを変更した場合などは#以降を編集することで可能ですが、

今回は、見出しデザインをカスタマイズなので、

その説明は割愛します。

 

作成した見出しボタンを、実際に使ってみる!

 

こちらが、投稿の編集画面です。

見出しをつけたい文字列を選びます。

そして、AddQuicktagのプルダウンより、つけたい見出しを選びます。

2016-0921_%e8%a6%8b%e5%87%ba%e3%81%97%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab

この設定が完了したら、プレビューで見出しがちゃんと反映できているか書くにんしましょう!

私は、今回このような見出しを作ってみました!

2016-0921_%e8%a6%8b%e5%87%ba%e3%81%97%e5%ae%8c%e4%ba%86%ef%bc%81

先ほどのWordPress投稿作成画面で設定した見出しは

記事ではこのように表示されます!!

 

これで、見出しの設定をすることができようになりました!

見出しのレパートリーを幾つか持っておくことで、

記事の内容や、雰囲気に合わせて、見出しを変えてみるのも

良いかもしれませんね!

ということで、今回記事から、見出しを変えてみましたよ 笑

 

 

読んでくれたら、クリックで応援教えて下さい!

↓↓↓↓↓

初心者・お小遣い稼ぎ ブログランキングへ

 

 

こんなにおしゃれに、ブログをカスタム出来るなら、

私もエックスサーバーを借りて、WordPressでブログ作ってみようかな?

という方はこちらから!

↓↓↓↓↓
月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

The following two tabs change content below.
塾長のカイエンです。 生まれは九州は長崎県、今は神奈川在住です。 名の通り、カイエンに乗ることを夢見てインターネットビジネスにも取り組んでいます! 趣味は、ジム、クロスバイク、音楽(洋楽)です。 その他、サッカー、犬、お酒、美味しいものが好きで、よく食べ飲み歩きもします。 これからの時代、自分で稼げることが大事になってくると思い、 日々努力、勉強、実践で現在活動中です。 自分が勉強になったこと、気になったことなどブログ書いていきます。 一緒に頑張れる仲間も募集中です!宜しくお願いします。

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


たくさん交流を楽しもう!

無料!初心者はまずコレ!

有料級を無料で覗く!

脱初心者!プチリッチへゼロスタート

期間限定募集!

SEOといえば賢威

脱ノウハウコレクター!

風花初芽で成果を!

Infotopおすすめランキング

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