はてなブログ開始から3ヶ月。今までやってきた設定

キーボード

lisです。はてなブログをはじめて約3ヶ月程度が経ちました。

設定してることなんかを公開したら、何かの役に立つかも？

とか思い、書いてみました。

設定→基本設定
- 編集モード
設定→詳細設定
デザイン→デザインテーマ(パレットアイコン)
デザイン→カスタマイズ
デザイン→スマートフォン
- 詳細設定
あとがき

設定→基本設定

ブログ名とかアイコンとか説明とか、基本的なところは置いといて……

そのほか設定したところです。

編集モード

Markdownモードに設定。

Markdown超楽っすよ。

これを知ってから、昔ムダにHTML書いてなんやかんややってたのが何だったんだろうなぁって感じです。

正直h1タグで見出し括るだけでも面倒なんですよね(面倒くさがりすぎる)

設定→詳細設定

記事URL

タイトルに変更。

Google Analyticsで見たときに、数字だと暗号状態で、どのページか判別がつかない……

ということに気づき、基本的に自力でURLを入力するようにしています。

が、忘れたときのセーフティーとしてこれを設定。

キーワードリンク

「付与しない」にチェック。

記事内がリンクだらけになるのが見づらかったので。

広告を非表示

「表示しない」にチェック。

まぁ言わずもがなですね。

ヘッダとフッタ

「表示しない」にチェック。

はてなブログ感がなくなり、見栄えがよくなります。

解析ツール

解析や検索に関するツールに登録をし、それぞれコードを設定。

Google Analytics
Google Search Console
Bing ウェブマスターツール

ブログやってるならまずやってますよね？

headに要素を追加

これらを追加しました。

<link rel="alternate" hreflang="ja" href="http://www.lisz-works.com/" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<meta name="theme-color" content="#7D2CA5">

<!-- AdsenseフッターAd -->
アドセンスのコード
</script>

上から

Google Serch Console用(エラー対策)
Webアイコンを使用するためのCSS
Android版Google Chrome用のタブの色設定
スマホ用Google Adsenseのフッター用コード

を設定。

デザイン→デザインテーマ(パレットアイコン)

最初に表示されている、「公式テーマ」から選択するか、1番下にスクロールして、「テーマストアでテーマを探す」から設定します。

ぼくは「SharpNight」というテーマを設定しています。

rokuzeudonさん、お世話になっております。ありがとうございます。

デザイン→カスタマイズ

デザインテーマでテンプレートを設定していますが、ここからさらにプラスして自力でちょくちょくいじってます。

記事→ソーシャルパーツ

「ソーシャルパーツ」は自力で設定しているので全てOFF。

設定したものはこちら。

www.lisz-works.com

記事→記事上

アドセンスと、広告非表示用のスクリプトをセットしています。

広告非表示スクリプトについては、こちらを参考にしました。

hapilaki.hateblo.jp

<script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //広告を設置しないタグを指定
var pageTags=document.getElementsByTagName("meta");
function adsFilter(){
for(var i=0;i<pageTags.length;i++){
if( ("article:tag"==pageTags[i].getAttribute("property")) && (noAdsTag == pageTags[i].getAttribute("content") ) ){
document.write('<!--');
break;
}
}
}
adsFilter();
</script>
<p style="text-align: center;"><span style="font-size: 85%;">【スポンサーリンク】</span><br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5328667023356520"
     data-ad-slot="4040551091"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>
<!-- lisz-works レスポンシブ -->

記事下

アドセンスとソーシャルボタン、合わせ読みたいを載せています。

ソーシャルボタンはこちらで。

www.lisz-works.com

合わせて読みたいは、Milliardを使っています。

簡単にキレイな表示が設定できるので、スバラシイ！

<!-- ads filter -->
<script>adsFilter();</script>
<p style="text-align: center;"><span style="font-size: 85%;">【スポンサーリンク】</span><br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-5328667023356520"
     data-ad-slot="5917139898"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- lisz-works 336x280 -->

<!-- ソーシャルボタン -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selcter ).text( res.shares || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
  jQuery.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    },
    success:function(res){
      jQuery( selcter ).text( res || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
jQuery(function(){
  get_social_count_facebook('{Permalink}', '.facebook-count');
  get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>

<!--シェアボタン-->
<div class="share-flat">
<span style="font-size: 8px">シェアする</span>
<div class="share-flat-inner">
<div>
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
</div>
<div>
<!--ググタス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
<!--ライン-->
<span class="line-hide">
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" /><br><span class="small-text">Line</span>
</a></span>
</div>
</div>
</div>

<!-- あわせて読みたい -->
<script>//<![CDATA[
window.Shisuh = (window.Shisuh) ? window.Shisuh : {};Shisuh.topUrl='http://www.lisz-works.com/';Shisuh.type='Hatebu';Shisuh.headerText='こちらもいかがですか？';Shisuh.alg='Related';Shisuh.insertAfterScript='1';Shisuh.showInsert='1';Shisuh.originalTemplateTypeWide='Panel';Shisuh.originalTemplateTypeNarrow='List';Shisuh.offScrollCount='5';
//]]></script><script id="ssRelatedPageSdk" type="text/javascript" charset="utf-8" src="https://www.shisuh.com/djs/relatedPageFeed/"></script>

記事→パンくずリスト

「表示する」にチェック。

記事上部にパンくずリスト(今どこにいるのかを表示するやつ)が表示されます。

サイドバー

ぼくはこのように変更しました。

検索
プロフィール
注目記事
カテゴリー
関連記事
スポンサーリンク
最新記事
月別アーカイブ
このサイトについて

2.の「プロフィール」には、俗にいう乞食リストと、フォローボタンを設置しています。

フォローボタンは、自力で設定しているので、はてな標準のチェックボックスは全てOFF。

もらったら大喜びします
<a href="http://amzn.asia/bqLh1B6">lisがほしいもの</a>

<div class="follow-btn">
<ul>
<!--読者ボタン-->
<li class="btn1">
<a href="http://blog.hatena.ne.jp/liszworks/www.lisz-works.com/subscribe"  target="_blank"><span class="btn1-icon"><br /></span>Hatena</a></li>
<!--Twitterボタン-->
<li class="btn2">
<a href="https://twitter.com/intent/follow?screen_name=bgwk1is" target="_blank"><span class="btn2-icon"><br /></span>Twitter</a></li>
<!--Feedlyボタン-->
<li class="btn3">
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.lisz-works.com%2Ffeed" target="_blank"><span class="btn3-icon"><br /></span>Feedly</a></li>
</ul>
</div>

9.の「このサイトについて」は、リンク集のモジュールを追加しています。

内容は、「プライバシーポリシー」と「お問い合わせ」のリンクをはっています。

フッタ

フッタには、コピーライトと、文章を表示／非表示にする為のスクリプト、アドセンス、またトップへスクロールするボタンのスクリプトが設置してあります。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
$(document).ready( function () {
   $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>

<div id="n-copyright" align="center">
<h4>&copy; 2017 <a href="http://www.lisz-works.com/">lisz-works</a></h4>
</div>

<script>
  $(function(){
    var strOpen = '[表示]';
    var strClose = '[隠す]';
    $('.otantoggleopn').append(' <span style="color: #666; font-size: 80%">' + strClose + '</span>');
    $('.otantogglecls').append(' <span style="color: #666; font-size: 80%">' + strOpen + '</span>').next().css('display', 'none');
    $('.otantoggleopn, .otantogglecls').click(function(){
      var $this = $(this);
      $this.next().slideToggle(400);
      if($this.children('span').text() == strClose) {
          $this.children('span').text(strOpen);
      } else {
          $this.children('span').text(strClose);
      };
    });
  });
</script>

<!-- AdsenseフッターAd -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-5328667023356520",
    enable_page_level_ads: true
  });
</script>

<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が200を超えた場合
       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;">ページTOPへ ▲</a>

デザインCSS

デザインはちまちまと色々設定しているので、長いです……

気になった所を自分なりに足していっています。

/* <system section="theme" selected="6653458415126702313"> */
@import "http://hatenablog.com/theme/6653458415126702313.css";
/* </system> */

/* <system section="background" selected="undefined"> */


/* </system> */

/* 画像 センタリング */
.entry-content img {
    display: block;
    margin: 0px auto;
}

/* リスト */
ul {
    margin-left: 30px;
    padding-bottom: 10px;
}

/* 目次関連 */
.table-of-contents:before {
    content: "目次";
    font-size: 120%;
    font-weight: bold;
}
.table-of-contents{
    padding: 20px 10px 20px 40px;
    /*border-radius: 5px;*/
    background: #444;
    margin-right: 40px;
}
.table-of-contents  ul{
    font-size: 90%;
    margin-left: 0;
}
.table-of-contents ul ul{
    display: none;
}

/* ヘッダー */
.entry-content h3{
    color: #444444;
    background: #f3f3f3;
    padding: 10px 15px; 
    border-left: 10px solid #7000e0;
    /*border-radius: 5px;*/
}
.entry-content h4 {
    background: #444;
    color: #ccc;
    border-left: 10px solid #7000e0;
    border-bottom: 1px solid #7000e0;
    padding: 5px 5px; 
    padding-left: 10px;
}
.entry-content h5 {
    /* background: #f3f3f3; */
    /* border-left: 10px solid #7000e0; */
    border-bottom: 1px solid;
    padding-left: 10px;
}

#blog-title {
  border-bottom: #7D2CA5 3px solid;
  padding-bottom: 15px;
}

/* パン屑リスト */
#top-box .breadcrumb {
    background: #3a3a3a;
    border: 0px
}

/* 引用 */
.entry-content blockquote {
    background: #222;
}

/* シェアボタン */
.share-flat{
    margin-bottom: 10px;
    text-align: center;
}
.share-flat-inner a {
    position: relative;
    display: inline-block;
    width: 18%;
    height: 40px;
    line-height: 20px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}
.share-flat .small-text{
    font-size: 10px;
}
.share-flat .hatena-bookmark-button{
    background: #00A4DE;
}
.share-flat .twitter-button{
    background: #55ACEE;
}
.share-flat .googleplus-button{
    background: #C53727;
}
.share-flat .facebook-button{
    background: #405BA7;
}
.share-flat .pocket-button{
    background: #EE4256;
}
.share-flat .line-button{
    position:relative;
    top: 1px;
    background: #00C300;
}
.share-flat a:hover{
    opacity: 0.6;
}
@media screen and (min-width: 480px) {
    .line-hide{
        display: none;
    }
    .share-flat-inner a{
        width: 18%;
    }
}

/* フォローボタン */
.follow-btn{
 width: 100%;
 margin: 5px 0px 5px 0px;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;
 width: 100%;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
}
.follow-btn li:hover {
 width: 200%;
}
.follow-btn li span{
 line-height:2.5;
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.btn1{
 background: #5F5E5E;/*読者ボタンの背景色*/
}
.btn2{
 background: #6FB6C3;/*Twitterの背景色*/
}
.btn3 {
 background: #82C36F;/*Feedlyの背景色*/
}
.btn1-icon:before{
 content: "\f000";/*はてなアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn2-icon:before{
 content: "\f035";/*Twitterアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn3-icon:before{
 content: "\f04e";/*Feedlyアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.follow-btn a {
 width:100%;
 height:100%;
 font-size: 13px;
 line-height: 1;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
 color: #fff;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}

/* ヨメレバ・カエレバ（レスポンシブ） */
.booklink-box, .kaerebalink-box{
    padding:25px 20px 5px 5px;
    margin-bottom: 10px;
    border:double #C00 6px;
    overflow: hidden;
    font-size:small;
    background: #000;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:30%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a, .shoplinkseven a{background-color:#FF9901 !important;}
.shoplinkrakuten a, .shoplinkrakukobo a{background-color:#c20004 !important;}
.shoplinkkindle a{background-color:#007dcd !important;}
.shoplinkkakakucom a{background-color:#314995 !important;}
.shoplinkyahoo a{background-color:#7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
    .booklink-box, .kaerebalink-box{padding:15px;}
    .booklink-image, .kaerebalink-image{
        width: 100px !important;
        min-width: initial;
    }
    .booklink-name > a, .kaerebalink-name > a{
        font-size: 15px;
        font-weight: bold;
    }
    .booklink-name, .kaerebalink-name{margin-bottom:12px;}
    .booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
    .booklink-link2 a,
    .kaerebalink-link1 a{
        width:calc(100% - 4px);
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        margin: 2px 0px;
        padding:10px 0px;
    }
}

/*アプリーチカスタム*/
#appreach-box {
    border-radius: 5px;
    border: double 3px #c4f;
    margin-bottom: 10px;
    background:#000;
}
.appreach-links{
    margin-bottom: 10px;
}
.appreach-footer{
    margin-bottom: 0;
    line-height: 0;
}

/* Amazlet */
.amazlet-box {
    padding: 5px;
    border: solid 3px #f90;
    background: #444;
}

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:10px;
    right:10px;
    padding:10px 20px;
    color:#fff;
    font-size:15px;
    text-decoration:none;
    background:#3a0075;
}
/* ページトップへ戻るボタン：ホバー時 */
#pagetop:hover {
    background:#db00a4;
}

デザイン→スマートフォン

スマートフォン用デザインは、レスポンシブデザインにしているので、ほとんどが勝手にPC用と同じものが設定させています。

詳細設定

「レスポンシブデザイン」にチェック。

これだけでレスポンシブデザインになるから、はてなブログはすごいです。
(実際どういった仕組みで作れるのかまで知らないのでなんともですが)

あとがき

どこかの誰かの何かの参考になるかなーと思い、今の設定などを公開してみました。

lisz-works

プログラミングと興味を貴方に