ライブドアブログ(livedoor Blog)の使い方。カスタマイズ編-CSS設定

2020年4月21日

ライブドアブログ(livedoor Blog)の使い方。カスタマイズ編-CSS設定

先のブログ「ライブドアブログ(livedoor Blog)の使い方。デザインの設定方法」や、
「ライブドアブログ(livedoor Blog)の使い方。デザインの設定方法-カスタマイズ編」
で、「デザイン設定」と「カスタマイズのCSSが与える影響の一部」を紹介させていただきました。
ここから、少しホンキモードで、設定方法を紹介していきます。

ライブドアブログ(livedoor Blog)に必要なHTML・CSSの知識

HTMLは、プログラムではないので、簡単です!
最初の取り掛かりどころか、ホームページ製作者でも、HTML言語は、ほぼコピペです。
なので、皆さんも、書いてある内容を大体把握して、コピペしまくってください。慣れればなれるほど、HTMLの知識はついてきますので。

おすすめのHTMLのホームページ

自分がよく参考にさせていただいているHTMLのホームページは、

などがあります。
HTML言語が何ぞや?って時から参考にさせていただいており、インターネットで、

  • HTML 初心者
  • HTML 基本
  • HTML 入門
  • HTML 言語

など、色々と調べて色んなページを見て、作って、修正して、見直しての繰り返しで知識を得ました。
プログラム言語ではないので、知識を得れば、誰でも使える簡単なものなので、判らなければ「ぐぐる」「やふる?」して調べてみてください。きっと、2~3週間程度で、簡単なページは作れますから。

ライブドアブログ(livedoor Blog)のCSS 画面サイズの変更

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

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

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

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

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

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

こんな感じで、投稿していた画像が切れてしまいました。
デザインをカスタマイズする画面へ移動をします。
ブログ画面の左側 「ブログ設定」
→ デザイン / ブログパーツ設定にある 「PC」を選択

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


「CSS」より、画像の大きさを指定していている箇所は、30行目くらいより下の
/*—————————————————–*/
#header{
background:url(http://parts.blog.livedoor.jp/img/usr/new_default_blue/bg_head.gif) repeat-x 0 100%;
font-size:12px;
}
#header a{color:#00497d;}

#container{
width:1195px;/*795*/
margin:0 auto;
background-color:#fff;/*background:url
(http://parts.blog.livedoor.jp/img/usr/new_default_blue/base.gif) repeat-y;*/
padding-bottom:100px;
text-align:center;
word-break:break-all;
}

で、数字の着色を変えているところです。「/*」~「*/」で括弧してある箇所は、表示に関係のない「メモ」などを記載しています。例えば、
#container{
width:1195px;/*795*/
のところは、「元々795pxの記載があった箇所を、1195pxに変えた」ということが自分で判るように、
/*795*/と記載をしています。
width = 横幅の設定ですので、
795pxの箇所を、1195pxに変更することにより、表示される幅を広げて、画像が消えないようにしました。

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

参考画像は白色ですが、着色を指定している、「background-color」で色を指定をしたりします。
「HTML color」と調べると、色の一覧表で「色コード」を調べることが出来ます。<br>
レイアウトは、作者の絵心で幾らでも可愛くしたり、かっこよくしたり出来ます。
/*background:url(http://parts.blog.livedoor.jp/img/usr/new_default_blue/base.gif) repeat-y;*/
は、livedoorBlogのCSSの担当の方のご好意で、
「background=画面の後ろの表示を、urlで指定した、色・画像の指定をし、y=縦方向に repeatしてくださいと指定することも出来ますよ。」と、教えてくれているメモ書き/**/になります。