はてなブログのコピペで完成するおしゃれなデザインカスタマイズまとめ

※2016年1月15日更新

みなさんこんにちは、Ichiです。

今回は、私のブログ自体のカスタマイズも落ち着いてきたので、みなさんの参考用に、自分の保存用に、このブログのカスタマイズをどのブログを参考に行っているか記事にまとめておきたいと思います。

私自身にはほとんどプログラミング能力は無いので、このブログのデザインは、ほぼ参考記事のコピペで作成しています。色とかスペースとか位置とかは多少いじっていますが、数字を変えているだけなので、誰でもできると思います。 

目次

カスタマイズ基礎知識

ブログデザインをカスタマイズする前に、とりあえず基礎知識だけ確認しておきましょう。基礎知識が無くてもコピペでカスタマイズ出来てしまいますが、知っておいた方が、何か問題があった時に確認出来て便利です。

HTML:HTMLはブログの文書構造を表現しているプログラムです。

CSS:CSSはブログの文章の外観を表現しているプログラムです。

つまり、基本的にはHTMLがしっかりしていれば文章自体は存在するんですが、CSSも上手く使ってやらないと見やすくならないということですね。

他にもJava Scriptなどを使うと、文章に「動き」をつけることが出来ますが、基本的には上の2つを使ってカスタマイズするのが基本的な部分だと思ってください。

PC版カスタマイズ

PC版で変更している部分は、以下の通りです。

・ブログデザインテーマ&記事幅
・見出しの色とスペース
・日付部分の色とスペース
・シェアボタン設置
・プロフィール欄の新規作成
・サムネ画像の枠作成
・本文の文字大きさ&フォント
・サイドバーの文字の大きさ&フォント
・画像に枠をつけるコード挿入
・Amazonアフィの文字色変更コードの挿入 

ブログデザインテーマ&記事幅

デザインはブログテーマの「Innocent」です。このテーマでは、少し設定するだけで、簡単にグローバルメニューが設置できるのが魅力です。

記事幅に関しては、初期設定だとAdsenceが記事幅より飛び出してしまっていたので、720pxに変更しています。「Innocent」を作った作者の半月さんがカスタム記事を書いているので、そちらを参考にして変更しています。

記事自体は「Blank」テーマの記事ですが、こちらのテーマも半月さんが作ったテーマなので、今のところ問題なく使えています。

moonnote.hateblo.jp 

見出し・日付部分の色&スペース

見出しと日付の部分に関しては、オシャレに定評のある「Literally」さんの記事を参考にさせていただきました。プログラミングに詳しかったらこんな感じに細かい部分にこだわりたいなというブログのカスタマイズをされています。記事自体はスマホ用ですが、PC版でも問題なく使えるソースだったので、下記の記事からコピペで設定しています。

tsukuruiroiro.hatenablog.com

シェアボタン設置

シェアボタンは最近変更しました。はてなオリジナルでも良かったのですが、twitterの数が表示されないため、凸凹になってしまって気持ち悪かったので、綺麗なものにした感じです。こちらはゆきひーさんの記事を参考にさせていただきました。

www.yukihy.com

プロフィール欄の新規作成 

はてなブログでは、サイドバーに既存のプロフィール欄を置くことが可能ですが、変更できる点が少ないので、かなり不便です。具体的にはプロフィール画像が小さかったので、大きくしたいなと思って、新しくHTMLでプロフィール欄を作成しました。

参考にさせていただいたのはこちらの記事です。

hmaki.hatenablog.com

サムネ画像の枠作成

サイドバーにある最新記事や人気記事のサムネの画像ですが、白い画像などを使ってしまうと、他のサムネ画像とのバランスが悪くなってしまうので、枠をつけました。枠をつけることによって、端が揃うので、整った印象を与えることが出来ます。

ですが、サムネの画像に枠をつける記事が見当たらなかったので、この2記事を参考にCSSコードを作成してみました。

www.yukihy.com

e1116.blog.fc2.com

本文の文字の大きさ&フォント

文字の大きさとフォントの変更はこちらのサイトを参考にして変更しています。私の場合はフォントを「メイリオ」に指定しています。とりあえず可読性が良くなるように心掛けています。

itkeijyoshilog.hatenablog.com

サイドバーの文字の大きさ&フォント

サイドバーに関しては、こちらのYukihyさんの記事を参考に、サイドバーの項目に対して、上記の本文に当てはめた文字の大きさとフォント変更のコードを入力しました。

このYukihyさんの記事は、上手く使えばかなり色々とカスタマイズが捗るのでとってもお気に入りの記事です。

www.yukihy.com

画像に枠をつけるコード挿入

画像に枠をつけるコードについては、サイドバーのサムネイル部分に一部使わせていただいた、こちらのサイトを参考にさせていただきました。やっぱり画像に枠がついていると、揃った印象がある気がします。

e1116.blog.fc2.com

画像枠の有無をカワイイネコ画像でちょっと確認してみましょう。
画像枠あり

f:id:ibookwormer:20151226144308j:plain

画像枠なし

f:id:ibookwormer:20151226144308j:plain

Amazonアフィの文字色変更コードの挿入

はてなぶろぐで挿入できるAmazonアフィのリンクはそっけない感じなので、こちらの記事を参考に、Amazon感を強めています。

moonnote.hateblo.jp

こちらのコードを入れると、文字色の変更とロゴが追加されるので、おすすめです。
ちなみに挿入するとこんな感じの見た目になります。

ブログ飯 個性を収入に変える生き方

ブログ飯 個性を収入に変える生き方

 

スマホ版カスタマイズ

スマホ版のデザイン変更は、はてなProではないと出来ないのでご注意ください。デザインテーマの「Innocent」はレスポンシブルデザインに対応しているのですが、あえてレスポンシブルにはしていません。とにかくスマホ版はシンプルにしました。

スマホ版で変更している部分は、以下の通りです。

・見出しの色とスペース
・日付部分の色とスペース
・ヘッダー&グローバルメニュー
・シェアボタン設置

見出し・日付部分の色&スペース

こちらはPC版と同じくLiterallyさんの記事を参考にさせていただいています。スマホ版で見てもとってもおしゃれで、ある意味ブログっぽくない感じがします。

tsukuruiroiro.hatenablog.com

ヘッダー&グローバルメニュー

ヘッダーのタイトル部分を編集したり、グローバルメニューをつけたりするのには、狭間純平さんのこちらの記事を参考にさせていただきました。スマートなスマホ画面になるのでお気に入りの記事です。狭間さんのページ自体も色が抑えめで、スマートなページの印象です。

www.junpeihazama.com

シェアボタン設置

シェアボタンもPC版と同じく、ゆきひーさんの記事を参考にさせていただいています。Lineのシェアボタンも入るので、色味が増えてPC版よりにぎやかな印象です。

www.yukihy.com

おわりに

私自身はこういったブログのカスタマイズをするのは初めてなので、色々な方が参考記事を出していてくださってとても助かりました。コピペで色々おしゃれできるのはいいですよね。

とりあえず、極力シンプルに見やすいブログにしていますが、ブログ運営という意味では、もう少し工夫が必要なのかもしれません。今後も色々と研究してより良いデザインを目指したいと思っています。では、また。

Copyright© 2015-2016 life-abstract.com All Rights Reserved