はてなブログをオシャレに変える5つのカスタマイズ

今回は、はてなブログをおしゃれにするカスタマイズを5つご紹介!すべてレスポンシブデザイン対応なので、よろしければお試しください。

SPONSORED LINK


フォントを変更する

f:id:hiroseyonaka:20160905190347p:plain

ブログをおしゃれにしたいとき、まず変更したのがフォント。コンテンツの内容にもよりますが、デザイン優先のときははてなブログのデフォルトより、やや細めのフォントを使う方が良いように思います。本文はゴシックにし、記事タイトルだけ明朝体を使うというのもアリですが、Android OSには明朝体がインストールされていないので、ここだけ注意。以下にいくつか細めゴシック体と明朝体のフォント設定を載せているので、良かったら参考にしてみてください。

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

f:id:hiroseyonaka:20160131211110p:plain

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

細めゴシック1

f:id:hiroseyonaka:20160131211155p:plain

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

細めゴシック2

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;

SPONSORED LINK

見出しを変更する

おしゃれなブログデザインは「色を多用していない」という共通点があります。シンプルで統一感のあるデザインにしたいなら、見出しもシンプルにするのがおすすめ。

サンプル

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: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のデジタルMUSICストアのバナーをフルCSSでシンプルに作り変えたサンプルが以下。

f:id:hiroseyonaka:20160127010331p:plain

自作バナーは、CSSでクリック範囲を広げ、カード全体をクリックできるように作っています。そしてもちろん、レスポンシブデザインにも対応済み 。

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;
}

サイドバーのSNSボタンをレクタングルに

f:id:hiroseyonaka:20160131185426p:plain

SNSボタンはカラー・サイズともに不揃いです。統一感を持たせたいならこれも自作してしまいましょう。レスポンシブデザインなら、レクタングルにした方がタップしやすいと思います。上記画像のようにレクタングル型にし、色も黒で統一したいときは以下のHTMLとCSSを使用してみてください。

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;
}
SPONSORED LINK

あわせて読みたい