変更後がこちら

f:id:joko0108:20170404165629p:plain

ヘッダー部分には記事一覧へのリンクと読者になるボタンのみを置くようにしました。

シンプルすぎて楽しくないけどいいよね！

もともとは

f:id:joko0108:20170404165644p:plain

このヘッダーが表示されていました。

Hatena Blogというところをタップしても「はてなブログのトップページ」に遷移してしまうので、ものものブログ的には特に利点のないヘッダーでした。

変えてみてどうなの？

まぁ元のよりは意味のあるものになったかなという感じです。

というかヘッダー自体鬱陶しくて、ここ数日間は非表示にしていたんです。

でもそれだと読者になるボタンが表示されていないことに気づいたので急いでこの対応をしました。

カテゴリ表示とかもうちょっとイケてるデザインにしたいところですが、こだわるのはまたしばらくしてからにします。

適応方法

今回はスマホのみに適応する方法です。

f:id:joko0108:20170404175613j:plain

はてなブログの設定の

ヘッダ→タイトル下
記事→記事上

に以下のコードを貼ることで適応されます。

僕のブログURLのままのサンプルコードになっているのでいくつか変更してからご利用ください。

var blog_url 部分を変更してください。自分のブログのURL
var blog_title 部分を変更してください。自分のブログのタイトル
var icon_url 部分を変更してください。ヘッダーに表示されるアイコン画像URL
var subscribe_url は購読用のリンクURLに書き換えてください。
CSSでボタン色とかデザインは自由に変えてもらって構いません。

修正、改変ご自由にどうぞ。

コード

<script>
document.addEventListener('DOMContentLoaded', function() {
    //---------------------------------------------------------------
    // ヘッダーを自作のものに変更
    var blog_url = "http://mono-mono.hatenablog.com/";
    var blog_title = "ものものブログ";
    var icon_url = "http://cdn.image.st-hatena.com/image/square/c54467634ca6731d66926c41687223336916c4ea/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fjoko0108%2F316969481619063197.gif";
    var subscribe_url = "http://blog.hatena.ne.jp/ユーザー名/ブログアドレス/subscribe";
    // -------------------------------
    var headersource = "<div id='my_header'>" +
        "<a href='"+blog_url+"'><img id='icon' src='"+icon_url+"' alt='"+blog_title+"'></a>" +
        "<a href='"+blog_url+"'><span id='title'>"+blog_title+"</span></a>" +
        "<a id='subscribe' href='"+subscribe_url+"'>読者になる</a>" +
        "</div>";

    $("div#globalheader-container").before(headersource);

    // 既存のヘッダーを隠す。
    $("div#globalheader-container").hide();
    //---------------------------------------------------------------

});
</script>

<style type="text/css">
/* ---------------------------------------------------------------------- */
p {
    line-height: 1.75;
    font-size: 16px;
}

/* ---------------------------------------------------------------------- */
/*ヘッダーに関するもの*/

div#my_header {
    background: #f7f7f7;
    border-bottom: 1px solid #ccc;
    height: 44px;
    position: fixed;
    width: 100%;
    z-index: 100;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
}
div#my_header img#icon {
    height: 36px;
    border-radius: 99px;
    margin: 0px 7px 3px 8px;
    vertical-align: middle;
}
div#my_header span#title {
    line-height: 44px;
    font-weight: bold;
    color: #333;
    font-size: 18px;
    display: inline-block;
}
div#my_header a#subscribe {
    display: inline-block;
    right: 0px;
    position: absolute;
    line-height: 28px;
    border: solid 2px #cccccc;
    border-bottom: solid 3px #9a9a9a;
    border-right: solid 3px #9a9a9a;
    margin: 6px 6px;
    padding: 0px 6px;
    background: #fbf465;
    border-radius: 4px;
    color: #3d3f44;
    font-weight: bold;
    font-size: 13px;
}
</style>