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

おもしろーど

世の中の「面白い」を探す旅に出る!

【初心者必見】はてなブログ無料版でもおしゃれに見やすくするカスタマイズまとめ

f:id:taiikun:20170514141958g:plain

 

どうも、WebクリエーターのTAIKIです!

 

はてなブログを開設して約半年、やっとこさブログカスタマイズが完成しました。

無料版なので出来ることが限られちゃってますが、出来る範囲内でおしゃれに見やすくカスタマイズをしてみました。

 

その際にやったことを全てまとめていくので、是非参考にしてみてください!

 

スマホのカスタマイズを個別にしたい方、独自ドメインを使用したい方は、はてなpro化が必須です。

 

最低限知っておくべきなもの

よく使用したり調べたりするので、ブックマークしておくことを勧めます!!

超初心者でもHTML/CSSのことが、簡単にわかるようになるよ。

 

 

 

デザインテーマをレスポンシブ対応のものにする

レスポンシブとは、簡単に言えばPC・スマホタブレットのデザインを全て一緒にすること。スマホのカスタマイズができない人やデザインに統一感を出したい人向けです。

はてなproでない我々は、このレスポンシブこそがブログデザインの要となります!!

 

ぼくがおすすめするテーマ「Innocent」

 

このテーマは基本的な形は残しつつ、かつオリジナリティも多少は出せる超おすすめの人気テーマです。

ナビゲーションメニュー、続きを読むボタン、おすすめ記事リストは解説されているので、よく読んで設置してください。

 

 以下のテーマもおすすめ!

 

こちらは、このテーマにするだけですぐにいい感じのブログが出来上がります。

 

 

ヘッダー画像を準備する 

f:id:taiikun:20170509235852g:plain

 

カスタマイズしていく上で、一番重要と言っても過言ではない箇所です!

ぼくの場合だと、こんなやつですね。

まぁツッコミどころが満載ですが、そっとしておいてね・・・

 

ブログ(サイト)の顔になるので、IllustratorPhotoshopを駆使して頑張って作ってください。

ちなみに作成する時のサイズは、1500×400と若干大きめがおすすめですよ!

 

それかココナラ等で、プロに依頼するのも手ですね。

 

 

 ヘッダー画像のサイズを合わせる

ヘッダーを準備できたら、早速カスタマイズ開始です。

 

デザイン⇨カスタマイズ⇨ヘッダーに設置していけば良いのですが、このまま設置した場合にスマホで見ると、何故かアップで表示されて困っちゃうと思います。

 

ここがレスポンシブデザインのイラつくところ・・

 

 

そんな時は、デザインCSSにこちらをコピペしましょう。

 

/*ヘッダースマホ*/
@media (max-width: 480px){ #blog-title-inner,#title a{ height:100px!important; } #blog-title-inner { background-size: contain; }}

 

 

あとプラスして、余計な余白も取っちゃいましょう!  

 

/* タイトル画像上下の余白を取る */
#blog-title {
margin: 0 auto;
padding: 0;
}

 

これでこんな感じになりました。

 

f:id:taiikun:20170513213221j:plain

 

もし、それでもうまくいかない人はこちらを参照にしてください。

design.syofuso.com

 

 

 SNSフォローボタンのカスタマイズ

一番わかりやすい記事だと思います。自分のお好きなやつをどうぞ!

 

www.ituore.com

 

 

 

SNSシェアするボタンのカスタマイズ

これまたshunさんの記事を参考にして、記事上下の部分に設置しましょう。

本当にありがたいですね。感謝、感謝・・・ 

 

www.ituore.com

 

 

見出しカスタマイズ

saruwakakun.com

 

見出しのカスタマイズは、この記事一択のみで十分です!!

ただコードが全てh1タグとなっているので、はてなブログの場合だと、

 

大見出し⇨h3

中見出し⇨h4

小見出し⇨h5

 

にそれぞれ変更して、CSSデザインのところにコピペしてください。

はてな以外でも勿論、使用できるので重宝しているサイトです。

 

あと記事タイトルもおしゃれに変更したいという方は、先ほどのh1のところをentry h1に変更してくださいね。

 

 

太字にマーカーを引く

f:id:taiikun:20170514084743j:plain

 

/*太字マーカー強調*/
.entry-content strong {
background: linear-gradient(transparent 40%, #ffd700 40%);

 

 

デザインCSSにコピペしてください。

#ffd700のところを自分好みの色に変えます。

 

 

 

ページトップに戻るボタンを設置する

f:id:taiikun:20170514085303j:plain

記事を読んでいると下ら辺に出てくる、こういう便利なやつも設置しときましょう。

 

まずフッターというところに、HTMLコードをコピペします。

 

//トップに戻るボタンの設定
div id="page-top"
a id="move-page-top"><i class="fa fa-arrow-circle-o-up fa-5x"></i></a>
</div>

//トップに戻るレンジの設定
<script>

$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});
$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
});
</script>

 

 

 

続いてCSSデザインに、下記のコードをコピペすると確認することができます。

 

/* ページトップへ戻るボタン */
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}

#move-page-top{
color:rgba(0,0,0,0.6);
text-decoration:none;
display:block;
cursor:pointer;
}

/* ページトップへ戻るボタン:ホバー時 */
#move-page-top:hover{
color:rgba(0,0,0,0.8);
}

 

 

こちらも参照に!

 

blog.mshimfujin.net

 

 

行間・文字サイズ

ぼくは几帳面なので、はてなブログデフォルトのままの行間は嫌だ!

ってことで綺麗に見せるカスタマイズを施します。

 

貼り付けるところは、デザインCSSです。

 

/*文字のサイズと行間*/
.entry-content {
font-size:16px;
line-height:1.8em;
}

 

line-heightが行間(理想は1.6~1.9em)、font-sizeが文字の大きさです。

お好みの大きさと行間にしてみてください。

 

改行

改行をする方法は、普通にエンターキーかシフト+エンターキーで行います。

 

ぼくはこれもめんどくさい。

なので、エンターキーのみでできるようにしていきます。これもデザインCSSに貼り付けます。

 

/*改行*/
.entry-content p {
margin: 0.3em 0;
}

 

0.3〜0.5ぐらいがちょうど良いかと。

 

 

目次の表示/非表示にする

目次が長いと、デザイン的に悪いし読みにくくなる。

なので、こんな感じに片付けましょう。

f:id:taiikun:20170514155045j:plain

 

まずは、ヘッダー⇨タイトル下に以下のコードを貼り付ける。

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
// 目次 表示/非表示ボタン
$(function(){
var $Contents = $(".table-of-contents")
$($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>');
$(".show-area").click(function(){
var $this = $(this);
if($Contents.css('display') == 'none'){
$Contents.slideDown(400),
$this.text("[非表示]");
}else{
$Contents.slideUp(400),
$this.text("[表示]")
};
});
});
</script>

 

 

今度は、デザインCSSに以下のコードを貼り付けます。これで完成。

 

/*目次カスタマイズ*/
.table-of-contents{
display:none
}

.show-area{
cursor: pointer;
color: #47a1e5
}

 

 

カエレバ・ヨメレバのカスタマイズ

Amazonアソシエイトやら楽天アフィリエイトやらをまとめるブログパーツですね。

はてなブログで収益化させるなら、proにしろよって話ですが一応やっときましょう。

 

rough-log.com

 

www.ituore.com

 

 

サイドバーのプロフィール画像を大きくする 

f:id:taiikun:20170514191331j:plain

 

こんな感じのやつ。でも、こーいった形式は顔写真がいいのだろうね。

 まずは、サイドバー⇨モジュール追加⇨HTMLで作っていきます。

 

そして、以下のコードをHTMLへコピペ。

 

<center><div class="shadow"><a href="http://f.hatena.ne.jp/taiikun/20170510000320"><img src="http://img.f.hatena.ne.jp/images/fotolife/t/taiikun/20170510/20170510000320.gif" alt="20170510000320"></a>
</div></center>


<div class="profile">
<p></p>
</div>

 

<iframe src="https://blog.hatena.ne.jp/taiikun/active-life.hateblo.jp/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>

 

 

 

<center>〜</center>のところが、画像の部分になります。

その中の青文字で下線の部分を、自分の画像のURLに変更してください(画像のHTMLコードは、はてなフォトライフというところから取得します)。 

 

次に<div class="profile">〜</div>の部分に、プロフィールの内容を書いていきます。

 

最後に<iframe src="~"の〜の部分を自分の読者になるボタンURLに変更して完了。

 

 

最後に

やっぱりカスタマイズって楽しいですよね!

これを機会にしてHTMLやCSSJavaScriptなどを学んでみるのも良いかもしれません。自分で理解してできるようになると、色んなことができることが増えて、もっと楽しく面白いですよ!!

 

是非、唯一無二の素晴らしいブログを作ってください。

 

 

おすすめHTML/CSS参考書

 

初心者からプロの方まで使える一冊です。 高いお金払ってWebスクールやPC教室で学ぶぐらいなら、これを使って独学でも十分イケると思います。

ずっと使える教科書です!

 

 

それじゃ、また!

広告を非表示にする
//トップに戻るボタンの設定
//トップに戻るレンジの設定