はてなブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。

ブログでのチェックポイントや関連記事を枠で囲いわかりやすくする

所謂、よく見るこういうものです。 ・チェック例です CSSの修正 適用範囲を広げる 種類を増やす 設置 記事で使用する こういったカスタマイズははてな記法やMarkdownが便利 CSSの修正 ベースとなるCSSは、こちらのサイトのものを使用させていただきました。…

はてなブログのMarkdownでコードやスクリプトを表記する

MarkdownでプログラムやHTMLなどのコードやスクリプトを表記する方法です。 「```」(バッククォートの3連続した行」で囲む 「```」(バッククォートの3連続した行」で囲むと、そこがコードの表記とされます。 例えば次のような表記だと、 ``` <html> <head> <title>テストページ</tite> </head> <body></body>…

シンプルなメニューバーをつけてみる

各カテゴリへのシンプルなメニューバーをつけてみました。 こういうやつです。 ブラウザのサイズがメニューより小さくなるとスクロールに切り替わります。(主にスマホ向け) 設置方法 ゆきひーさんの以下のスクリプトを使用させていただきました。ありがとう…

Googleさんから「Chrome のセキュリティ警告を表示します」と通知が届いた

じわじわとHTTPS化へのプレッシャーが高まっています。 テキスト入力フィールドがあるHTTPのサイトは警告対象となるみたい? Google Search Consoleさんからこんなお手紙が届いていました。 2017 年 10 月より、ユーザーが Chrome(バージョン 62)で HTTP …

(Proのみ) ブログのトップページを一覧形式にする

staff.hatenablog.com より。ブログのトップページを一覧形式にできるようになったみたいです。 だいぶ待ち望まれていた機能ですね。そしてProのみ。 一覧表示とはつまり「月別アーカイブ」 具体的にどういった表示かといいますと、「月別アーカイブ」で見え…

目次を折りたたんで表示する

はてなブログの目次を折りたたんで表示する方法です。 …といっても、すでにだいぶ広まっているものなので自分メモみたいなリンク。 目次を折りたたむ はてなブログでは「[:contents]」と記述することで、目次を自動生成してくれる機能があります。 しかし項…

はてなブログの画像、Amazon商品画像を自動的にセンタリングする方法

はてなブログで使用した画像を自動的にセンタリングする方法です。 画像が左に寄ってしまっているのはずっと気になっていて、またCSSでなんとかできるだろうなあと漠然と考えていたのですが結局放置してしまっていましたけれど、いろいろ見直すなかでやって…