BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» livedoorブログカスタマイズ タイトルの文字の大きさと太さを変更する方法

このエントリーをはてなブックマークに追加

livedoorブログカスタマイズ タイトルの文字の大きさと太さを変更する方法

   投稿日: 2016/08/11    投稿者:webコラム

e271c274fc94d2ade7b920388b1f9a12_s.jpg

こんにちは! ライターのモモタロウです。

今回は、livedoorブログカスタマイズ、ブログタイトルの文字の大きさと太さを変更してみましょう。

タイトル文字の大きさを変更しよう


20160729-1.jpg

livedoorブログのデフォルトでは、タイトルの文字の大きさと太さは上の画像のように設定されています。

まずは、文字の大きさを変えます。

20160729-2.jpg

livedoorブログにログインしたあと、
ブログ設定→カスタムJS→カスタマイズ→CSS編集画面に移動します。

CSS編集で、
/* ブログのヘッダー、タイトル、説明
----------------------------------------------- */
#blog-header {
 border-radius: 4px 4px 0 0;
 height: 160px;
 background-color: #287cba;
 background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%);
 background-image:    -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%);
 background-image:     -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%);
 background-image:         radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%);
 position: relative;
}
#blog-header-inner {
 padding: 20px;
}
#blog-title {
 color: #fff;
 font-size: 24px;
 font-weight: bold;
 line-height: 1.2;
 padding-bottom: 4px;
 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
#blog-title a {
 color: #fff;

-部分を探し出します。その中で、下のタグの一部を変更します。

#blog-title {
 color: #fff;
 font-size: 24px;
 font-weight: bold;

「 font-size:24px;  」の24の部分を
「 font-size:70px;  」のように70に変更します。
ここでは、極端に大きさを変更してみましょう。

プレビューボタンをクリックすると・・・

20160729-3.jpg

上の画像のように、文字の大きさを変更することができます。

設定するときは、作成したブログでどれくらいの大きさが最適かをプレビューで確認しながら決めていくとよいでしょう。

次に、文字の太さを変えます。

ブログタイトルの文字の太さを変える方法


先ほどの、
#blog-title {
 color: #fff;
 font-size: 24px;
 font-weight: bold;
部分の
「 font-weight:bold; 」部分を
「 font-winght:normal;  」とします。

プレビューボタンをクリックすると・・・
20160729-4 normal.jpg

上の画像のように文字の太さを変えることができます。

まとめ

いかがでしたか? 今回ご紹介したブログカスタマイズは、ごく一部です。

次回、さらにカスタマイズしていきましょう。


カテゴリ:

TOPへ