ウェブで食うぜ!やり遂げる!

このサイトで使っているテンプレートについて知りたいならコチラ

wordpressテーマELEPHANT(エレファント)の見出しデザインを変更する方法

 
  2017/08/14
ボレ
WRITER
 
elephantの見出しデザイン変更方法
この記事を書いている人 - WRITER -
ボレ

これまで色んなネットでの副業に取り組んだけど、ボレは最終的に専業アフィリエイターになったぜ!!これまでの経験とか現状とか、色々好き勝手書いてるぜ!!

詳しいプロフィールはこちら

ブログマーケッターjunichiさんが独自で開発・販売しているwordpressテーマelephant初心者でも玄人でも使いやすくて、オシャレで、読みやすくて、気遣いがあって、まるで女性を優しく抱きしめるjunichiさんがそのままwordpressテーマになったようなテンプレート。

そんなelephantですが徐々に使う人が増えてくることで似たようなデザインになりがちです。

そこで、見出しのデザインくらいは変えたい!!という人が多いかと思うので、elephantの見出しデザインを変える方法をご紹介致します。

見出しとは

そもそも見出しってなんですの??

私、本とか新聞の見出ししか知りまへん!!

ワイ

見出しも知らんのかい!!

wordpress使うなら、いや、ブログやるなら見出しは知っておきましょう。

見出しはウェブサイトの中ではとにかく重要や!!

ボレ

見出しとは、htmlの文法の一つである。

h1、h2、h3、h4と続いて行くもの。

数字が小さい方が見出しのレベルが高く、見出しは入れ子になる。

主にh1は各ページ内で一つのみ存在するもので、そのページの中で最も大切な文章である。

次にh2、その次にh3と続いていく。

elephantではh1はブログ記事のタイトルにあたる部分。

つまり、読者に対して伝えたい最も大切な文章である。

もちろんgoogleのロボットも、h1にあたる記事タイトルを最も大事な文章として認識する。

見出しの入れ子構造とは

見出しは入れ子になる。

そう言われても意味がわからない事があるかと思います。

実際にhtmlで書くとこんな感じです。

<h1>記事タイトルにあたるh1は文中に一回のみ出現する</h1>
h1は一回のみ出現するので実質記事中で設定するのはh2からです。

<h2>ここがh1の次に大事なh2の部分</h2>
h2はあだち充の漫画でもなければ元素記号でもないので要注意!!

<h3>これがh2の次に大事なh3の部分</h3>
h3は必ずh2の次に出現する見出しである。
文字の大きさやデザインにこだわりたいからと言ってh4を持ってくるのはhtmlの文法的にNG!!

h2の中身を更に細かく段落分けして書く場合に使うもの。

<h3>このようにh3が2回並ぶ場合もある</h3>
こんな感じでh2の中を細かく分けたい時やh3と並列の内容を書く場合はh3を連続で使う。

<h2>先ほどのh2と並列の内容を書くなら再度h2を使う。</h2>
何度も言うがh2はあだち充の漫画でもなければ元素記号でもない。
記事をわかりやすくするための見出しだ。

こんな感じで入れ子になるように使います。

見出しの構造は本を例に考えるとわかりやすい

実際に本の目次を例に見出しの構造を考えると非常にわかりやすい。

記事というもののタイトルは本のタイトルと同じと考えてください。

一つの記事で一つの本を書くようなイメージです。

ここでは、「これからのSEO内部対策本格講座」という本をお借りして説明させてもらいます。

これからのSEO内部対策本格講座

上記画像の本のタイトルにあたる部分がh1です。

本の目次
参照:これからのSEO内部対策本格講座

では、上記画像の「これからのSEO内部対策本格講座」の目次の一部をお借りして紹介します。

先ほど説明したように本のタイトルはh1です。

この目次をh2、h3などで表すと下記画像のようになります。

見出しの形式
h2の部分にサブタイトルがついていて若干わかりにくい本を選んでしまった事は多めに見て欲しい。

ただ、見出しは本の目次で例えるとこのような表示形式になります。

見出しデザインの変え方

早速肝心の見出しデザインの変更方法に入ります。

このサイトの見出しのように変更する方法を説明します。

今回目指すのは下記画像のような形です。

今回目指す見出しのデザイン

ちなみにウェブサイトの見た目(デザイン)を編集する際にはCSSというものを編集します。

CSSとは、カスケーディングスタイルシートの略。
通な人は、スタイルシートもしくはCSS(シーエスエス)と呼びます。

間違ってもわざわざカスケーディングスタイルシートなどとフルネームで呼ばないようにしましょう。

CSSのコードを記入する場所はココ!!

外観>CSS編集へ進みます。
cssを入力する場所

/****************************/
/* 見出し*/
/****************************/
.post h3 {
    border-left: none !important;
    border-bottom: 1px dashed #311615 !important;
    padding: 0 0 5px 0 !important;
    margin-top: 30px;
    font-size: 1.25em;
}
.post h3:before {
    font-family: "fontawesome";
    content: "\f069"; /* この部分を書き換える事でアイコンの変更が可能 */
    color: #427FE8; /* この部分を書き換える事でアイコンの色の変更が可能 */
    display: inline-block;
    margin-right: 5px;
}
.post h4 {
    border-left: none !important;
    padding: 0;
    margin-bottom: 10px;
    margin-top: 50px;
    background: none;
    font-size: 1.2em;
}
.post h4:before {
    font-family: "fontawesome";
    content: "\f02b"; /* この部分を書き換える事でアイコンの変更が可能 */
    color: #427FE8; /* この部分を書き換える事でアイコンの色の変更が可能 */
    display: inline-block;
    margin-right: 5px;
}

上記コードをコピペするだけで下記画像のようなデザインに変更されます。
今回目指す見出しのデザイン

コピペ・リライトは言語道断!!他人の記事は絶対にパクってはいけないよ。では記事をパクってはいけないと言っていますが、上記コードはご自由にお使いください。

アイコンを変更したい

今日からボレは!!のh3のアイコンはコメ印になっています。

このアイコンをハートや他のアイコンに変更する事も可能です。

fontawesomeのcheatsheetから好きなアイコンを選ぶことができます。
例えば、ハートにしたい場合はこのように入力します。
fontawesomeのハート
上記画像の「f004」の部分のみを「\」の後に記入します。

他のアイコンの場合も同じです。

下記のように変更します。

.post h3:before {
    font-family: "fontawesome";
    content: "\f004"; /* この部分を\f004に変えることでハートになる */
    color: #427FE8; /* この部分を書き換える事でアイコンの色の変更が可能 */
    display: inline-block;
    margin-right: 5px;
}

色を変更したい

上記コードのままだとハートにしたものの、青いハートになってしまいます。

そこで、色を変更します。
例えばピンクであれば「#FFC0CB」を入力します。

.post h3:before {
    font-family: "fontawesome";
    content: "\f004"; /* ここはさっき変えたハートの部分 */
    color: #F08080; /* この部分に希望の色コードを入力します。 */
    display: inline-block;
    margin-right: 5px;
}

まとめ

今回はwordpressテーマ、エレファントの見出しを変更する方法をご紹介しました。

このコードはエレファント用に書いたものですので、ストークやハミングバードで使用するとレイアウトが崩れる場合があります。

その際は下記リンクよりエレファントをご購入頂ければ幸いです。

>>エレファントを購入するならコチラ

エレファントを購入する決心がまだついていない場合は、下記記事を読んでエレファントの魅力を知ってください。

どうしてもハミングバードやストークでこのデザインを実装したいという場合は、記事下のコメント欄にあなたの思いを書いてください。

心が動かされればそのコードも別の記事で公開します。

この記事を書いている人 - WRITER -
ボレ

これまで色んなネットでの副業に取り組んだけど、ボレは最終的に専業アフィリエイターになったぜ!!これまでの経験とか現状とか、色々好き勝手書いてるぜ!!

詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© 今日からボレは!! , 2017 All Rights Reserved.