やあ、おいらですぜ。

ライブドアブログのトップランカーたちを手本にして、ブログのデザインを日々模索してるおいらですぜ。

その試行錯誤の過程を「ブログカスタマイズ」のカテゴリに書いていこうと思う。おいらと同じライブドア初心者の参考になるだろうし、備忘録としての意味合いもある。

記念すべき第一回の内容はこちら！！！

・デザインを「ホワイトプレス」に変えよう
・フォントを「明朝体」から「メイリオ」に変えよう

この2つでブログの見栄えがだいぶマシになるで。とりあえずやっておいて損はない。


アフィリエイト始めるなら案件豊富なA8.net


高報酬で使いやすいアフィリエイトafb（アフィb）
カンファレンスバナー


デザインを「ホワイトプレス」に変えよう


ライブドアブログを作ると、最初はこんな感じのデザインになってるよな。
カスタム01

ダメダメだよな？

これを「ホワイトプレス」に変えるとこうなる。
カスタム02

まだまださみしいけども、右のサイドバーの背景も白になってスッキリしたと思わないか？　それに最初のデザインでは記事が全文表示されていて一覧性が低かったけども、「ホワイトプレス」では概要表示になっていてどんな記事があるのかわかりやすくなったでそ？

変更方法

管理ページを開いて「ブログ設定」をクリック
カスタム03
「メニューバー設定」の「PC」をクリック
カスタム04b
「デザイン選択」タブをクリックし、「ホワイトプレス」を探してクリック
カスタム05
プレビュー画面右下の「実行」をクリックで変更完了！
カスタム06

ついでに画面上部の青い箱も外しとこう

カスタム07
ブログの上に鎮座まします目障りな青い箱をとっぱらっちまおう。

以下、ドクダンさんのブログからの引用

　CSSの編集画面を開き、#blog-header-image {}の部分を探しましょう。Ctrl+Fで検索をかけると楽ですね。
中には以下のようなプロパティが入っております。
　
　height: 400px;
　width: 100%;
　background-color: #287cba;
　background-image: -webkit-linear-gradient(#57bef5 0%, #287cba 100%);
　background-image:    -moz-linear-gradient(#57bef5 0%, #287cba 100%);
　background-image:     -ms-linear-gradient(#57bef5 0%, #287cba 100%);
　background-image:      -o-linear-gradient(#57bef5 0%, #287cba 100%);
　background-image:         linear-gradient(#57bef5 0%, #287cba 100%);

これ、全部消しちゃいましょう！

なお「CSSの編集画面」へは、管理ページの「ブログ設定」→「PC」→「カスタマイズ」→「CSS」とクリックしていけば行ける。

青い箱が外れるとこうなる。
カスタム08
いかがですかな？　なかなか素敵でそ？

フォントを「明朝体」から「メイリオ」に変えよう

いよいよ最後の仕上げぞ。明朝体だと堅苦しい感じがするし、なにより読みにくい。つーことで一番読みやすいフォントとも言われる「メイリオ」に変更しようぜ！

まず管理ページから「ブログ設定」→「PC」→「カスタマイズ」→「CSS」と移動しよう。
カスタム09
次に「/* 全体の文字色、リンク色」という文字列をページ内検索(Ctrl+F)する。
カスタム10

検索すると上記の画面になるので、赤枠の部分を「 font: 18px/1.2 ‘メイリオ’,sans-serif;」と置き換えよう。

ちなみに赤枠の「font: 13px/1.2」以下の「"ヒラギノ明朝 Pro～」の部分は、使用するパソコンによって異なるけども気にせんでええで。

あと文字のサイズは「px」の前の数字をいじれば変更できるから、好きにしてちょ。

置き変えた画面はこちら。
カスタム11
プレビューで正しく表示されてるのを確認して、変更内容を保存しよう。

で、完成品はこちら！！！
カスタム12
じゃじゃーーん！！！

どや！？　けっこうイケてるでしょーが！？

これであなたもライブドアブログ超初心者を卒業ぞ。おめでとうございまする。

Googleアドセンスを貼ろうと考えているなら

独自ドメイン取得が必須よ。ライブドアブログの最初のドメインのままじゃ審査受けられないのよ。

ムームードメイン なら安く取得できるぜ！

ドメイン取得解説＞＞＞2020年｜ライブドアブログでの独自ドメイン設定方法｜アドセンス


アフィリエイトを始めるなら案件豊富なA8.net


高報酬で使いやすいafb（アフィb）
カンファレンスバナー