2016-03-26 01:05

はてなブログに引越しして

カテゴリー: Tech タグ: web/tech

はてなブログに引越して¹から落ち着いてきたので、これまでの設定をまとめておきます。

ブログ設定

基本設定

まず、ブログアイコンを設定できようなので、簡単な画像を作成しました。これがFaviconに使われるのでしょうか。

編集モードは、「Markdown記法」を使用しています。はてなブログが提供するサイドバーの機能を使うと、実質的には「はてな記法」が入り混じった文章になってしまいますが。

拡張設定

アイキャッチ画像がsっていできるので、ブログアイコンを引き伸ばしたものを設定しました。また、独自ドメインを使用しているので設定しています。

キーワードリンクや広告は表示は切ってあります。Proの特権ですから。

Google Analytics や Search Consoleの設定が、プロパティの設定だけでできてしまうのは簡単で良いですね。

デザイン

シンプルなものが好みなので、Innocentというテーマを設定してみました。

メニューバーはどうするか考えあぐねて、一旦非表示にしています。

サイドバーは出来合いのもの並べただけですが、唯一RSSフィードのリンクがはてなプログはデフォルトでは提供されないので以下のようなパーツを自分で作りました。

<a href="https://log.yostos.org/rss/"><img class="hatena-fotolife" title="RSS Feed" alt="RSSフィード" src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mute/20160322/20160322104259.png" alt="f:id:mute:20160322104259p:plain" /></a>

&nbsp;&nbsp;

<a href="https://feedbin.com/?subscribe=https://log.yostos.org/feed"><img class="fotolife" title="Feedbin" alt="Feedbin subscribe" src="https://f.st-hatena.com/images/fotolife/m/mute/20160323/20160323015620.png?1458665821" /></a>

&nbsp;&nbsp;

<a href='https://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Flog.yostos.org%2Ffeed'  target='blank'><img id='feedlyFollow' src='https://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-small_2x.png' alt='follow us in feedly' width='66' height='20'></a>

RSS、FeedbinとFeedlyのSubscribeボタンです。

目次を自動生成する

なてなブログでよくみる目次ですが、jQueryを使った自動生成を紹介した記事を参考に自動挿入するように作ってみました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

<script type="text/javascript">
$(function(){
    var list = "";
    // h3見出しを検索
    $(".entry-content h3").each(function(i){
        var idName = "section"+i;
        $(this).attr("id",idName);
        list += '<li><a href="#' + idName + '">' + $(this).text() + '</a></li>';
    });
    // h3見出しが2つ以上あったら目次を表示する
    if ($(".entry-content h3").length >= 2){
        $("<div class='sectionList'><h3>目次</h3><ol>" + list + "</ol></div>").prependTo(".entry-content");
    }
    // 見出しへのスクロールを滑らかにする
    $('.sectionList a').on("click", function() {
        $('html,body').animate({scrollTop: $(this.hash).offset().top}, 600);
        return false;
    });
});
</script>

/* 目次 */
article .entry-content .sectionList {
    background: #F8F8F8;
    padding: 15px;
    border: 1px solid #CCC;
}

article .entry-content .sectionList h3 {
    font-size: 110%;
    margin: 0;
}

article .entry-content .sectionList ol {
    margin: 10px 0 0;
    padding: 0 0 0 1.5em;
    list-style: decimal;
}

積み残し作業

まだ、記事の相互リンクや画像が古いブログを刺したままなので整理していかないと。

2016-05-14追記 : このブログはさらにはてなブログから移転して、現在2016年5月現在Ghostで運用しています。 ↩