はてなブログ リライト日付の表示方法
ブログというのは、リライトが重要であることを最近学びました。
このBuchoLOG Globalも地道にリライトしています。
さて、せっかくリライトしたのにその日付を手動で書くのはなんとも非効率です。 自動で表示させたいものです。
いろいろ調べ、うまくいかなかったことを乗り越えた結果、やっとわたしもこの設定ができました。
今回はその方法を簡潔にまとめます。 参考にしていただけたらと思います。
リライト表示設定
前提
はてなProであること。
無料バージョンはソースコードが違いますので、オリジナル（記事末）をご確認ください。
ソースコード貼り付け
以下のソースを
デザイン→ PC →記事下
に挿入します。
なお、オリジナルソースを一部修正しています。
jquery-2.2.3を3.2.1にバージョンアップしています。
<!--[if lt IE 9]> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> <!--<![endif]--> <script> /* * Show lastmod for Hatena Blog2 v1.0.1 * Date: 2016-12-20 * Copyright (c) 2016 http://www.tsubasa-note.blog/ * Released under the MIT license: * http://opensource.org/licenses/mit-license.php */ ;(function($) { 'use strict'; var html = '', p; function getAmpHtml() { var d = new $.Deferred; $.ajax({ dataType: 'html', cache: false, url: location.origin + location.pathname + "?amp=1" }).done(function (data) { html = data; d.resolve(); }).fail(function () { d.reject('Error'); }); return d.promise(); } function parseAmpHtml() { var m = html.match(/<script type="application\/ld\+json">(.*?)<\/script>/); if (m === null) return; appendLastmod(JSON.parse(m[1]).dateModified.split('T')[0]); } function appendLastmod(lastmod) { var $container = $('<div></div>', {'class': 'lastmod'}); $container.append($('<span></span>', {'class': 'date-year'}).text(lastmod.split('-')[0])); $container.append($('<span></span>', {'class': 'hyphen'}).text('-')); $container.append($('<span></span>', {'class': 'date-month'}).text(lastmod.split('-')[1])); $container.append($('<span></span>', {'class': 'hyphen'}).text('-')); $container.append($('<span></span>', {'class': 'date-day'}).text(lastmod.split('-')[2])); if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') { $('.entry-title').before($container); } else { $('.entry-date').append($container); } } p = getAmpHtml(); p.done(parseAmpHtml); p.fail(function(error) {}); })(jQuery); </script>
参照元は記事末に記載しています。
更新日付の表示設定
デザインCSSに以下のコードを挿入します。
白の背景に合うように、書式変更しています。
実際の表示のされ方は、わたしの記事の冒頭をご確認願います。
この部分は単なる表示の書式です。
ご自身のテーマにあわせてカスタマイズして問題ございません。
.lastmod {
padding: 5px 6px;
text-decoration: none;
font-size: 90%;
display: inline;
margin-left: 10px;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f021';
}
.entry-date a {
font-size: 90%;
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
}
うまく表示されなかったら・・・・
１）AMP設定がONになっているか確認してください
設定→詳細設定→AMP
これはProのみの機能です。
これをONにすると更新日時のデータを拾うようになります。
２）Font-awesomeが使える状態が確認してください
記述した記憶がなければ、
デザイン→PC→ヘッダ→記事下
に以下追記してみてください。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
参考元
更新日自動表示のカスタマイズをアップデートしました、レスポンシブデザインの方はご確認ください | つばさのーと
はてなブログのMarkdown法における複数行改行コードは、＜br＞、＜br/＞、＜br /＞のいずれかを連続して入力すればOK
Minimalism グローバルメニューの設置方法
わたしが現在利用しているテーマはMinimalismというテーマです。
その名の通りデザインがスッキリしており、わたしはこれが気に入っております。
このテーマにグローバルメニューを設定しました。
この設置を色々調べながらやったわけですが、情報が散見しており時間がかかってしまいました。
以下、重要な部分のみ参考サイト（後述）から一部抜粋して説明します。
これを読んで実施すれば、おそらく設定は5分程度の所要時間と思います。
（しかし、アイコン選びに時間がかかると、この時間をオーバーします。）
グローバルメニューの設定
設定前提
レスポンシブデザインに設定変更しておくことを忘れないでください。
はてなPro前提です。（無料バージョンはわかりません。）
コードの挿入
デザイン → PC → ヘッダ → タイトル下 に以下のコードを追加します。 コピペでOKです。
<nav id="gnav"> <div class="gnav-inner" id="menu-scroll"> <div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div> <div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div> <div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div> <div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div> <div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div> <div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div> </div> </nav>
URLの指定
リンク先の任意のURLに書き換えてください。
アイコンの設定
アイコンも自由に設定できますが、このアイコンを使うには以下の準備が必要です。
１）以下のコードを、グローバルメニューコードの上もしくは下に挿入してください。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
注）参考サイトの説明では、
設定→詳細設定→head要素内に記述する
となっていたのですが、わたしはうまく反映されなかったので、場所を変更しております。
２）下記リンクから好きなアイコンを選び、そのアイコンコードを貼り付けたコードの該当部分のものと置換します。
３）いくつでも追加可能です。
<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div> </div>
これが１セットになります。
はてなブログのMarkdown法における複数行改行コードは、＜br＞、＜br/＞、＜br /＞のいずれかを連続して入力すればOK
参考サイト
こちらの２サイトを参考に設定しました。 上記手順でわたしは問題なく使用できておりますが、うまくいかない場合はオリジナルコンテンツをご確認願います。
記事を読む目安時間の表示設定
便利な情報を入手しましたので、シェアします！
こんな表示ができるようになる設定です。
もちろん、わたしができるわけありません。
すずしんさんが書かれた記事です。
設定自体は20秒もかかりません。
ではでは！
はてなブログのMarkdown法における複数行改行コードは、＜br＞、＜br/＞、＜br /＞のいずれかを連続して入力すればOK
はてなブログのMarkdown法における複数行改行コードは、＜br＞,<br/>,<br />のいずれかを連続して入力すればOK
このブログを書いてる際、どうしても行間が詰まって見えるため修正したいと思っていました。
まずはこちらのページを参考にして、行間を空けずに改行する方法は取得しました。
cartman0.hatenablog.com
しかし、複数行分の改行を入れることができませんでした。
投稿画面にて、Enterボタンによる「改行」をさせていても、Web上ではそのように反映してくれなかったのです。
ようやくわかりましたのて、シェアします。
[br][br][br]
（ただし、[ ] は＜＞に置き換えてください！正しく書くと文字が表記されません！）
このように連続してbrコードを入力しますと、その数だけ改行スペースが入ります。（この場合は３行分）
2ヶ月悩んでいたことが解決しました。
ではでは。
