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

気になるガジェット

気になるガジェットについて簡単にまとめたメモブログです

コピペでOK!!はてなブログでやっておくべき3つのカスタマイズ

f:id:the_beatles:20170106092051g:plain:w1000

はてなブログは標準の状態でも全く問題ないくらい利用しやすいのですが、より自分好みのデザインにしたい場合は、カスタマイズすることによって、無料でも結構色々と手を入れる事ができます。

そこで僕もやっている、コピペで簡単に出来るカスタマイズをご紹介しようと思います。

フラットなSNSシェアボタン

f:id:the_beatles:20170106092305p:plain:w600

はてなブログの標準SNSシェアボタンって、結構描画が遅いらしく、デザインが今風ではないため、フラットデザインにしたいと思って真っ先にカスタマイズしました。

カスタマイズ方法は以下の通りになります。

ソーシャルパーツ・記事上

f:id:the_beatles:20170105180735p:plain:w400
  • ①の通り、ソーシャルパーツの全てのチェックを外します。^1
  • 記事の上下にSNSシェアボタンを設置するため、③の通り、記事上に以下のコードを貼り付けます。^2
<div class="sns-header">
<ul class="sns-area">
  <li>
    <a
      class="sns-twitter sns-link"
      href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}&via=concerned_gadget" target="_blank">
      <i class="blogicon-twitter lg" ></i><span class="sns-txt">Twitter</span></a>
  </li>
  <li>
    <a
      class="sns-facebook sns-link"
      href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}"
      onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      target="_blank">
      <i class="blogicon-facebook lg" ></i><span class="sns-txt">Facebook</span></a>
  </li>
  <li>
    <a
      href="http://b.hatena.ne.jp/entry/{Permalink}"
      class="hatena-bookmark-button sns-bookmark sns-link"
      data-hatena-bookmark-title="{Title}"
      data-hatena-bookmark-layout="simple"
      title="このエントリーをはてなブックマークに追加">
      <i class="blogicon-bookmark lg"></i><span class="sns-txt">Hatena</span></a>
  </li>
  <li>
    <a
      class="sns-pocket sns-link"
      href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}"
      onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      >
      <i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a>
  </li>
</ul>
</div>

フッタ・デザインCSS

f:id:the_beatles:20170105180804p:plain:w400
  • jQueryを読み込ませるため、④の通り、フッタに以下のコードを貼り付けます。^3
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
   // SNSシェアボタン
    $('.entry-header').after($('.sns-header'));
    $('.entry-footer').before($('.sns-footer'));
});
</script>
  • ⑤の通りSNSシェアボタン装飾のため、デザインCSSに以下のコードを貼り付けます。^4
.sns-header, .sns-footer {
    padding: 0 24px;
}
.sns-area {
    margin: 30px auto 10px;
    padding: 0;
    overflow: hidden;
    table-layout: fixed;
    display: table;
    width: 100%;
}
.sns-area li {
    list-style-type: none;
    display: table-cell;
    vertical-align: middle;
}
.sns-area li:last-child {
    margin-right: 0
}
.sns-link {
    position: relative;
    display: block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    height: 42px;
    line-height: 42px;
}
.sns-link::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background-color: rgba(255,255,255,.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}
.sns-link:hover {
    text-decoration: none;
}
.sns-link:hover::after {
    -webkit-animation: circle .75s;
    animation: circle .75s;
}
@-webkit-keyframes circle {
    50% {
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
    }
}
@keyframes circle {
    50% {
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
    }
}
.sns-twitter {
    background: #55acee;
}
.sns-facebook {
    background: #3a5795;
}
.sns-bookmark {
    background: #00A5DE;
}
.sns-pocket {
    background: #ED4055;
}
.blogicon-twitter,
.blogicon-facebook,
.blogicon-bookmark,
.blogicon-chevron-down {
    margin-right: 5px;
}
@media only screen and (max-width: 767px) {
    .sns-txt {
        display: none;
    }
    .blogicon-twitter,
    .blogicon-facebook,
    .blogicon-bookmark,
    .blogicon-chevron-down {
        margin-right: 0;
    }
}
.hatena-module-related-entries {
    display: none;
}

SNSシェアボタンの設置は、以上で完了となります。

僕のブログでも利用させていただいておりますので、先ず見た目を確認されたほうが良いかも知れません。

  • 参考サイト

blog-custom.hatenadiary.jp

目次と見出しの装飾

「[:contents]」と記述することによって、見出しタグを拾って目次を自動的に生成する機能があるのですが、標準の目次のデザインでは物足りない場合、こちらのカスタマイズで目次の装飾が可能になります。

見出しに関しても自分のブロッグっぽさを出すために、カスタマイズする事も可能です。

目次については、以下のコードをデザインCSSに貼り付けてください。

先述の通り、上書きせずに追記してください。

.table-of-contents {
    border: 1px solid #e4e4e4;
    padding: 20px 10px 20px 40px;
    list-style-type: decimal;
    border-radius: 5px;
    font-size: 90%;
}
.table-of-contents:before{
    content: "目次";
    font-size: 120%;
}
.table-of-contents li, .table-of-contents ul {
    list-style-type: decimal;
}
  • 参考サイト

www.bunoshi.com

見出しについては、以下のコードをデザインCSSに貼り付けてください。

.entry-content h1 {
  position: relative;
  padding: 6px 0 6px 34px;
  color: #111;
  border-bottom: 2px solid #ce0d55;
}
.entry-content h1::before,
.entry-content h1::after {
  position: absolute;
  background-color: #ce0d55;
  content: '';
}
.entry-content h1::before{
  top: 0;
  left: 14px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}
.entry-content h1::after{
  top: 18px;
  left: 8px;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

※参考サイトではh3になっておりますが、僕のブログの見出しはh1のため上記のようになっております

  • 参考サイト

shiromatakumi.hatenablog.com

ページトップヘ戻るボタンの追加

f:id:the_beatles:20170106093917p:plain:w600

結構長めのブログの場合、ページトップに戻りたくなる事も多いかと思いますので、ページトップヘ戻るカスタマイズもしておいたほうが良いです。

以下の手順通り、コードを貼り付けてください。

フッタ・デザインCSS

  • jQueryを読み込ませるため、④の通り、フッタに以下のコードを貼り付けます。^5
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $('#pagetop').fadeIn();
        } else {
            $('#pagetop').fadeOut();
        }
    });
    $('#pagetop').click(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 300);
        return false;
    });
});
</script>
<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-up fa-3x" aria-hidden="true"></i></a>
  • 以下のコードをそのまま貼り付ければカスタマイズ可能です。
#pagetop {
    position:fixed;
    bottom:7px;
    right:7px;
    padding:10px 12px;
    color: #353535;
    font-size:16px;
    text-decoration:none;
    background: linear-gradient(-45deg, #fff 25%, #f4f4ed 25%, #f4f4ed 50%, #fff 50%, #fff 75%, #f4f4ed 75%, #f4f4ed);
    background-size: 4px 4px; 
    border: 1px solid #f4f4ed;
    border-radius: 50%;
    opacity: 0.6;
    z-index: 99;
}
#pagetop:hover {
    color: #ffffff;
    background:#c9c19f;
}

先述の通り、上書きせずに追記してください。

  • 参考サイト

blog.mshimfujin.net

以上になります。