ライブドアブログを1カラムレイアウトに自力でカスタマイズ

ワードプレスの方で使用している独自ドメイン(guchiyama.com)に対してサブドメインを追加し、そちらをライブドアブログの方で使用するという形にしてみたいと思った。...

ライブドアブログで日記をメインに書くのにサイドバーのレイアウト考えるとかめっちゃ面倒だったので、1カラム(ワンカラム)レイアウトで写真と文章だけが縦に並ぶシンプルなデザインにしたかった。しかし、それに該当するテーマをいちいち探すのもめんどくさい…(というか、存在しているのだろうか?) そこで、ライブドアブログのデザインを自力で1カラムへカスタマイズしてみることにした。

エンジニアでもWEBデザイナーでもない俺だが、ドットインストールという動画学習サイトで「HTML入門」と「CSS入門」までを完了してみたところ、自分が望むカスタマイズをするために「どこの値を変えるべきか」ということが何となく分かるようになった。今回のように単純な変更であれば、HTML/CSS文法を全て理解しておく必要もなく、手を動かしてみると意外と簡単。

とはいえちょっとかじった程度ではやはり門外漢なワケで、専門の人からすればもっと効率のよい方法があるのかもしれないし、消しちゃいけないコードを実は消してしまったりしているのかもしれない。この記事では「俺が何をやったか」と「その結果こうなった」という事実を紹介するが、真似される場合は自己責任にてお願い申し上げます。

Before ⇒ After を確認する

まずは結論からと言うことで、実際にライブドアブログを1カラムにしてみたその「Before ⇒ After」をご確認頂きたい。

Before

After

全体の色彩や文字の大きさ、見出し(h2)のデザインなど色々カスタマイズを施しているが、これらは他サイト(後述)を参照すれば大体分かる。以下では、ライブドアブログを1カラムにするカスタマイズの内容に絞って紹介をしたい。

 

1カラムにするカスタマイズの内容

ライブドアブログのデフォルトテーマを、1カラムにカスタマイズするにあたりやったことは大きく分けて3つである。

  1. サイドバーを消して1カラムに(CSS修正)
  2. サイトの幅を狭くする(CSS修正)
  3. 余計なブログパーツを消す(ブログパーツ削除とHTML修正)

 

カスタマイズを実践する

大前提として、「ライブドアブログはどこからカスタマイズを行うのか?」についても一応説明しておく。

ライブドアブログのマイページより「ブログ設定」=>「デザイン / ブログパーツ設定」メニューの「PC」=>「カスタマイズ」タグを選択する↓

このページでCSSとHTMLのコードをいじるのが、ライブドアブログ・カスタマイズの主な作業である。

 

1. サイドバーを消して1カラムにする(CSSの修正)

上記ページの「CSS」タブを選択肢、デフォルトテーマの下記コードを確認しよう↓

/* 2カラムレイアウトのとき */
body.layout-2col #content {
	background: url(http://parts.blog.livedoor.jp/img/usr/default_2012/common/bg_side.png) repeat-y #fff;
}
body.layout-2col #main {
	width: 580px;
}
body.layout-2col #main-inner {}
body.layout-2col #sidebar {
	padding: 20px;
	width: 200px;
}
body.layout-2col #sidebar-inner {}

/* 右サイドバー */
body.layout-2col.sidebar-right #content {
	background-position: 100% 0;
}
body.layout-2col.sidebar-right #main {
	border-radius: 0 0 0 4px;
	float: left;
}
body.layout-2col.sidebar-right #sidebar {
	border-radius: 0 0 4px 0;
	float: right;
}

/* 左サイドバー */
body.layout-2col.sidebar-left #content {
	background-position: 0 0;
}
body.layout-2col.sidebar-left #main {
	border-radius: 0 0 4px 0;
	float: right;
}
body.layout-2col.sidebar-left #sidebar {
	border-radius: 0 0 0 4px;
	float: left;
}

…この部分を、全て削除すればOK。

実行した後のサイトプレビュー↓

つまり、実質この作業だけでも、ライブドアブログの1カラム化は完了したと言って過言ではない。

 

2. サイトの幅を狭くする(CSS修正)

しかし、1カラムのシンプルなサイトデザインでも横幅が広すぎると読みにくく感じてしまう。個人的には540px~600pxくらいが望ましい。そんな自分の感覚を信じて、全体的にサイトの幅を狭くしてみた。

デフォルトテーマの下記コードを修正する↓

#container {
	border-radius:4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	margin: 0 auto;
	width: 940px;
}

俺の場合は「width」の値を、「940px」から「600px」へ変更。この時、文字を全角にしてしまったり、 : や  ; や  } の記述を消してしまったりしないように注意しよう。

変更後のコードと、サイトプレビュー↓

#container {
	border-radius:4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	margin: 0 auto;
	width: 600px;
}

サイト全体の幅が狭くなった!

しかしなんだか、記事のタイトルや記事本文などコンテンツの中身までが中央に寄ってすぼまっている感があるので、ここも自分好みの幅にカスタマイズしていく。変更を加えるのは下記コード↓

#main {
	padding: 20px 60px;
}

padding」の値を、「20px 60px」から「20px 30px」へ変更。

変更後のコードと、サイトプレビュー↓

#main {
	padding: 20px 30px;
}

個人的にはこれで、左右ちょうどよい感じの幅にコンテンツがおさまっていると思う。

 

3. 余計なブログパーツを消す(ブログパーツ削除とHTML修正)

ここまで終えた状態で、サイトプレビューではなく実際のブログのトップページへアクセスをして確認する↓

もともとサイドバーに配置されていたブログパーツが1カラム内に入ってきてしまっている。

これらはライブドアブログ管理画面の「ブログ設定」=>「デザイン / ブログパーツ設定」メニューの「PC」=>「ブログパーツ」タブからそれぞれ削除してしまえばOK↓

こうなる↓

…ここまできたらいっそのこと、「livedoor Blog」のロゴも消してしまいたいと俺は思った。これは各ページの「HTML」を修正することで実現可能である。

これまで「CSS」の修正を行ってきた下記ページの、赤枠内のタブをそれぞれ選択すると各ページの「HTML」を確認・修正することができる↓

そしてそれぞれのHTML(トップページ / 個別記事ページ / カテゴリアーカイブ / 月別アーカイブ)内で、いちばん下の方にある<!– サイドバー –>のコードを確認↓

この部分を全部削除すれば、「livedoor Blog」のロゴは無事消えてくれる。「トップページ」だけでなく、「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」それぞれにも同じコードがあるので、それらも全て削除しよう。削除後のブログのトップページがこちら↓

…こうして、ただただ文字を書き連ねることに特化した1カラムのライブドアブログが完成した!(記事を投稿すれば、ちゃんと縦方向に伸びていきます)



その他のカスタマイズについて

ライブドアブログを1カラムにした後も色々とカスタマイズを加え、冒頭の「Before ⇒ After」でご確認頂いた通り今はこんな感じ↓

その他のカスタマイズについては、参考にした記事を以下の通りご紹介しておく。

1カラムにする以外は、これらを見ることでだいたい対応できた。

それと冒頭述べたように、ドットインストールの「HTML入門」「CSS入門」まで学習しておくのが本当にオススメ! 自分がやっている作業の意味を何となくでも理解しておけば、カスタマイズを実践するのが楽しくなってくるはずだ。以下のプログラムは無料で受ける事ができ、動画を見ながら実際にコードを記述してみる時間も含めてトータル1時間半くらいで完了できた。

 

…こうして出来上がった単なる日記風のブログ『まだやだ僕は眠らない』を、どうぞ宜しくお願いします。

コメントを残す

メールアドレスが公開されることはありません。