ブログの見出しを装飾して、簡単に使う5ステップを解説します

カスタム見出し方法

2016年12月5日WordPress使い方

ブログを見ていると、途中に見出しが入っていて、すごく見やすく書いてあるのを見かけることがあります。

しかも、すごくオシャレだったりしますよね。

A さん
私のブログも、オシャレな見出しにしたいなあ・・・
うえせい
できる方法をお教えしましょうか?
A さん
難しいんじゃないの?
うえせい
導入の時は、いろいろと操作はありますが、できるように説明しますね!

あなたのWordPressのブログにも、HTMLやCSSの知識がなくても導入できて、一度設定したらあとで使うのは簡単「ポチッ」とできる方法を解説します。

 

ブログの見出しをオシャレに装飾する方法

1.CSSを追記する場所を作る

CSSというのは、表示及びデザイン(文書の見栄え)等を指定するもの。

フォントの種類や文字の大きさ、色、行間の幅といった文書の装飾やレイアウトなどの情報全般を指定したファイルですね。

WordPressでは、だいたい「style.css」というファイルに書かれている場合が多いです。

しかし、見出しのオシャレに装飾する時に「style.css」に直接書き込んでしまうと、WordPressのテーマがアップデートした時や、WordPressテーマ自体を変えてしまった時などに、消えてしまいます。

これを避けるためにWordPressのプラグインを使います。

A さん
なんか難しそう
うえせい
大丈夫ですよ!プラグインを使えば、間違えても消せばいいだけなんです。

 

2.プラグイン「Symple Custom CSS」をインストール

symple custom css
これをインストールすると、WordPressテーマにある「style.css」などのファイル自体に変更を加えることなく、CSSを書き込めます。

つまり、初心者の方で、間違えた記述をしてしまっても、記述した内容自体を削除してしまえば、もとに戻すことが可能なんです。

「Symple cutom CSS」サイト

WordPressプラグインのインストール方法は、次のページをご覧ください。

 

3.見出しのデザインを探してきます

デザイナーさんなら、自分でデザインしたりしますが、ノンデザイナーさんの場合はインターネットにたくさん公開してあるものを使わせていただきましょう。

「見出し コピペ CSS」

「オシャレ 見出し CSS」

などと検索すれば、たくさんでてきますので、気に入ったものを使うといいですよ。

A さん
うえせいさんは、どうしてるの?
うえせい
下線をひくくらいなら、CSSに直接書いちゃいますが、インターネットを検索して使わせてもらう場合も多いですよ

 
▼ちなみに、このサイトはシンプルで使いやすい見出しが多くて参考にさせて頂いてます。

 

4.気に入った見出しをコピペします

気に入った見出し

気に入った見出しを見つけて、サンプルとして掲載して頂いているCSSをコピーします。

「symple custom CSS」をインストールしてあるので、「カスタムCSS」のメニューが表示されるようになっています。
カスタムCSS

ここを選択して、入力するスペースにさきほどコピペしたCSSを貼り付けます。

A さん
これで完成!?

このままでは、「h1」つまり「見出し1」という大見出しに適用してしまいます。

「h1」の部分を、今回は「mds1」と変更しておいてください。

ついでに、あとで何を記述してあるものかを、分かりやすくするために「/**********見出し**********/」という注釈をいれておくといいでしょう。

 

5.ブログの本文中で使う

あとは、装飾したい見出しにしたい文章を、次のタグで挟むだけです。

上記では、「h2(見出し2)」を使っていますが、この部分を「h3(見出し3)」や「h4(見出し4)」に変更してもOKです。

 

A さん
毎回タグを書いたり、コピペするのは面倒

うえせい
そんな時には、「Add Quick Tag」というプラグインを使うといいですよ!

「Add Quick Tag」を使うことによって、テキスト編集モードにしている時に「ボタンポチッ」で、装飾した見出しになってくれますからね。

 

【まとめ】見出しをオシャレにして、簡単に使う方法を紹介しました

うえせいイラスト

  1. プラグイン「Custom CSS」をインストールする
  2. 気に入ったデザインの「見出し」を見つける
  3. CSSをコピペする
  4. 使いやすいようにプラグイン「Add Quick Tag」に設定する
  5. 「ボタンをポチッ」で装飾された見出しになる

上記の5ステップで気に入ったデザインで装飾された見出しが簡単に使えるようになります。

設定の部分は少しむずかしい気もしますが、使うのは「ボタンをポチッ」だけですので、挑戦してみてください。

では、また。テリマカシ。

【関連記事】ブログを書く時は「小見出し」を付けると、人にもクローラーにも優しくなる理由

【関連記事】ブログ投稿記事の最適な長さの文字数と、長くなってしまった時の対処法

【関連記事】【Pixabay Images】ブログにイメージ写真を挿入するのに超便利なプラグイン

sponsored link

   
うえせいイラスト

この「うえせいやブログ」は、合同会社うえせいやが運営する自社メディアです。
【運営している人】
うえせい
【本名】
上原誠司(合同会社うえせいや代表社員社長)
【お仕事】
◯WordPressを使ったホームページの制作
◯自社オウンドメディア運営
◯中小企業向けITサポート
【好きなこと】
トライアスロンと自転車とアウトドアをこよなく愛しています。
詳しくは、コチラ

 

sponsored link

lineat

「この記事が気に入ったらLINE@で友だち追加をしよう!

合同会社うえせいやの最新情報をお知らせします。

友だち追加

2016年12月5日WordPress使い方

Posted by 合同会社うえせいや 代表うえせい