ライブドアブログ(livedoor Blog)の使い方。デザインのカスタマイズ編

2020年6月19日

ライブドアブログ(livedoor Blog)の使い方。デザインのカスタマイズ編

先のブログ「ライブドアブログ(livedoor Blog)の使い方。デザインの設定方法」で、ブログのデザインの方法を紹介させていただきました。
その後、早速、見つかったのがレイアウトの不具合。既に投稿をしていたブログの画像などが切れるという問題が生じたため、色々と変更をする必要が出来ました。
ライブドアブログ(livedoor Blog)では、「デザイン/カスタマイズ」として紹介されております。その方法を、紹介いたします。

ライブドアブログ(livedoor Blog)のデザイン

当初のライブドアブログの純正画面の表示は、

ライブドアブログ(livedoor Blog)の使い方。デザインの設定方法

こんな感じだったのですが、デザイン変更をすることにより、

ライブドアブログ(livedoor Blog)の使い方。デザインのカスタマイズ編

こんな感じで、投稿していた画像が切れてしまいました。
自分で投稿をしている画像であれば、「画像の大きさの設定を変える」だけで問題ないのですが、広告サイズが指定されているようなアフェリエイトを使うとなると、画像が切れてしまいます。細かい設定は必ず出来るので、HTML文書などを少し書き変えればよいのですが、自動リンクなどは、そういった事が出来ない可能性もあります。また、都度画像サイズの設定を変える手間も増えるため、自分は、レイアウトを多少触ることにしました。

ライブドアブログ(livedoor Blog)のデザインをカスタマイズ

デザインをカスタマイズする画面へ移動をします。

    1. ブログ画面の左側 「ブログ設定」
    2. → デザイン / ブログパーツ設定にある 「PC」を選択
        すると、こんな画面へ移動します。

ライブドアブログ(livedoor Blog)の使い方。デザインのカスタマイズ編

    1. ここから、HTMLの知識が必要になってきます。
      1. 今回は、「カスタマイズ」のタブ内にある「CSS」にて、設定をすることになります。
    先のページでは、「デザイン選択」を選んで、デザインの設定しました。

ライブドアブログ(livedoor Blog)のCSSに使う「タグ」

ライブドアブログ(livedoor Blog)の説明が書かれているページ内に、「高度な使い方」というページがあります。
ここの「独自タグ一覧(変数)」という所で、 HTMLに記述してあるタグの一覧を確認することが出来ます。
タグ = 代数文字列 と言えば良いのでしょうか。。。
例えば、ご覧を頂いているこのサイトの上部に「らっきのおすすめ情報のブログ」と記載があります。
これは、livedoor Blogのタグ表記は=「BlogTitle」という、タグが割り当てられています。
CSSの設定画面の60行目くらいに
.blogtitle{
font-size:18px;
font-weight:bold;
padding:30px 30px 5px;
}
と記載があります。
この記述されている5行が、ディスプレイで表示される「らっきのおすすめ情報のブログ」見た目に影響を与えるわけです。
1行目の「blogtitle」や「BlogDescription」など=タグと覚えてください。

ライブドアブログ(livedoor Blog)のCSSの記述内容

ライブドアブログ(livedoor Blog)のCSSの設定画面の60行目くらいの、
.blogtitle{
font-size:18px;
font-weight:bold;
padding:30px 30px 5px;
}
と記載ですが、記述の意味は。
1行目 「blogtitle」について、{}の内の処理をしなさい。
2行目 「font-size」フォントサイズ=文字の大きさを、18ピクセルで表示
3行目 「font-weight」フォントウエイト=文字の濃さを、「bold」=nomalより少し太め(一般的な太さ)
4行目 「padding」パディング=文字を表示する際の隙間を、上、左右、下の順番で30px 30px 5pxの隙間を空けなさい
5行目 「}」指示の終了
という感じで記載がされています。
CSSは「ディスプレイの表示方法を設定して、全部のページで一律して規制する場所」と覚えてしまえば難しくないですよね。

ライブドアブログ(livedoor Blog)のCSSとは

CSSは、全部のページへ影響が出るレイアウトを触るページです。
他のブログサイトの作り方を紹介されていらっしゃる方は、

      • メニューバーの設定方法とか
      • ブログパーツの貼り付け方(カレンダーや広告)など
    1. ブログに表示させる機能を中心に紹介をされる事が多いのですよね。
    1. また、livedoor Blogでも、「高度な設定」の中で説明されているため、ここを触る頃には、複数のブログを書いてしまった後。。。とかになってしまう事が多いかもしれません。CSSの設定は、「CSSを触ると、全部のページに反映される」ので、最初のうちに設定をしておかないと、ホントは駄目なのです。
    ゆくゆくは、「CSS」と一緒に並んでいる、「トップページ」「関連記事ページ」「カテゴリアーカイブ」「月間アーカイブ」も触ることになりますが、まずは、「CSS」の設定をやっつけていきましょう!