記事の詳細


こんにちは、プレイジョブのえみかです。

今回はワードプレスの見出しについて。
「見出しが見出しっぽくない!!」とお悩みを解決していきます!

実際私もDynamicというテーマを使っていて、「全然見出しが見出しっぽくないやん!」「太字なのか見出しなのかわかりにくい!」「ユーザーに不親切やん!」「もっとイケてるデザインはないん?」と悩んでいました。笑

この記事では、見出しを見出しっぽく表示して、さらに新たな見出しのデザインも入れていきたいと思います!

ではさっそく見ていきましょ~~!

今こんな感じ・・・

今って、こんな感じですよね??

WEB上での見え方はこんな感じ

ws000133

HTMLはこんな感じ

ws000129

これだと、見出しっぽくないし、味気ないし、わかりにくい!

ここを変えていきましょう♪

HTMLのここを変えるだけ!

実は、見出しっぽいデザインにするのは、とっても簡単なことをするだけなんです!
触るところは、HTMLのところだけ!
「<h3>~</h3>」となっているところを、「<h3 class="news_headline1">~</h3>」と変えるだけなんです!
なぜ、そうするのかというと、スタイルシートにこう書かれているからなんです!

%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88

なので、記事のHTMLの部分でそれを指定してあげればいいのです!
逆に指定しなかったら、今までの味気ないデザインのままということですね。

これだけだったなんて!!!

Before & After

実際にBeforeの見出しとAfterの見出しを比べてみましょう♪

ビジュアルではこんな感じ。

ws000002

HTMLではこんな感じ。

ws000001

※後ほど説明しますが・・・「h3」のところは、見出し3(h3)で、「headline2」というところは、デザインの種類の番号(自分でつけたもの、デフォルトで入っているのはheadline1というデザイン)という意味です。

 

こんな仕組みになってる♪

デザインを表示させることはクリアですね!
ここでどんな仕組みになっているのか説明しますね!

h3

この、h3の部分は、見出しを表す部分なので、h2、h3、h4、h5など必要な見出しに変えましょう♪

headline1

headline1となっているところは、デザインの種類の番号です。スタイルシートに書かれているデザインを番号で指定します。
(デフォルトは1だけ。デザインを新たに増やす場合は、2、3と番号を変えて書き込む。)

 

デザイン変更&追加の方法

ここからは、スタイルシートに書かれているデザインの簡単なカスタマイズと、新しいデザインの追加について説明します!

デザインの変更

まずは、デザインの変更です!ここで紹介するものは簡易的なものですが、もっとカスタマイズしたり、新しいデザインにして追加することももちろんできます!

スタイルシートは、メニュー>外観>テーマの編集>CSSというふうに開くことができます。
その中にある、「見出し」というところを触っていきます!
※バックアップは自己責任ではじめにとっておいてくださいね!

例えば、見出しの文字の始まりの部分(頭の部分)に余白を入れていきましょう!
余白は、「padding:0 0 0 15px;」こんな感じで入れます。}の内側に入れてくださいね♪

.news_headline1{margin:80px 0 25px 0; border-left:8px solid #444; border-bottom:1px dotted #999; line-height:30px; font-size:1.2em;}

.news_headline1{margin:80px 0 25px 0; border-left:8px solid #444; border-bottom:1px dotted #999; line-height:30px; font-size:1.2em; padding:0 0 0 15px;}

色は、#のうしろの部分です。好きな色を入れてみてください♪

.news_headline1{margin:80px 0 25px 0; border-left:8px solid #444; border-bottom:1px dotted #999; line-height:30px; font-size:1.2em;}

.news_headline1{margin:80px 0 25px 0; border-left:8px solid #ff0080; border-bottom:1px dotted #999; line-height:30px; font-size:1.2em;}

他にも、線の太さや、枠の太さ、線の種類など、カスタマイズできる部分はたくさんあるので、試してみてくださいね!

デザインの追加

次は新しいデザインの追加です。
Dynamicのデフォルトでは1つしかデザインが入っていないので、大見出し、小見出し、などでデザインを少し変えたい時には不便です。。

そんな時は自分で作って入れちゃいましょう!
これは、先ほどと違って、新しいデザインをスタイルシートに入れていきます。

そんなややこしいことわからない!という方もいるかもしれませんが、私自身、HTMLとかCSSとか習ったことがないし、初心者なのですが、コードを見たらだいたい、どの部分がどこのことかわかりました!

例えば、「border-left:8px solid #444;」だと、「左の線。8pxっていう太さ。#444っていう色。」という予測をしたり、「line-height:30px;」だと、「見出しの高さが30pxっていう太さ。」とか。

わかる範囲でカスタマイズしたり、真似したりしてでも、結構いろんなことができます!
是非試してみてください♪

この時、headlineの後ろの番号は変えて入れていってくださいね!(例:1、2、3・・・)

デザイン例

ここで、いくつかデザインの例を紹介したいと思います!
※○のところには番号を入れてください♪

グレー・黒文字

.news_headline○{
background:#f5f5f5;
color:#000;
line-height:50px;
font-size:20px; 
padding:15px 15px 15px 15px;
border-radius:5px;
}

ws000004

線なし

.news_headline○{
margin:40px 0 20px 0;
border-left:8px solid #444;
line-height:26px;
font-size:1.1em;
padding:0 0 0 15px;
}

ws000005

線なし(グレー)

.news_headline○{
margin:40px 0 20px 0;
border-left:8px solid #777;
line-height:24px;
font-size:1.0em;
padding:0 0 0 15px;
}

ws000006

おわりに

いかがだったでしょうか?
見出しは記事を作成する中で、デザイン的にも機能的にもとっても大事な要素ですよね!
特に、見てくれる人のことを考えると、見やすくて、わかりやすい見出しがやっぱりいいですよね。^^
記事に合った素敵な見出しのデザインにしてみてくださいね♪

 


The following two tabs change content below.
えみか
プレイジョブのえみかです! 世の中の女性に希望を与えれる人になるため、日々積極的に挑戦して顔晴っています!^^

カレンダー

2017年5月
« 9月    
1234567
891011121314
15161718192021
22232425262728
293031  
ページ上部へ戻る