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

よなかのはなし

LifeHacks And Hello!Project Blog

ブログをミニマル&シンプルに!洗練されたデザインを作る5つのブログカスタマイズ

ブログ はてなブログ カスタマイズ

f:id:hiroseyonaka:20160719013820p:plain

今回は当ブログが行ってきた中から「ブログデザインをシンプルにしたい時に使えるベーシックなカスタマイズ」を5つご紹介!すべてレスポンシブデザイン対応なので、よろしければお試しください。

フォントは細めにして、ゴシックと明朝を使い分ける

f:id:hiroseyonaka:20160905190347p:plain

 

ブログを洗練された印象にするためにはフォント指定も大切ですよね。ブログコンテンツの内容にもよりますが、デザインを優先させたいときはデフォルトよりも細めのフォントを使い、パーツによってゴシック体と明朝体を使い分けるのがおすすめ。

 

ただ、AndroidOSを搭載している端末には明朝体がインストールされていないので、Androidユーザーからのアクセスが多い場合はできるだけゴシック体を使っておいた方が良いと思います。

 

下に、おすすめの細めゴシック体と明朝体をサンプルとして載せているので良かったら参考にしてみてください。

 

はてなブログのフォント(デフォルト)

f:id:hiroseyonaka:20160131211110p:plain

font-family: "Open Sans","Hiragino Kaku Gothic ProN",Meiryo,Helvetica,Arial,sans-serif;

 

当ブログに指定しているフォント(ゴシック)

f:id:hiroseyonaka:20160131211155p:plain

font-family: Arial,Helvetica,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","MS Pゴシック",Osaka,sans-serif;

 

細めのゴシックフォント

f:id:hiroseyonaka:20160131211214p:plain

font-family: YuGothic,"Yu Gothic",游ゴシック体,游ゴシック,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,"MS Pゴシック",Osaka,"MS PGothic",Arial,Helvetica,Verdana,sans-serif;

 

おすすめの明朝体フォント

f:id:hiroseyonaka:20160131211225p:plain

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;

 

見出しはシックにモノクロで統一、装飾も最小限に

 このブログでは、見出しのデザインもシンプルな黒のボーダーのみでデザインしています。ブログ自体に使っている色が少ないというせいもありますが、これは単に私の好みでごちゃごちゃしたのが好きではないため、このようなデザインになりました。

 

f:id:hiroseyonaka:20160908213014p:plain

 

CSS

h3{
font-family: YuGothic,"Yu Gothic","游ゴシック","游ゴシック体","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic",sans-serif;
color: #000;
font-weight:800;
padding:8px 0px;
line-height: 1.2;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color:#fff;
}

h4{
font: 18px "游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
color: #000;
font-weight:bold;
padding:3px 15px;
line-height: 1;
border-left: 6px solid #000;
background-color: #fff;
}

h5{
    font-weight:bold;
}

 

引用部分(blockquote)のデザインをシンプルに

f:id:hiroseyonaka:20160131205808p:plain

 

本やニュースサイトから引用を引っ張ってくることが多いので、「blockquote」のデザインもはてなブログのデフォルトデザインからよりシンプルにカスタマイズ。背景色を白に変え、引用先が分かるようにリンクを付けています。

 

はてなブログの引用デザイン(デフォルト)

f:id:hiroseyonaka:20160908213118p:plain

 

 はてなブログの引用デザイン(変更後)

 

f:id:hiroseyonaka:20160908213229p:plain

 

HTML

<div class="blockquotebox">
<blockquote>
<p>Wikipedia(<strong>ウィキペディア</strong>)は、インターネット上において展開されているコピーレフトの百科事典である。 <strong>Wiki</strong>方式を採用しており、訪問者が規則の範囲内で自由に記事を執筆したり、すでにある記述を書き換えたりすることができるのが最大の特長である。</p>
<p class="origin"><a href="http://dic.nicovideo.jp/a/wikipedia">Wikipediaとは (ウィキペディアとは) [単語記事] - ニコニコ大百科 </a></p>
</blockquote>
</div>
    

CSS

/* blockquote */

.blockquotebox blockquote{
	padding: 10px 10px;
	border-left: 2px dotted #6C7A89;
	color: #212121;
	background-color: #fff;
	margin-left:30px;
}

.blockquotebox blockquote:before {
  content: none; 
/* 引用符「”」を非表示に */
}
.blockquotebox p{
	margin-bottom: 12px;
}

.blockquotebox .origin	{
	text-align: right;
	margin-bottom:0;
}

.blockquotebox .origin a{
	color: #2D88B3;
}

 

サイドバーの広告をシンプルなブログカード風にカスタマイズ

 2カラムや3カラムのテンプレートを使用する場合、サイドバーにAmazonなどのアフィリエイト広告をペタッと貼ることが多いですよね。

 

でも、鮮やかなバナー広告を貼るとブログデザインが一気にダサくなったりゴチャゴチャする場合があります。そんな時は既存のバナーを使わず、CSSだけでシンプルなバナー広告を作ってみましょう!

 

いまは一旦外していますが、当ブログもAmazonのバナーをCSSだけで作ってサイドバーに貼っていました。Amazonのバナー広告をそのまま貼るとサイトの配色が白黒なだけにかなり浮いてしまっていたんですよね。

 

ちなみにそのとき作ったのは「AmazonのデジタルMUSICストア」のバナー広告。以下のようにシックなブログカード風にカスタマイズしました。

 

f:id:hiroseyonaka:20160127010331p:plain

 

この自作バナーでは、クリック率を上げるためにテキストリンクの<a>タグをdisplay:blockにし、テキスト部分だけでなくカード全体をクリックできるように指定してあります。

 

そしてもちろん、レスポンシブデザインにも対応済み 。

 

f:id:hiroseyonaka:20160127012035p:plain

 

このAmazonブログカードの作り方は、以下のHTMLとCSSを参考にしてください。「Music」のh1タグにはGoogleフォントの「Great Vibes」使用していますが、他のウェブフォントでも代用できるので、自分のブログデザインに合うフォントを選んでみてくださいね。

 

HTML

<div class="side_blogcard1"><ここにアフィリエイトリンクを貼る>
<h1>music</h1>
<h2>いつでもどこでも 大好きな音楽を。</h2>
<p>Amazon musicstore</p>
</div>
    

CSS

.side_blogcard1{
width:100%;
position: relative;
background:#E5E5E5 ;
}

.side_blogcard1 a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.side_blogcard1 h1{
	color: #2c2c2c;
	font-size: 100px;
	font-weight: normal;
	line-height: 64px;
	margin: 0 0 0;
  padding: 0px 30px 10px 30px;
  text-align: center;
  font-family: 'Great Vibes', cursive;
}

.side_blogcard1 h2{
	color: #2c2c2c;
	font-size: 20px;
	font-weight: 800;
	line-height: 25px;
	margin: 0 0 24px;
	text-align: center;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
}

.side_blogcard1 p{
	color: #2c2c2c;
	font-size: 18px;
	font-weight: 500;
	line-height: 32px;
	margin: 0 0 24px 0px;
	text-align: center;
  padding-bottom:30px;
	font-family: 'Open Sans', sans-serif;
}

 

サイドバーのソーシャルボタンはまとめてレクタングルに

f:id:hiroseyonaka:20160131185426p:plain

 私はあまりSNSに興味ががなくてソーシャルボタンは置かなくても良いかなと思っていたくらいなんですが、やっぱりないと不便だという声を頂きサイドバーにも設置しました。

ただ、デザインを壊したくなかったのですべてレクタングル型にし、色も黒で統一しています。

 

HTML

<div class="btn"><a href="#">social button</a></div>
 

CSS

.btn {
  position: relative;
  display:block;
  margin: 20px 0px;
  padding:5px 5px;
  font-weight:900;
  text-align: center;
  text-decoration: none;
  background:#000;
  overflow:hidden;
  color:#fff;
  background: #3A3A3A;
}

.btn:hover{
  background-color:#000;
  color: #fff;
  color: #444;
  background: #d5d5d5;
}

 

まとめ

今回ご紹介したのは本当にベーシックなカスタマイズばかりですが、シンプル&ミニマルなブログデザインを作りたいという方の参考になれば幸いです。