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

かんがえちゅう!

出来寛祥です。多趣味に生きていこうと思って、楽器とかスポーツとかいろいろやってます。プログラミングも好き。

【保存版】はてなブログのカスタマイズ超まとめ

ブログ ブログ-カスタマイズ

sponsor

こんにちは!できです!
はてなブログを始めて少し経つとサイトのデザインをいろいろいじりたくなると思います。
しかし、jQueryやHTML, CSS 初心者には非常にハードな問題です。
そこで、とりあえずこれさえデザインをカスタマイズしておけばかなりリッチに出来るデザインをまとめました。

はじめにこちらの記事を参照してください。

www.dekihiroyoshi.com

ほとんどコードをコピペで対応出来るようにしてあります。
ほんと、この記事でだいぶ満足できる。CSSは最後に一気にまとまった場所もあるので!!

 

文字サイズ、行間、文字間、段落マージンの調整

読みやすさストレスに関わってくるのでとても大切です。なんとなく見づらいなと思われたら終わりです。このサイトと同じなのでサンプルは省きますね。その代わりに文章をたくさん書いておきます。こんな感じでなかなかみやすくなるので是非変えてみてくださいね。貼り付け場所はダッシュボード>デザイン>カスタマイズ>デザインCSSです。

.entry-content p{
    font-size: 16px;
    line-height: 1.7em;
    letter-spacing:1;
    margin-bottom:2.0em;
}

続きを読む

続きを読むボタンのデザインはただのテキストリンクになっていることも多いので、目立たせましょう。

sample

続きを読む

a.entry-see-more {
    display: inline-block;
    width: 250px;  
    height: 50px;  
    margin:5px 0 5px 0; 
    line-height: 50px;  
    background-color: #11AA55; 
    border-radius: 4px;  
    text-align: center;
    color: #fff!important; 
    font-size: 16px; 
    text-decoration: none;
}
a.entry-see-more:hover {
    color:#fff!important; 
    background-color: #009944; 
}

ボタンカラーは緑にしてありますが、いろいろと自分で試してみてください。

見出しのデザイン

見出しは記事内容の言いたいことまとめみたいなものです。しっかり印象付けましょう。こちらもサンプル省きます。

.entry-content h3 {  
     margin: 60px 0px 20px 0px;  
     border-bottom:1px solid #333;
     border-left:10px solid #333;
     padding: 0 0 0 15px; 
     line-height: 2.5; 
     background: #fff;  
     font-size: 150%; 
     }
.entry-content h4 {  
     margin: 0 0 20px 0; 
     border-left: 4px solid #333;  
     padding: 0 0 0 12px;  
     font-size: 130%;  
     }
.entry-content h5 { 
     margin: 0 0 2px 0;  
     font-size: 104%; 
}

引用文のデザイン

引用文は他の人の文章を引っ張ってくるわけですから、わかりやすくしましょう。礼儀です。

これは引用のテストです。いい感じでしょ!かわいいでしょ! ちなみに、下のコードは少しだけデザイン変えてあります。基本は一緒です!全く同じじゃつまらないからね!みなさん、試してみてください!

.entry-content blockquote {
    padding: 8px 32px;
    background: rgba(245,245,245,0.8);
    color: #222;
    position: relative;
    border: solid 1px #fff;
    margin: 0.8em 0;
}
.entry-content blockquote:before {
    color: rgba(200, 200, 200, 0.3);
    content: "“";
    font-size: 1000%;
    left: 0;
    line-height: 1em;
    position: absolute;
    top: 0;
}
.entry-content blockquote:before {
    color: rgba(200, 200, 200, 0.3);
    content: "”";
    font-size: 1000%;
    right: 0;
    line-height: 1em;
    position: absolute;
    bottom: 0;
}

投稿時間から何時間経過したかを消す

f:id:hiroyoshi-deki:20151130063247p:plain

こいつです。ひとりで運営しているブログだったらいらないですね。デザインの邪魔なので消します。

.entry-footer-section{ display:none!important; }

以上CSSで変えられるものたちでした。

一気に貼り付けられるようにここにまとめておきますね!

.entry-content p{
    font-size: 16px;
    line-height: 1.7em;
    letter-spacing:1;
    margin-bottom:2.0em;
}
a.entry-see-more {
    display: inline-block;
    width: 250px;  
    height: 50px;  
    margin:5px 0 5px 0; 
    line-height: 50px;  
    background-color: #11AA55; 
    border-radius: 4px;  
    text-align: center;
    color: #fff!important; 
    font-size: 16px; 
    text-decoration: none;
}
a.entry-see-more:hover {
    color:#fff!important; 
    background-color: #009944; 
}
.entry-content h3 {  
     margin: 60px 0px 20px 0px;  
     border-bottom:1px solid #333;
     border-left:10px solid #333;
     padding: 0 0 0 15px; 
     line-height: 2.5; 
     background: #fff;  
     font-size: 150%; 
     }
.entry-content h4 {  
     margin: 0 0 20px 0; 
     border-left: 4px solid #333;  
     padding: 0 0 0 12px;  
     font-size: 130%;  
     }
.entry-content h5 { 
     margin: 0 0 2px 0;  
     font-size: 104%; 
     }
     .entry-content blockquote {
    padding: 8px 32px;
    background: rgba(245,245,245,0.8);
    color: #222;
    position: relative;
    border: solid 1px #fff;
    margin: 0.8em 0;
}
.entry-content blockquote:before {
    color: rgba(200, 200, 200, 0.3);
    content: "“";
    font-size: 1000%;
    left: 0;
    line-height: 1em;
    position: absolute;
    top: 0;
}
.entry-content blockquote:before {
    color: rgba(200, 200, 200, 0.3);
    content: "”";
    font-size: 1000%;
    right: 0;
    line-height: 1em;
    position: absolute;
    bottom: 0;
}

目次のデザインを変更する

目次は設定しないと黒丸と白丸がポイントについただけになってしまうので、数字にしてあげましょう。

ちなみに[:contents]と書くと見出しタグから目次が自動生成されます。


.table-of-contents{
    list-style-type:decimal;
}

.table-of-contents li ul{
    list-style-type:decimal;
}

サイドバーの記事にアイキャッチ写真を出す。

f:id:hiroyoshi-deki:20151209225452p:plain

初めはこのように画像が出てくれません。ちょうど画像なしの部分のようになります。

なので、設定をいじりましょう。

f:id:hiroyoshi-deki:20151209225537p:plain

ダッシュボード>サイドバー>最新記事>カテゴリー>サムネイルを表示するにチェックマークを入れましょう。

次jQuery使っていきます。

パンくずリストを表示する

関連記事を表示するとサイト内をぐるぐる回ってくれるようになりやすいです。パンくずリストはSEOのためです。bulldraさんのbreadcrumbがいい感じなので、パンくずりすとには今回はこちらを使っていこうと思います。bulldraさんありがとうございます。

f:id:hiroyoshi-deki:20151202034625p:plain

ぼくのブログでいう、こんなのです。画像中央にパンくず、画面下に関連記事が表示されています。以下、bulldraさんの記事です。パンくずと関連記事を一気に表示できるようにしてあります。このコードをダッシュボード>デザイン>カスタマイズ>記事>記事下に貼り付けてください。たぶんコピペでいけます。

<!--ぱんくず-->
<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<div id="breadcrumb"> </div>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"> </script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"> </script>

bulldra.hatenablog.com

こちらbulldoraさんのサイトです。

ちなみに、このコードを使うためにカテゴリ訳を「ブログ」「ブログ-カスタマイズ」のようにして、どちらも指定してあげる必要があります。ハイフンなんちゃらという部分を残して、その前を消すような処理がされているんだと思われます。

関連記事を表示する

Millardを使います。デザインを少し変えてみました。

f:id:hiroyoshi-deki:20151203113738p:plain

こんな感じです。

関連記事ツール設定画面

このページからスクリプトを生成します。

f:id:hiroyoshi-deki:20151203114558p:plain

  • トップのURL:ブログURL(僕ならwww.dekihiroyoshi.com)
  • サイトタイプ:はてなブログ
  • 紹介文:適宜
  • 並び順:更新日時がおすすめ、適宜
  • フッターの下はいらないと思う。
  • PCでの表示:リスト
  • スマホでの表示:リスト

こんな感じの設定でいいと思います。最後の表示方法の部分はリストにしてください。生成したコードをダッシュボード>デザイン>カスタマイズ>記事>記事下にコピペです。ここまで真似した方はdiv.breadcrumbの下に書くのがオススメです。

僕は合わせて読みたいGのスクリプトと入れ替えました。次CSS行きます。

div.ssLimitedContainerHeader div div div{
    padding: 15px 20px!important;
    font-weight: bold;
    font-size: 20px;
    background: #fff;
    border-radius: 7px;
    color: #fff;
}

.ssPanel {
    padding: 10px 0px;
    border-bottom: 1px solid #DCDCDC;
    display: table;
    width: 50%!important;
    float: left;
    height: 70px!important;
}

.ssPanel > div.ssOriginalTemplateImgContainer img.ssImg {
    width: 100px;
    vertical-align: top;
    margin: 0 !important;
}

このコードをおなじみダッシュボード>デザイン>カスタマイズ>デザインCSSに貼り付けましょう。同じになると思います。

サイドバーの固定表示

サイドバーにはいくつかモジュールを表示できますが、その最後の部分だけ固定させようと思います。これもサイト内回遊率を上げてくれます。前と同様に記事下に貼り付けましょう。

<!--サイドバー固定-->
<script>
$(function(){
  var sideLast = $("#box2-inner>div:last-child");
  var sideLastTop = sideLast.offset().top;
  var sideLastWidth = sideLast.width();
  var win = $(window);

 win.scroll(function(){
  if(win.scrollTop() > sideLastTop) {
   sideLast.css("position",'fixed');
   sideLast.css("top",'20px');
   sideLast.css("width",sideLastWidth);
  }else{
   sideLast.css("position",'relative');
  };
 });
});
</script>

ちなみにこのコードでアドセンスは固定しないようにしましょう。規約違反になります。

アドセンスの記事上下への自動表示

アドセンスの自動表示は非常に簡単で、ダッシュボード>デザイン>カスタム>記事>記事上、記事下にアドセンスのコードを貼り付けるだけです。上記のパンくずリストなどいろいろなコードがすでに書いてある場合は、すでに貼り付けたdiv breadcrumbの下に貼り付けることで、記事下に表示するのがオススメです。

f:id:hiroyoshi-deki:20151202060443p:plain

アドセンスの記事中央への自動表示

こちらは少し頑張らなければなりません。収益の元になるので、しっかり目立たせていきましょう。

<div class="google-ads-box">
  <p>Sponsor</p>
<ここにadsenseのコードを貼り付けてね。 -->
</div>
<script>// <![CDATA[
$(".entry-content h3").eq( Math.floor($(".entry-content h3").length/2) ).before($('.google-ads-box'))
// ]]></script>

このコードは、事前にアドセンスを別の位置に用意して、それをh3の数を数えて移動させています。これで、アドセンスが記事の中央に自動的に配置されます。

以上でPC編が終了になります。次はスマフォ編です。

ヘッダ、フッタ、オーサー用リンクの削除

PCだとオプションで消すことができたヘッダとフッタですが

 

www.dekihiroyoshi.com

 こちらの記事で解説しています。

スマフォは自分で指定して消さなければいけません。さらに、スマフォ版にはオーサー用のリンクや、はてなブログ開発ブログなどのリンクもあるので、こちらも消しましょう。コードはダッシュボード>デザイン>スマフォ>フッタにコピペしてください。

<style>
/* ヘッダー削除 */
#globalheader-container {
    display:none;
}

/* ヘッダー分の余白調整 */
#container {
    padding-top:0px;
}

/* フッターのブログを書くなどを消す */
div.footer-action-wrapper,.footer-service-link,#footer-menu{
    display:none!important;
}

</style>

読者になるボタンの設置

<p class="dokushaninaru"><a class="heart" href="http://blog.hatena.ne.jp/はてなID/ブログのURL(www.dekihiroyoshi.comなど)/subscribe">読者になる! </a></p>
<style>p.dokushaninaru{
    margin: 0 auto;
    border-radius:3px;
    background:#11AA44;
    padding:3px 10px;
}

p.dokushaninaru a{
    color:#fff;
    display:inline-block;
    width:100%;
    text-align:center;
}
<style>

このコードを読者になるを表示したい場所へ。ぼくはヘッダのタイトル下に書いてます。是非読者になってください。

以上でカスタマイズ初級編終了です。この先もっともとカスタマイズしたい部分が出てくると思います。少しずつ、ぼくも直すところを書き足していきます。

© 2015 かんがえちゅう!