[ライブドアブログ]記事タイトル・記事本文のデザインをカスタマイズしよう

こんにちは。ユージーン(@Eugene_no2)です！

ライブドアブログの初心者向けに、デザインをカスタマイズする方法をまとめています。

このページでは、記事タイトルおよび、記事本文のデザインのカスタマイズについて解説します。

トップページへ

[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言 ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

まず、ブログのCSS編集画面を開こう

まず、ライブドアのブログ管理画面の【ブログ設定】→デザイン / ブログパーツ設定の【PC】→【カスタマイズ】→【CSS】と進みます。

ブログ全体のフォントを変更するには、主にこのCSSの中の記述をいじっていきます。

CSSって何？という方でも分かるように解説していますが、もう少し詳しく知りたいという方は、「HTMLとCSSのこれだけは知っておこう！」をご覧ください。

記事タイトルの書式をカスタマイズする

記事タイトルの書式をカスタマイズするには、CSSの中にある、

.article-title {
}
.article-title a {
}
.article-title a:hover {
}

※{ }内は省略しています。

という部分を見つけてください。

通常時の書式を変更する

難易度：★★☆☆☆

記事タイトルの通常時（カーソルを合わせたりしていない時）の書式を変更するには、

.article-title a {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
}

上の太字部分を変更していきます。

もし該当する行が無ければ、付け加えてもOKです。

• font-size：　文字の大きさを数値(px)で指定します。
• font-weight：　文字の太さを指定します。
  • normal：　普通
  • bold：　太字
• letter-spacing：　文字と文字の間隔を数値(px)で指定します。
• text-decoration：　文字の装飾を指定します。
  
  • none：　装飾なし
  • underline：　下線を引く

オンマウス（カーソルを乗せた状態）時の書式を変更する

難易度：★★☆☆☆

普段、Webサイトを閲覧する際、リンクが貼られている文字にカーソルを合わせた時（オンマウス）に、文字のデザインが変化することがあります。

例えばここにカーソルを合わせてみてください。

ほら、背景が変わりましたよね？

このように、タイトル行にカーソルを合わせた時に、デザインを変化させるには、

.article-title a:hover {
    background: #d3d3d3;
    color: #000000;
    text-decoration: underline;
}

この太字部分を変更していきます。

• background：　背景色を16進数カラーコード（#＋英数字6ケタ）で指定
  （参考：WEB色見本 原色大辞典）
• color：　文字の色を16進数カラーコード（#＋英数字6ケタ）で指定
  （参考：WEB色見本 原色大辞典）
• text-decoration：　文字の装飾を指定
  
  • none：　装飾なし
  • underline：　下線を引く

記事本文の書式をカスタマイズする

記事本文の書式をカスタマイズするには、CSSの中にある、

.article-body {
}
.article-body-inner h1,
.article-body-inner h2,
.article-body-inner h3 {
}
.article-body-inner h4 {
}
.article-body-inner blockquote {
}
.article-body-inner blockquote:before {
}
.article-body-inner img.pict{
}

※{ }内は省略しています。

という部分を見つけてください。

通常文字の書式を変更する

難易度：★★☆☆☆

記事本文の（見出しや引用でない）通常の文字の書式を変更するには、

.article-body {
    color: #000000;
    font-size: 14px;
    font-family:‘HGPｺﾞｼｯｸE’;
    line-height: 1.3;
}

上の太字部分を変更していきます。もし該当する行が無ければ、付け加えてもOKです。

• color：　文字の色を16進数カラーコード（#＋英数字6ケタ）で指定
  （参考：WEB色見本 原色大辞典）
• font-size：　文字の大きさを数値で指定
• font-family：　字体を指定
  字体（フォント名）を記述するとき、 Arial Boldのように２語以上のものや、MSゴシックのように日本語のフォントの場合は、“Arial Bold”, ‘MS ゴシック’のように引用符で囲う必要があります。
• line-height：　行の高さを数値で指定
  1.3とは、文字の大きさ（font-size）の1.3倍ということを意味します。
  130%または1.3emと指定しても同じ意味となります。
  または、font-sizeと同様に、〇pxのように指定することも出来ます。

【注意】ここで書式を指定しなかった場合は、全体で指定する書式が反映されることになります。詳しくは、「「全体の設定」と「個別の設定」の関係について知ろう」をご参照ください。（別ページに飛びます。）

見出しのデザインを変更する

難易度：★★★★☆

ブログ記事本文には、段落ごとに「見出し」を入れることが出来ます。

例えば、当ブログの見出しのデザインは、このような感じに３パターン（階層）の見出しを設定しています。

ちなみに、「見出し」は読者にとって読みやすくするだけではなく、SEOにも効果があります。見出しタグの使い方については、こちらのサイトが詳しくて分かりやすいです。

「見出しタグの使い方と絶対に知っておくべき注意点」（バズ部）

さて、見出しのデザインを変更するには、次のように記述されている部分をいじります。

.article-body-inner h1,
.article-body-inner h2,
.article-body-inner h3 {
    border-bottom:3px solid #7f7f7f;
}
.article-body-inner h4 {
    border-bottom:1px solid #ccc;
}

まず、最初に１点補足ですが、上の記述では、.article-body-inner h1, .article-body-inner h2, .article-body-inner h3　と、h1、h2、h3がカンマ区切りでつなげて書かれています。

これは、見出しh1、h2、h3　ともに border-bottom:3px solid #7f7f7f　というデザインだよ、という意味になります。

実際、ライブドアブログで用意されているテンプレートでは、このように見出しのデザインが同じになっているケースが多いです。

でも、そのままだと読者からはh2 も h3 もまったく同じに見えるので、ちょっと見づらいんですよね。

なのでオススメは、h2 も、h3 も読者が階層だと分かるように、デザインをカスタマイズすることです。

それぞれ別々にデザインをカスタマイズするには、

.article-body-inner h1{}
.article-body-inner h2{
    border-bottom:3px solid #7f7f7f;
}
.article-body-inner h3 {
    border-bottom:3px solid #7f7f7f;
}
.article-body-inner h4 {
    border-bottom:1px solid #ccc;
}

という感じに、それぞれ切り分けて表記すればOKです。

なお、ライブドアブログでは、記事タイトルが自動的に h1 になるはずです。そのため、h1 のデザインはいじる意味がなく、上のように h1{} というように何も指定せずに｛中カッコ｝を閉じておくといいと思います。

さて、具体的カスタマイズ方法ですが、特にCSSをよく知らない方には、正直難しいので、既に作られているデザインや、CSSが公開されているデザインをベースにするのがオススメです。

例えば、私の見出し（h2）はこんな感じに指定されています。

.article-body-inner h2{
    margin: 0 0 1.5em;
    padding: 0.8em;
    background: #78A839;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

図で説明すると、こんな感じになります。

続いて、私の見出し（h3）はこんな感じ。

.article-body-inner h3 {
    margin: 0 0 1.5em;
    padding: 0.8em;
    border-left: 7px solid #78A839;
    border-bottom: 2px dashed #78A839;
}

図で説明すると、こんな感じになります。

ちょっと難しいですかね。

上のコードをコピーして使えば、同じようになるので、もしよかったら使ってください！

また、見出しのデザインは、Webサイト上に事例が豊富にありますので、CSSコードをコピーしてくれば、そのまま使えます。

参考：シンプルなHTMLとCSSコピペで実装できるタイトルのデザインサンプル 50

また、コピーした上で、次の要素を変更するだけでも、オリジナリティが出ると思います。

• 背景色(background)、文字色(color)、線色(border)：　16進数カラーコード（#＋英数字6ケタ）で指定します。
  （参考：WEB色見本 原色大辞典）
• 線の位置：
  • border：　上下左右（囲み線）
  • border-top：　上線
  • border-bottom：　下線
  • border-left：　左線
  • border-right：　右線
• 線の種類：　次の中から選択
  • solid：　一重線（普通の線）
  • double：　二重線
  • dashed：　破線
  • dotted：　点線
    他にも、立体的に見せるような線の種類もあります。詳しくは「スタイルシートリファレンス（外部サイト）」が参考になります。

引用部分のデザインを変更する

難易度：★★★☆☆

引用部分とは、次のような部分を指します。

<blockquote></blockquote>で括ると、このように表示されます。<blockquote></blockquote>で括ると、このように表示されます。<blockquote></blockquote>で括ると、このように表示されます。<blockquote></blockquote>で括ると、このように表示されます。

引用部分のデザインをカスタマイズするには、

.article-body-inner blockquote { 
    background-color:#fafafa;  /* 背景の色 */
    border: 1px solid #fff;  /* 線の太さ、種類、色 */
}
.article-body-inner blockquote:before {
    color: #4169e1;　/*  引用符（ダブルクオーテーション）の色*/
}

上の太字の部分を変更していきます。

色については、16進数カラーコード（#＋英数字6ケタ）で指定します。
（参考：WEB色見本 原色大辞典）

線の種類については、

• solid：　一重線（普通の線）
• double：　二重線
• dashed：　破線
• dotted：　点線

あたりが代表的です。

他にも、立体的に見せるような線の種類もあります。詳しくは「スタイルシートリファレンス（外部サイト）」が参考になります。

写真（画像）部分のデザインを変更する

難易度：★★★☆☆

写真部分のデザインを変更するには、

.article-body-inner img.pict{
    border: 10px solid #8b4513; /* 枠線（太さ、種類、色）*/
    box-shadow: 0px 3px 8px rgba(51, 51, 51, 0.9); /* 影（幅、ぼかし距離、色、透過性） */
}

この太字の部分を変更していきます。

• border（枠線）の太さ：　数値(px)で指定
• border（枠線）の種類：
  • solid：　一重線（普通の線）
  • double：　二重線
  • dashed：　破線
  • dotted：　点線
• border（枠線）の色：　16進数カラーコード（#＋英数字6ケタ）で指定
  （参考：WEB色見本 原色大辞典）
• box-shadow（影）の幅とぼかし距離：　数値(px)で指定
  • 最初の数字：　水平方向への影の長さ
  • ２番目の数字：　垂直方向への影の長さ
  • ３番目の数字：　影のぼかし距離

    

• box-shadow（影）の色と透過性：rgba(0, 0, 0, 0) で指定
  • 最初の３つの数字：　影の色をRGBコードで指定
    RGBコードについては、「WEB色見本　原色大辞典」などで検索できます。
    色一覧のページでは、＃から始まるコードで書かれていますが、個別の色ページでは、RGBのコードも記載されています。
    
  • 最後の１つの数字：　色の透過性（透明度）
    透明度は、0（完全な透明）～1（不透明）の間で指定します。

まとめ

今回は、ライブドアブログの「記事タイトル、および記事本文」のデザインをカスタマイズする方法をまとめました。

このブログでは、初心者向けにライブドアブログのカスタマイズ方法を紹介しています。

別の部分のデザインのカスタマイズ方法もまとめていますので、合わせて参考にしてください。

トップページへ

[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言 ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

では、今日も頑張らずに楽しんでいきましょう～！