CMSサポートブログ
TOP > CMSサポートブログ > 【CMSブログ運営】ブログ機能にオシャレな見出しを設置しよう!

【CMSブログ運営】ブログ機能にオシャレな見出しを設置しよう!

カリキュラム 2015/10/26
CMSサポートブログ

こんばんわ。
CMSサポートblogです。

本日は少し、技術寄りなお話です。

オプションとなるブログ機能(メディア機能)をカスタマイズして、
見出し線など、見やすさを改善する方法です。

ブログも長文になるにつれて、見づらくなるので、
見出しを上手く活用しながら、記事を書いていきましょう。


<目次>

1. そもそも、ブログ機能とは?
2. 見出しの役割とは?
3. h2タグの設定方法
4. 色の変更方法
5. 設定方法が分からない場合は・・・


1. そもそも、ブログ機能とは?


CMS Blue Monkeyの有償オプションとなるブログ機能です。

サイト内に記事を多数展開することで、最終的にはアクセス超増を狙った
コンテンツマーケティングなどで活用されています。



参考:セッション数329%アップ!!企業ブログって実はすごい!?
http://manual.cms2.jp/blog/2015/06/15/12




2. 見出しの役割とは?


見た目の整理と、SEOの役割を担っております。


・見た目の整理



・SEOの役割

hタグと呼ばれページ内の各見出しを指します。

検索エンジンがページやサイト構造を把握する際にも見ており、
SEO対策を期待したいキーワードを含む形で設置するのが効果的となります。


閲覧者にも、SEOにも効果的な見出し機能なので、ブログを利用する際は、
活用しないのは単純に勿体ない状況と言えます。



ちなみに、ブログ機能でhタグを利用には管理画面上で、文字列を選択して見出し1~3と選択するだけす。





3. hタグの設定方法


カスタマイズ設定は2つのステップで完了できます。
作業所要時間は5分ほどなので、是非、試してみて下さい。

・ステップ1

以下のソースを管理画面上の【ページ】→【シェアパーツ管理】→【新規作成】にて挿入します。

<style>
.blog_subtitle02 {
font-size: 180%;
font-weight: bold;
line-height: 150%;
margin: 10px 0;
}

.detail_text h1 {
background:#c6c6c6;
color:#FFF;
font-size: 24px;
font-weight: bold;
line-height: 200%;
text-indent:13px;
margin:20px 0;
}

.detail_text h2 {
border-bottom: 5px solid #c6c6c6;
font-size: 20px;
line-height: 155%;
margin:20px 0;
}

.detail_text h3 {
border-bottom: 2px solid #c6c6c6;
font-size: 18px;
line-height: 150%;
margin:15px 0;
}

.detail_text h4 {
color:#1177C2;
font-size: 16px;
font-weight: bold;
line-height: 140%;
border-bottom: 1px solid #ddd;
margin: 12px 0;
}

.detail_text h5 {
font-size: 16px;
font-weight: bold;
line-height: 140%;
margin: 8px 0;
}

.detail_text h6 {
font-weight: bold;
margin: 5px 0;
}
</style>

このソースを画像のように張り付けて、シェアパーツを作成しておきます。
シェアパーツ名は分かり易ければなんでも良いです。





・ステップ2

管理画面上の【メディア配信】→【メディア設定】を開きます。

下記画像の様に<head>内編集領域を開き、上記で作成した%{BLOGCSS}% などの
BMタグを最下段に挿入します。



この設定を完了後に再構築をクリックすると、見出しに下線が入るようになります。



4. 色の変更方法


下線の色が気になる場合は、挿入するhtmlソースを一部変更するだけで可能です。

デフォルトでは、#c6c6c6 という値が入ってますが、こちらは色値となります。
値を変更することで様々な色を利用できるので、是非、試してみてください。

※自社サイトの色を知りたい時などは、Color Pickerなどのツールを使い、
自社のテーマカラーにあった値を利用しましょう。

色値などで、Googleで検索すると、色見本などありますので、
そちらもご活用ください。



5. 設定方法が分からない場合は・・・


設定方法が分からない際は、弊社CMSサポートチームにご相談ください。










CMSサポートマニュアル
ブログTOPページへ