えんでぃの技術ブログ

えんでぃの技術ブログ

ネットワークエンジニアの視点で、IT系のお役立ち情報を提供する技術ブログです。

【Minimalism】コピペでOK!はてなブログのカスタマイズ全公開 (1)

happy-man
「ようやく納得のいくカスタマイズができたー!」という私の喜びを表すフリー画像です。
私ではありません。念のため。

更新履歴

時折スタイルシートの不具合修正や改善を行います。
スタイルシートを更新した際は、こちらにメモしていきますのでチェックください。

本記事のスタイルシートは最新化しているので、これからコピペする方は更新履歴をチェックしなくても大丈夫です。

過去にスタイルシートをコピーされた方は、下記記事をご確認いただき、必要に応じて修正をお願いします。
お手数をおかけしますが、よろしくお願いします m(_ _)m

endy-tech.hatenablog.jp

更新のサマリ

  • 2021/12/31 行間スペースの見直し
    • 全体的に行間の間隔が広すぎるのを調整しました
    • 要素間の間隔が非対称・不統一だった部分を調整しました
    • 引用部分の"のフォントを変更し、Linuxブラウザでも見た目が変わらないようにしました
  • 2021/11/13 脚注部分の微調整
    • 脚注部分の文字サイズが大きく、行間が広すぎたので調整しました
    • また、スマホで表示した時に脚注の左端が切れる問題にも対応しました
  • 2021/1/31 記事に更新日付を自動表示するようにしました (次の記事の手順も必要です)
  • 2020/10/18 (微改善) highlight.js対応、及び見た目のブラッシュアップ
    • Syntax Highlight のカラースキームを変更 (molokai --> Nord)
    • highlight.jsに対応
    • 見出し2, 見出し3の項番自動採番を廃止 (コメントアウト)
    • 強調表現 (strongタグ) の蛍光ペンを少し薄く、細くした
    • ハイパーリンククリック後の色を変更
    • 箇条書きの段落幅をデフォルトの40pxから1文字分に変更
  • 2020/9/11 (微改善) コードブロック下部に余白を追加
  • 2018/11/18 (修正) 見出し3, 4が誤った番号で採番される問題を修正

お伝えしたいこと

当ブログで使用しているカスタマイズのコードを丸々公開します。
ここで紹介する方法で設定すれば、当ブログのカスタマイズがそのまま再現されます。

「丸ごと同じデザインではつまらない」という方も、まずはこちらを読んで全体感を把握してみてはいかがでしょうか...?

利用は「自由」

もちろんですが、ここで紹介するコードの利用には許可は一切不要です。
丸ごとコピー、アレンジ、引用、なんでもアリです!

Minimalism使ってます

ブログテーマはMinimalismを使っています。
シンプルさを追求したMinimalismは、何もカスタマイズしなくても十分美しく、それでいてカスタマイズ性にも富んでいます。
テーマ作者様からの紹介記事にも様々なカスタマイズ手法が載っています。
ぜひ見てみてください!

hitsuzi.hatenablog.com

カスタマイズの紹介

カスタマイズしたらどのような見た目になるかを紹介します。

見出し、本文、目次

ブログタイトル、見出し1~4、本文、目次は以下のようになります。

title-section

強調、引用表現

強調表現は、太字と下線で表現しています。

強調強調強調強調強調

以下のように ** で囲うことで強調表現にできます。

**強調強調強調強調強調**

引用表現は、「引用しています」感を全力で出しています。
引用表現のカンマの自体ですが、 serif に対応するシステムフォントによって見た目が多少変わります。
以下はWindows10の例です。

引用引用引用引用引用引用引用引用引用引用

引用元サイト

以下のHTMLで引用表現にできます。

<blockquote cite="https://endy-tech.hatenablog.jp/entry/2018/08/11/185100"><p>引用引用引用引用引用引用引用引用引用引用</p><cite><a href="https://endy-tech.hatenablog.jp/entry/2018/08/11/185100">引用元サイト</a></cite></blockquote>

HTMLが長いので、ユーザー辞書などに登録してしまうのがオススメです。
私の環境では、「いんよう」で以下に変換するように設定しています。

<blockquote cite="引用元URL"><p>本文</p><cite><a href="引用元URL">引用元タイトル</a></cite></blockquote>

シンタックスハイライティング

色使いはNordというカラースキームを参考にしました。
ただし、コメント部分の文字色だけはデフォルトの黒っぽい文字から目立つ黄色に変更しています。

普段コーディングするときはコメント色は目立たない方が使いやすいのですが、ブログではコメントを目立たせるべきという判断からです。

ハイライティングの仕方は2通りあります。
前半のマークダウン利用のパターンは、特に追加設定なく利用できます。

後半のhighlight.js 利用のパターンは、外部サービスを呼び出すために追加設定が必要です。
設定方法は次の記事で紹介します。

マークダウンを利用するパターン

@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''

以下のように```で囲うことで呼び出せます (マークダウン記法)。
【改行】の部分は実際にEnterキーを押した時の改行に置き換えてください。

```python
@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''【改行】```

highlight.js を利用するパターン

言語特性に応じた色分けの精度は、マークダウンよりもhighlight.js の方が高い印象です。
ただ、コード内にHTMLタグを含む場合はエスケープするのが大変です。
通常のマークダウン形式と状況に応じて使い分けるのが良さそうです。

@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''

以下のように pre, code タグで囲うことでhighlight.js を使えます。

<pre><code>@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''
</code></pre>

まだまだあります

読者になるボタン、SNSシェアボタンなどのカスタマイズについても紹介します。
次の記事で説明しますので、そちらをご覧ください。

スタイルシートの設定

設定方法

  1. デザインCSS後述のスタイルシートのソースコードをコピー & ペーストしてください
  2. スマホレスポンシブデザイン にチェックを入れます

詳細は下図を参照してください。

スタイルシートソースコード

下記リンクをクリック するとソースコードが表示されます。

次の記事

スタイルシートのコード中で がついている箇所は、追加の設定が必要です。
追加設定がなくても他の動作に悪影響はありませんが、該当箇所のカスタマイズは単純に反映されなくなります。

追加の設定手順は、下記にまとめてあります。
もう少しですので、最後までお付き合いくださいね。

endy-tech.hatenablog.jp