最近、このブログPC版のデザインを少し変えてみました。
その際、ブログサービスが提供しているデザインテンプレートをカスタマイズしました。
カスタマイズはCSS・HTMLの知識が必要なはずですが、自分にはほとんど知識がありません。
それでも何とかなったので、手順の概略を書いています。
初心者さんの参考になれば幸いです。
左がライブドアブログが提供する公式デザインテンプレート。これを右のように変えました。今のこのブログのデザインですよね。
ここからスタート。これは「デフォルト2012」という、文字通りデフォルトでカスタマイズの基本になるテンプレートです。
まず、これをそのまま適応してみると…。
こんな感じなりました。
サイドバーのブログパーツは今までの設定が引き継がれます。
これでも悪くはないのですが、ちょっと素っ気なさ過ぎ。ビジネスブログみたいですね。
そこでまず、タイトル画像を変えてみます。
ライブドアブログはここが便利で、一部のテンプレートはかんたんタイトル画像というのに対応しています。
タイトルや背景の画像を変えるのに、CSS・HTMLをいじらなくていいのです。
設定画面から、画像をアップするだけ。
(2012.8.7.追記 新機能で、画像からの切り抜きとか横幅の最適化が簡単にできるようになりました。http://blog.blogpark.jp/archives/4263770.html )
そうすると、
こんな感じで、白いチューリップの画像がタイトルに入りました。
あらら、ブログタイトルの文字が白抜けしてしまいました。そこで文字の色を修正します。
ついでに、背景の色を目にやさしいクリーム色で統一したいな。
例えば、
これくらいなら、何も知らない自分でも大体わかります。分からなければGoogle先生が教えてくれます(検索)しね。
とりあえず試してみて、プレビューを見て間違っていれば、前に戻せば済むことですし。
その他、細かい修正をわからないところは検索しながら試行錯誤して、完成しました!
えっ?以前のこのブログのデザインと変わっていないって?
気づかれた方、いつも見ていただいてありがとうございますm(_ _)m
その通りなんです。基本的なデザインは変えていません。このチューリップのタイトル画像と、クリーム色の背景を気に入ってるので。
でも、細かいところはだいぶ変わっています。写真を載せると自動的に枠がつくとか、コメント入力欄がシンプルに改善されたとか。
何より、ソーシャルボタンを簡単につけることができるようになりました。今までのテンプレートではうまくボタンが並ばず、外部のサービスを導入していましたので。
最後に思い切ってブログ有料プランに申し込みました。月額315円でPC版にて記事下広告がなくなって、多少すっきりします。個人的なこだわりです。
自分のようなCSS・HTMLのほとんど知らない素人でも、そこそこできるものですね。
ブログデザインテンプレートをカスタマイズしたいけど全然やり方がわからないという方もなんとかなりそうですので、好きなようにいじってみるのも楽しいと思います(^^)
その際、ブログサービスが提供しているデザインテンプレートをカスタマイズしました。
カスタマイズはCSS・HTMLの知識が必要なはずですが、自分にはほとんど知識がありません。
それでも何とかなったので、手順の概略を書いています。
初心者さんの参考になれば幸いです。
左がライブドアブログが提供する公式デザインテンプレート。これを右のように変えました。今のこのブログのデザインですよね。
ここからスタート。これは「デフォルト2012」という、文字通りデフォルトでカスタマイズの基本になるテンプレートです。
まず、これをそのまま適応してみると…。
こんな感じなりました。
サイドバーのブログパーツは今までの設定が引き継がれます。
これでも悪くはないのですが、ちょっと素っ気なさ過ぎ。ビジネスブログみたいですね。
そこでまず、タイトル画像を変えてみます。
ライブドアブログはここが便利で、一部のテンプレートはかんたんタイトル画像というのに対応しています。
タイトルや背景の画像を変えるのに、CSS・HTMLをいじらなくていいのです。
設定画面から、画像をアップするだけ。
(2012.8.7.追記 新機能で、画像からの切り抜きとか横幅の最適化が簡単にできるようになりました。http://blog.blogpark.jp/archives/4263770.html )
そうすると、
こんな感じで、白いチューリップの画像がタイトルに入りました。
あらら、ブログタイトルの文字が白抜けしてしまいました。そこで文字の色を修正します。
ついでに、背景の色を目にやさしいクリーム色で統一したいな。
それはさすがにCSSをいじるしかないのですが、このテンプレートのCSS・HTMLには簡単な説明も入っていてわかりやすい。
例えば、
/* ブログのヘッダー、タイトル、説明----------------------------------------------- */#blog-title {color: #fff;font-size: 24px;font-weight: bold;
なら、ブログタイトルの色やフォントの大きさだな、とすぐわかります。
色の#fffは検索するとホワイトだとわかりますので、これを適当なブラック(#4d4d4d)に変更です。
また背景の色の記述をどこかな?と探すと
色の#fffは検索するとホワイトだとわかりますので、これを適当なブラック(#4d4d4d)に変更です。
また背景の色の記述をどこかな?と探すと
/* 全体のレイアウト----------------------------------------------- */(中略)background-color: #eff0eb;
とあります。この
#eff0eb(グレー) を#fffff7(クリーム色)に変えてやればいい。
これくらいなら、何も知らない自分でも大体わかります。分からなければGoogle先生が教えてくれます(検索)しね。
とりあえず試してみて、プレビューを見て間違っていれば、前に戻せば済むことですし。
その他、細かい修正をわからないところは検索しながら試行錯誤して、完成しました!
えっ?以前のこのブログのデザインと変わっていないって?
気づかれた方、いつも見ていただいてありがとうございますm(_ _)m
その通りなんです。基本的なデザインは変えていません。このチューリップのタイトル画像と、クリーム色の背景を気に入ってるので。
でも、細かいところはだいぶ変わっています。写真を載せると自動的に枠がつくとか、コメント入力欄がシンプルに改善されたとか。
何より、ソーシャルボタンを簡単につけることができるようになりました。今までのテンプレートではうまくボタンが並ばず、外部のサービスを導入していましたので。
最後に思い切ってブログ有料プランに申し込みました。月額315円でPC版にて記事下広告がなくなって、多少すっきりします。個人的なこだわりです。
自分のようなCSS・HTMLのほとんど知らない素人でも、そこそこできるものですね。
ブログデザインテンプレートをカスタマイズしたいけど全然やり方がわからないという方もなんとかなりそうですので、好きなようにいじってみるのも楽しいと思います(^^)