FC2ブログで見出しのカスタマイズをする


いつもFC2ブログをご利用いただきありがとうございます。
FC2ブログスタッフです。

FC2ブログでは、6000種類以上のテンプレートから好きなものを無料で利用することができますが、「他の人と被ってて嫌だなぁ。」「自分のブログに合ったテンプレートにカスタマイズしたい」という方も多いかと思います。

そこで今回は、ブログ記事を見やすくするために「見出しのカスタマイズ」について考えていきたいと思います!


「見出し」とは・・・?



「見出し」とは、「このブログでは~とい言った内容が書いてありますよ」と情報を分り易く整理するためのもので、「hタグ」と呼ばれるHTMLタグを使って設定します。hタグには「h1~h6」の6種類が用意されており、見出しの重要度によってhタグを使い分けます(h1が最も重要度が高く、h6が重要度が低い)。

entry_13a.png


「見出し」は日常を書き綴る日記系のブログではあまり使用されませんが、商品やサービスの紹介・歴史に関する記事などの情報系ブログでは「見出し」を用いることで情報を整理することができるので、読者にとっては読みやすいブログになります。

さらに、Googleなどの検索エンジンにとっても「見出し」はブログの内容を理解させるために重要な役割を担っており、検索順位を決める要因の一つでもあります。


CSSで見出しをカスタマイズしてみよう



見出しのカスタマイズは、ブログ管理画面の「テンプレートの設定」でCSSの編集を行うことで、見出しのデザインを変更することができます。


背景色付きの見出し


entry_13b.png
h1 {
background: #e6b422;/*背景の色*/
padding: 0.5em;/*文字周りの余白*/
}


文字を線で囲った見出し


entry_13c.png
h1 {
color: #333;/*文字の色*/
border: solid 3px #e6b422;/*線の太さと線の色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸←四角が良い場合は、この行を削除*/
}


下線付きの見出し


entry_13d.png
h1 {
border-bottom: solid 3px #e6b422;/*線の太さと線の色*/
}


点線がついた見出し


entry_13e.png
h1 {
color: #333;/*文字色*/
border-bottom: dashed 2px #e6b422;
}


ふせん風の見出し


entry_13f.png
h1 {
padding: 0.4em 0.5em;/*文字周りの余白*/
color: #333;/*文字の色*/
background: #ffffe0;/*背景の色*/
border-left: solid 5px #e6b422;/*左の線の太さと線の色*/
}


マーカー風の見出し


entry_13g.png
h1 {
background: linear-gradient(transparent 70%, #e6b422 70%);/*線の太さと線の色*/
}

上記は見出しのデザイン例になりますが、Googleなどの検索エンジンで「見出し デザイン」等と検索すると、いろんなデザインが掲載されています。中には無料で使っても構わないものもあるので、自分のブログに合ったデザインを探してみたり、時にはカスタマイズしてみるのも良いでしょう。


見出しのデザインが上手く反映されない可能性がございます。その際は、以下をお試しいただくことで解決される場合がございますので、お試しいただけますと幸いです。

・テンプレートのデザインを変更してみる
・記載したCSSの内容に誤りやタグの閉じ忘れなどがないか確認する
・別のブラウザーで表示を確認する
・ご利用ブラウザーのキャッシュを削除する

上記お試しいただいても問題が解決されない場合は、ユーザーフォーラムのページに投稿すると他ユーザー様よりアドバイスをいただける場合がございますので、そちらをご利用いただきますようお願い申し上げます。

▼ユーザーフォーラム>テンプレート・プラグインに関する質問
https://blog.fc2.com/forum_community/detail/12605/





FC2サービスでは、お客様からのご要望やリクエストを募集しております。
もし宜しければ、FC2ブログに関するご意見・ご要望を
下記のページからご投稿いただけますと幸いです。

▼FC2リクエスト
https://request.fc2.com/



FC2ブログに関してご不明な点がある場合は、
下記の専用お問い合わせフォームより詳細を添えてお問い合わせをお願いいたします。

▼FC2ブログお問い合わせフォーム
https://form1ssl.fc2.com/form/?id=15028

関連記事

【公式】FC2ブログスタッフ

FC2ブログの使い方やおすすめブログのご紹介など、FC2ブログのスタッフによる公式ブログです🐤

月間500億越えのPV数を誇るFC2サービスを使いこなして、ブログで情報発信していこう♪

FC2ブログ 公式チャンネルの公式Twitterも、フォローよろしくお願いします!



皆様の応援を心よりお待ちしております👌

web拍手 by FC2

最新記事

Yahoo!ブログからFC2ブログへお引越し登録の時にエラーが表示されたら 2019/04/18
まさかそんなところで!意外と気が付かなかった(かもしれない)関連記事の設定方法♪ 2019/04/11
FC2おすすめブログのご紹介♪『40代はハゲでした。』 2019/04/04
こんなに簡単!コメント欄表示/非表示を設定する方法 2019/03/28
301リダイレクトと302リダイレクト、違いと使い分け方について! 2019/03/21

公式ブロガー

FC2ブログの公式ブロガーとしてご活躍されているブロガー様のご紹介です♪


ブログ特集

検索フォーム