BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» livedoorブログカスタマイズ 見出し設定の方法

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

livedoorブログカスタマイズ 見出し設定の方法

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

a191f4592f20af62bc809513c041c9dc_s.jpg

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


今回は、livedoorブログカスタマイズ見出し設定の方法についてお送りします。

まずは、livedoorブログにログインします。

見出し設定してみよう


20160827-1.jpg

上の画像で、四角で囲った「定型文」をクリックします。

20160827-2.jpg

「定型文の管理」にページが変わったら、
「新しい定型文を作る」をクリックします。


20160827-3.jpg

定型文に上記を書き込みます。

<div style="padding: 10px 10px; border-color:#000000;
border-width: 0 0 1px 7px; border-style: solid; backgraound:
#F8F8F8;"><b>見出し</b></div>

20160827-3-1.jpg

これを、「見出し h1」としましょう。
最初の定型文の10px 10pxは、30px 30px とします。
また、1px 7pxは、 5px 35pxとします。

20160827-3-2.jpg

さらに「見出し h2」を作成しました。上の画像のように数字を変えます。

「見出し h3」は、最初に書いたタグを使用します。

<div style="padding: 10px 10px; border-color:#000000;
border-width: 0 0 1px 7px; border-style: solid; backgraound:
#F8F8F8;"><b>見出し</b></div>

20160827-5.jpg

「定型文の管理」に三つの見出し(ラベル)が作成されました。

20160827-6.jpg

実際に記事を書いてみます。

四角で囲った上の画像の定型文をクリックします。


20160827-7.jpg

お好みの見出しをブログに貼ります。

20160827-8.jpg

今回は参考に全部貼り付けてみました。

20160827-9.jpg

<h1>などは本来表示されません。あくまで参考です。
以下のようになります。

20160827-10.jpg

「見出し」文字の大きさは任意で変えています。

まとめ

タグ以降の記述を変えればカラーやデザインも変わります。

いろいろ試してみるのも良いでしょう!


カテゴリ:

TOPへ