ムニエルブログのテーマを「Smooth」に変更しました

f:id:munieru_jp:20190602170034p:plain

ムニエルブログのテーマを、はてなブログ公式テーマのSmoothに変更しました。

今までのテーマ

以前は、Materialを使用していました。

2018年11月24日に変更して以来半年間使ってきましたが、マテリアルデザインはブログのデザインとしてはやや冗長に感じていました。

今回のコンセプト

ブログは記事が主体なので、なるべく余分な要素を取り除きました。
以前はサイドバーにTwitterのウィジェットやAmazonの広告を載せていましたが、やはり読み込みに時間がかかりがちなので、思い切って無くしてしまいました。

行なったカスタマイズ

テーマ自体の完成度が高いので、そこまでカスタマイズしている点はありません。
ただ、このブログは技術ブログ的な側面もあるので、技術記事に必要なところにはこだわっています。

リンク色を変更

デフォルトではリンク色が緑色になっているので、CSSで以下のように変更しました。

通常時：#007bff
ホバー時：#0056b3

やはり、リンクは青色のほうがしっくりきますね。

外部リンクを新規タブで開く

僕は記事を基本的にMarkdownで書いているのですが、Markdownではリンクにtarget="_blank"を指定することができません。
外部リンクは新規タブで開いてほしいので、JavaScriptで動的にtarget="_blank"とrel="noopener noreferrer"を追加しています。

function makeExternalLinkOpenInNewTab () {
  getExternalLinkElements().forEach(link => {
    link.setAttribute('target', '_blank')
    link.setAttribute('rel', 'noopener noreferrer')
  })
}

function getExternalLinkElements () {
  return Array.from(document.querySelectorAll(`a[href^="http"]:not([href^="${location.origin}"])`))
}

シェアボタンを設置

はてなブログの標準機能でソーシャルボタンを表示することもできますが、ソーシャルボタンはJavaScriptを使用していて読み込みに時間がかかるので、記事の上下に静的なHTMLによるシェアボタンを設置しています。

f:id:munieru_jp:20190602195937p:plain

これらのシェアボタンは、以下の記事に掲載されているものをもとに作りました。

変更点としては、アイコンをFont Awesomeのものにしたり、ホバー時のエフェクトを無くしたりしています。

コードブロックにラベルを追加

この記事にも登場していますが、コードブロックにラベルを表示するようにしています。

function addLabelToCodeBlocks () {
  getCodeBlockElements().forEach(codeBlock => {
    const label = codeBlock.parentElement.dataset.label || codeBlock.dataset.lang
    if (label) {
      codeBlock.dataset.label = label
    }
  })
}

.entry-content pre.code[data-label] {
  position: relative;
  margin: 0 0 1.5em 0;
  padding: 1.6em 1em 1em;
}

.entry-content pre.code[data-label]::before {
  content: attr(data-label);
  background-color: #444;
  color: #fafafa;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0.8em;
}

デフォルトでは言語名を表示しますが、コードブロックを<div data-label="ラベル"></div>で囲むことで表示するテキストを指定することもできます。
たとえば、<div data-label="index.js"></div>で囲むと以下のようになります。

const message = 'Hello World'
console.log(message)

はてなブログがQiitaのようにコードブロックのラベル指定に対応していないため、このような手法をとっています。

カラーコードのプレビューを表示

この記事にも登場していますが、#F44336のようにカラーコードを記載すると、その横にカラーコードのプレビューを表示するようにしています。

function addColorCodePreviews () {
  getColorCodeElements().forEach(code => {
    const color = code.textContent
    code.outerHTML = `${code.outerHTML}<span class="jp-munieru-blog-color-code-preview" style="background-color: ${color};"></span>`
  })
}

.jp-munieru-blog-color-code-preview {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid #d1d5da;
  border-color: rgba(27, 31, 35, 0.15);
  border-radius: 3px;
}