読者です 読者をやめる 読者になる 読者になる

ナツミズム

持ち物はキャリーケースひとつに収まるだけのミニマリスト。女子ながらApple製品・スマホ・ガジェットなどのデジタルモノ好き。



コピペで簡単!おしゃれなブログを作るカスタマイズまとめ【PC版】

ブログ

f:id:ngsmntm:20160403235958j:plain

 

ブログを楽しむためには記事を書くことももちろん大切ですが、デザインも重要だと私は思ってます! 

自分が好きなデザインが自分で作れれば記事を書く以外の楽しみもできます。

最近は「ナツミズムはデザインがおしゃれ」とよく言われるので、今日は「ナツミズム」でも実際に使用しているカスタマイズをご紹介していきますね!

 

 

ナツミズムで使用しているテーマは「Written」

f:id:ngsmntm:20160404104121j:plain

 

カスタマイズが必要ないほどおしゃれなテーマがはてなブログにはありますが、私はずっとシンプルなデザインの「Written」を使っています。

シンプルすぎてカスタマイズをしないと個性もなくインパクトもないテーマになりますが、 裏を返せばカスタマイズさえすればいくらでも自分の好きなデザインにできるってことですね。

限界はありますが、CSSとHTMLでおしゃれで個性的なブログにすることは可能!

 

written.hatenablog.com

 

一番最初に取り入れるべきカスタマイズ

見出し

デザインはもちろんのこと、SEOの観点からもかなり重要になってくる見出し。(参考記事▷見出しタグの使い方と絶対に知っておくべき注意点 - バズ部

カスタマイズってどこから手をつければいいか分かんないけど、とりあえず見出しからやるべきだと私は思ってる!

CSS貼り付けて、好きな色に変えるだけだから楽勝ですよ〜

 

ゆきひーさん(@ftmacchoの記事を参考にさせて頂きました。

www.yukihy.com

 

フォローボタン 

ブログを続けるにあたって読者を増やすということはかなり重要!

デフォルトのフォローボタンもありますが当たり前だけどデザインがバラバラ。私はブログデザインには統一感を重視しているのでカスタマイズしています。

▽私が記事下のプロフィール部分に設置してるのがこちら。

f:id:ngsmntm:20160404005826j:plain

同じタイプのフォローボタンをサイドバーにも置いてます。 

 

shunさん(@shun_hatenaの記事を参考にさせていただきました。

www.ituore.com

 

シェアボタン 

 ▽こちらがデフォルトのはてなのシェアボタン。

f:id:ngsmntm:20160404162338j:plain

少し前まで私もこれだったんですけど、Twitterのシェア数が表示されなくなったタイミングでデザインが崩れ(今はもう大丈夫)カスタマイズしました。 

f:id:ngsmntm:20160404004318j:plain

 

▽こちらもshunさん(@shun_hatenaの記事を参考にさせて頂きました。

www.ituore.com

.share-buttons .inner .hatena-bookmark-button{
background: #008fde;
box-shadow: 0 3px #5478a5;
}

私は、シェアボタンとのデザインの統一感を重視してCSSの box-shadow:(5ヶ所)の部分は消してます。(ボタン下の影のようなものが消えます)

 

見た目を大きく変えるカスタマイズ

グローバルメニュー 

f:id:ngsmntm:20160404031009j:plain

グローバルメニューはまず1番に絶対見られるから、おしゃれかつ動きのあるものにしたかった!

自分で作ろうとも考えましたがプログラミングの知識がほぼないため自分で作ることは断念し、お金を払って作りました。 

CSS MenuMaker | HTML, CSS, & jQuery Menus

CSSやHTMLの知識は一切なくても超おしゃれなグローバルメニューが作れます。

 

「続きを読む」ボタン

f:id:ngsmntm:20160404014844j:plain

1記事書くと1000文字以上の文字数になるのは当たり前。トップページが長くならないように「続きを読む」を必ず使っていきましょう。

この「続きを読む」はカスタマイズを一切しなかった場合何の変哲もないただのテキストリンクになります。(続きを読む←こんな感じ)

カスタマイズしてボタンにしてあげることによって、読者の方が記事を見つけやすくなります。

 

じょーじさん(@0117_georgeの記事を参考にさせて頂きました。

georges.hatenablog.jp

個人的には私が使用している一番シンプルなものがおすすめ。 

ボタンの色に関しては濃い色からマウスを置いた時ちょっとだけ薄い色になるのが鉄則です。私のブログはフォローボタンやシェアボタンなど、当ブログのボタンは全て濃い→ちょっと薄いになってます(shunさんの記事のCSSをそのままコピペすればそうなります)。

 

文字・リンク関連

文字フォント 

ナツミズムでは「游ゴシック」というフォントを使用しています。

以前は英字や数字が丸っこくてかわいい「Quicksand」というフォントを使用していましたが、当然のことながら私のブログは9割以上が日本語なので漢字・平仮名・片仮名向けのフォントに変更しました。 

 

トミーさん(@tosssaurusの記事を参考にさせて頂きました。

itkeijyoshilog.hatenablog.com 

▽「Quicksand」を使用したい方はオカヒロトさん(@hirolo_gのこちらの記事が参考になります。

www.okahiroto.com

 

リンクカラー

f:id:ngsmntm:20160404012919j:plain

リンクカラーはブルーがいいとされてますが、ブルーはデザイン的に私のブログデザインには合わないので水色を採用。

記事中は水色(#28aae1)のリンクに、マウスを乗せるとネイビー(#336699)になるようにしています。

.entry-content a {
  color: #28aae1;/*未訪問のリンク*/
.entry-content a:hover {
  color: #336699;/*ポイント時のリンク*/

その他は文字色よりちょっと濃いグレー(#222222)に、マウスを置いたら水色(#28aae1) になるようにしています。

 a:link { color: #222222; } /*未訪問のリンク*/
 a:visited { color: #222222; } /*訪問済みのリンク*/
 a:hover { color: #28aae1; } /*ポイント時のリンク*/
 a:active { color: #28aae1; } /*選択中のリンク*/

リンクは濃い→薄いが鉄則だと思っているのですが、これに落ちついてしまった。

 

フォントサイズ・行間・段落の余白

f:id:ngsmntm:20160404173536j:plain

フォントサイズ・行間・段落の余白は大事!
文字の読みやすさが変わります。

▽ナツミズムはこんな感じ

.entry-content {
  font-size : 17px ; /*フォントサイズ*/
  line-height : 2.0 ; /*行間*/
}
.entry-content p {
  margin-bottom: 1.2em; /*段落の余白*/
}

▽こちらの記事が参考になります。

naifix.com

 

細かいところまでこだわりたい人のためのカスタマイズ 

カエレバ・ヨメレバ 

当ブログの商品紹介には「カエレバ」と「ヨメレバ」を使用しています。

 
 

見た目がおしゃれかつ、直感的に「ここから購入できるんだ」と読者の方もわかりやすい。

やっぱりブログを続けていくなら収益は上げたいところ。
当ブログではこのカスタマイズをしてからAmazonの収益が格段に上がりました。

 

▽こちらもshunさん(@shun_hatenaの記事を参考にさせて頂きました。

www.ituore.com

ボタンの影みたいなのを消すかは迷い中。

 

サイドバーのカラーライン

f:id:ngsmntm:20160404164556j:plain

この線、最初は薄いグレーなんですが私の今のブログデザイン的には濃いグレーがよくてCSSで変えました。

.hatena-module-title{
  padding-left: 10px;
  border-bottom: 3px solid #555555;
}

#555555 のところに好きなカラーコードを入れれば好きな色に変えれます。

 

 画像に影をつける 

白っぽい画像も使うから、メリハリあっていいかな〜と思ってやってます。

▽貼り付けるだけ

.hatena-fotolife{
-moz-box-shadow: 1px 3px 7px 2px #C5C5C5;
-webkit-box-shadow: 1px 3px 7px 2px #C5C5C5;
box-shadow: 1px 3px 7px 2px #C5C5C5;
}

カラーコードを変えれば好きな色の影にできます。(しかし変える必要はないと思われる)

 

ブログカスタマイズに役に立つサイト紹介

Font Awesome Icons

HTMLでアイコンが貼り付けられる。よく見ると私のブログにもちょこちょこ現れてますよ。

f:id:ngsmntm:20160404192912j:plain

fortawesome.github.io

 

WEB色見本 原色大辞典 - HTMLカラーコード

カラーコードは全てここから探します。色がたくさんあるから超重宝! 

www.colordic.org

 

まとめ

これ全部やるとナツミズムが7割くらい出来上がります(笑)

その他にもありますので、随時追加していこうと思います。