[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け）

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

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

私はこのブログを始めた頃はWebに関して全くのド素人でしたが、今ではある程度自在に、ライブドアブログのデザインをカスタマイズできるようになりました。

こちらが、ライブドアブログのテンプレート初期状態からのビフォーアフターです！

既にWebデザインに詳しい人には、大して役に立つ情報ではありませんが、

HTML？CSS？なにそれ？

よくわかんないけど、ブログのデザインをカスタマイズしてみたい！

という方にとっては役立つはずです。

（また、随時アップデートしてクオリティを上げていく予定です。）

ライブドアブログのデザインのカスタマイズ方法

ライブドアブログでは、ブログのデザインをカスタマイズできる要素が、山ほどあります。

このサイトでは、その中でも基礎的かつ、よく使われそうなカスタマイズ方法を、厳選してまとめています。

厳選とはいえ、全体の背景やレイアウトから、メインの記事部分、サイドバー部分、フッター部分までと幅が広いため、ブログの中の各パーツごとにページを分けて、構成しています。

※各ページへと飛ぶ前に、この下にある、「カスタマイズにおける注意事項」をぜひ一読いただくことをオススメします。

カスタマイズにおける注意事項

さて、このサイトの情報を参考にして、ご自身のブログのデザインをカスタマイズしていただくにあたって、３つほど注意事項があります。

テンプレートによる違い

2015年12月現在、ライブドアブログには、400を超えるデザインのテンプレートが用意されています。

このサイトに掲載しているカスタマイズ方法については、実際にいくつかのテンプレートで、問題なくカスタマイズできることを確認済です。

しかし、どうしてもテンプレートによっては、CSS（あとで解説します。）の書き方に違いが見られるなど、テンプレート固有の問題が存在します。

なるべく共通性の高いカスタマイズ方法のまとめを目指していますが、全てのテンプレートで、このサイトに載せた方法通りにはカスタマイズできない場合がありますので、どうかご了承ください。

スマホ向けページは非対応

このサイトでまとめているカスタマイズ方法は、CSSという言語の編集によって、デザインをカスタマイズする方法がメインです。

しかし、そもそもライブドアブログでは、

スマートフォン版のデザインは直接CSSを編集することができません

（引用：ライブドアブログのヘルプ）

つまり、このサイトで紹介するカスタマイズ方法は、パソコン向けページにのみ対応したものであることをご理解ください。

（ライブドア担当者さま、スマホも出来るようにして欲しいっす・・・）

編集前にバックアップを忘れずに

ブログのデザインをカスタマイズする際、消してはいけない部分を誤って消してしまった、編集していたらデザインが崩れ、元に戻せなくなった、ということが起こるリスクがあります。

そうならないために、デザイン（CSSとHTML）のバックアップを取るようにしてください。

バックアップの方法については、ライブドアブログの公式ヘルプをご参照ください。

合わせて読みたい

デザイン保存機能を利用する – ライブドアブログのヘルプ（PC向け） ライブドアブログでは、カスタマイズしたデザインを保存しておくことができます。

注意事項は以上です。

なるべく正しい情報を提供すべく努力しておりますが、あくまで個人の情報サイトであり、カスタマイズは自己責任の範囲で参考にしていただけますと幸いです。

HTMLとCSSのこれだけは知っておこう！

さて、このサイトでまとめているカスタマイズ方法は、CSSというものをいじり倒します。

CSSが何なのか良く分かっていなくても、デザインのカスタマイズは出来るようにまとめています。

ですが、CSSについて何となく知っているだけでも、理解度が変わってくるかと思うので、全く知らないという人は、ぜひお読みください。

HTMLは文書、CSSはデザイン

※詳しい方が見たら、めっちゃツッコミどころ満載の説明かも知れませんが、詳しく知る必要のない初心者が、最低限イメージを持ってもらうための、私なりのベストな説明です。ご容赦ください。

例えば、次の画像は、このブログの記事「内閣支持率はなぜ新聞によって違うのか？」の一部を、スマホで見たページと、パソコンで見たページとを比較したものです。

見ての通り、書いてある内容は全く一緒です。

でも、例えば「３．質問の聞き方」という見出し部分や、表に塗られている色は違いますよね？

実は、私たちがふだん何げなく見ているWebサイトは、ざっくり言うと大きく２つの要素で成り立っているんです。

一つは、文書。もう一つは、デザインです。

つまり、このスマホで見たページと、パソコンで見たページとでは、文書は一緒だけど、デザインが違うんです。

そして、この文書のことをHTMLといい、デザインのことをCSSと言います。

もし文書（HTML）だけしか情報が無いとしたら、コンピュータはその文書を、どんなデザインで、どのような位置関係で配置すればいいか、理解することが出来ません。

そこで、デザイン（CSS）の出番というわけです。CSSのイメージとしては、例えば、

見出し部分は、緑色に塗りつぶした角の丸い四角の中に、白い太字で表示してね！それから見出しと次の行の間は、１文字分、間隔をあけること！

という命令をするわけです。

そうすることでコンピュータは、見出し部分のデザインを理解し、CSSの指示通りに、Webサイトを表示してくれるようになるわけです。

何となく、HTMLとCSSの役割について、イメージできたでしょうか？

このサイトで紹介しているブログデザインのカスタマイズ方法は、主にCSSを編集するものです。

つまり、文章を変えるわけではなく、文章を表示するデザインを変える作業なんだ、ということが理解出来れば、まずは十分かと思います。

ああしたい、こう変えたいが手にとるようにわかる CSS基礎

posted with ヨメレバ

赤間 公太郎,原 一宣。,藤川 麻夕子,山本 和泉 エムディエヌコーポレーション 2015-07-17

Amazon

Kindle

楽天ブックス

崩しちゃいけないCSSの基本文法

さて、CSSには、崩してはいけない基本文法があります。

これを崩してしまうと、せっかく編集したCSSがきちんと機能してくれなくなってしまいますので、くれぐれもご注意ください。

といっても、そんなに難しくはありません。

CSSの記述の例を見てみましょう！

#blog-title {
    font-size: 30px;
}

この記述の意味は、

ブログタイトルのフォントサイズ（文字の大きさ）を、30px（ピクセル）にしろ！

ということです。何となくイメージ出来ますよね。

安心してください、基本的に全てこの形です。つまり、

• どの部分の、（ブログタイトルの、メニューバーの、）
• 何を、（文字の大きさを、背景を、）
• どうしろ（30pxにしろ、灰色にしろ）

という形です。

なお、見やすさの観点から、例に挙げたように改行したり、半角スペースを入れて書かれるのが一般的ですが、改行はコンピュータには無視されるので、実際にはこれと同じ意味になります。

#blog-title {font-size: 30px;}

ここで特に初心者の方が注意して欲しいのは、

• ｛｝（中カッコ）
• :（コロン）
• ;（セミコロン）

を抜かさないようにすることです。それだけで、書いた内容がきちんと反映されなくなってしまいますので。

CSSに関して、ここまで分かって入れば、ブログのデザインをカスタマイズするには十分だと思います。あとは実践あるのみです！

カスタマイズ方法の目次へ戻る

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