【はてなブログ】超初心者向け【蛍光マーカー】【更新日】をカスタマイズする方法

CSS やHTML によるカスタマイズは、超初心者レベルです。スマホだけでブログを書いていますので、操作に限界があるというのがその理由のひとつかなと思っています。(言い訳、言い訳。笑)

そんな私ですが、自粛のGWで時間があったこともあり、これまでやろうと思っていたけど後回しにしていたことを、調べながらやってみました。

その内容を備忘録として記事にしておきたいと思います。

基本的には、簡単にコピペだけでカスタマイズできるようにし、あとは色などの微調整だけで使えるようにまとめてみました。

ですので、CSS？HTML？だけど、蛍光マーカーをつけたい。更新日付を入れたい。と思っている方に読んでいただけたら嬉しいです。

文字に蛍光マーカーをつける
- B(太字)機能でマーカー
- Ｕ(アンダーライン)機能でマーカー
リライトした時に最終更新日をつける

文字に蛍光マーカーをつける

このように蛍光ペンで線を引いたようなものです。

一度設定してしまえば、カスタマイズは終了です。

B(太字)機能でマーカー

はてなブログの編集機能であるB(太字) を、いつも太字にする時と同じように押すだけで、文字に蛍光マーカーが引けます。

ダッシュボードのデザインからスパナマークのタグに入り、デザインCSSに以下のCSSコードを貼り付けます。

/*太文字マーカー*/

.entry-content strong {

background: linear-gradient(transparent 60%, #7fffd4 80%);

}

私はマーカーの色をアクアマリン(#7fffd4)にしていますが、上記コード内のカラーコード(みどりに色付けした#7fffd4)の箇所を変えるだけで、好きな色に変更可能です。

Ｕ(アンダーライン)機能でマーカー

はてなブログの編集機能のＵ(アンダーライン)を、いつもアンダーラインを引く時と同じように押すだけで、文字にマーカーを引けます。

ダッシュボードのデザインからスパナマークのタグに入り、記事→記事下に貼り付けます。

<style type="text/css">

article u{

font-weight:bold;

text-decoration: none;

margin:0 0.1em;

padding:0.1em 0.2em;

background:#7fffd4 !important;

background:linear-gradient(to bottom, transparent 60%, rgba(127,255,212,0.8) 60%) !important;

}

</style>

B(太字)機能でマーカーと同様に、コード内のカラーコード(みどりに色付けした英数字)の箇所を変えるだけで、好きな色に変更可能です。

水色に色付けした、rgba(127,255,212,0.8)内の数字127,255,212は、アクアマリン(#7fffd4)のRED,GREEN,BLUE(RGB)の値。カラーコードも変更したら、ここもその色のRED,GREEN,BLUE(RGB)に変更します。

カラーコードは、Web用のカラーコードを使います。こちらの色見本がおすすめ。上記のRED,GREEN,BLUE(RGB)の値もわかります。

www.colordic.org

もっと簡単に済ませたい場合には、「rgba(127,255,212,0.8)」の代わりに「#7fffd4」を使っても大丈夫です。その場合は以下のようになりますね。

background:linear-gradient(to bottom, transparent 60%, #7fffd4 60%) !important;

ただ、この場合(rgbaを使わない場合)、マーカーの透明度はなくなりますので、もっとはっきりした(どぎつい？)アクアマリンになります(試し済み)。

当初は、とても手軽で簡単にカスタマイズできるB(太字)機能でマーカーにしていたのですが、太字にだけしたい(マーカー要らない)ケースがあるので、現在は、Ｕ(アンダーライン)機能でマーカーにしています。

私は、蛍光マーカーは一色のみにしていますが、Ｕ(アンダーライン)機能でマーカーのコードを応用すれば、イタリックでも蛍光マーカーにできて、2色のマーカーを使い分けることができるかもしれませんね。

リライトした時に最終更新日をつける

この↓青い丸で囲んだもののことです。

f:id:tueko:20200516011812p:image

2つの作業(2つのコードを貼り付ける)が必要です。

①記事に更新日の表示機能を持たせるための作業。

ダッシュボードのデザインからスパナマークのタグに入り、記事→記事下に以下のHTMLコードを貼り付けます。

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>



<script>

;(function($) {

'use strict';

var urls = [], opts = {cache: false, dataType: 'xml'}, p,

url = 'https://www.tue.tokyo/sitemap.xml';

function parseSitemapXML(url) {

var d = new $.Deferred;

$.ajax($.extend(opts, {

url: url

})).done(function(xml) {

$(xml).find('sitemap').each(function() {

urls.push($(this).find('loc').text());

});

d.resolve();

}).fail(function() {

d.reject();

});

return d.promise();

}

function findURL(url) {

$.ajax($.extend(opts, {

url: url

})).done(function(xml) {

var isMatched = false;

$(xml).find('url').each(function() {

var $this = $(this);

if ($this.find('loc').text() === location.href) {

isMatched = true;

appendLastmod($this.find('lastmod').text());

return false;

}

});

if (!isMatched) nextURL();

}).fail(function() {});

}

function nextURL() {

urls.shift();

if (urls.length) findURL(urls[0]);

}

function appendLastmod(lastmod) {

var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));

if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {

$('.entry-title').before($container);

} else {

$('.entry-date').append($container);

}

}

p = parseSitemapXML(url);

p.done(function() {findURL(urls[0])});

p.fail(function(error) {});

})(jQuery);

</script>

httpsで配信しているサイト・Google Search Consoleでサイトマップ送信していることが前提です。httpsで配信しているかどうかは、サイトのURLで確認できます。私のサイトはhttps://www.tue.tokyo。
コード内に赤で色付けしたURLは、更新日をつけたいサイトのURLに変更してください。

②フォントサイズ、カラー、文字の太さ・大きさ、アイコンの指定など、見た目をアレンジするための作業。

ダッシュボードのデザインからスパナマークのタグに入り、デザインCSSに以下のCSSコードを貼り付けます。

/*--更新日時表示--*/

.lastmod {

background-color: transparent;

padding: 5px 0px;

text-decoration: none;

font-size: 15px;

display: inline;

margin-left: 0px;

color: #fea4ab;

}

.lastmod::before {

margin-right: 5px;

margin-left: 10px;

padding-left: 3px;

font-family: "blogicon";

font-weight: bold;

content: "f031";

}

.entry-date a {

background-color: transparent;

padding: 5px 0px 5px 6px;

text-decoration: none;

font-size: 15px;

display: inline;

}

.entry-date a::before {

margin-right: 5px;

padding-left: 3px;

}

/*--更新日時表示--*/

上記のカラー指定で使っているコード#fea4abは、このサイトで使用しているデザインテンプレート「Journal-Pink」(はてな公式)で使われているピンクのカラーコード。色を合わせています。
上記コード内で紫で色付けしたのは、Webアイコンフォントの指定。更新日付の前にある時計のアイコン(f031)を指定しました。ここに好きなアイコンのコードを入れるだけで、変更可能です。

アイコンフォントというのは、↓の時計のようなマークのことです。

f:id:tueko:20200516011843j:image