Multi Vitamin & Mineral

Multi Vitamin & Mineral です。プログラムに関することを書いております。

はてなブログ

【はてなブログ用】カテゴリーを階層化するブログパーツを作りました【多段階層OK】【脱jQuery】

2021/03/22 : スクリプトを修正しました。内容は変更履歴をご参照ください。 サイドバーのカテゴリー部分を階層化するパーツを作りました。 はてなブログ用のカテゴリーパーツは既に何人かの方が実装されていましたが、オリジナルな実装を作成しました。多段…

記事のトップに更新日時も表示する【脱jQuery】【脱sitemap.xml利用】【オリジナル】(はてなブログ改造計画)

記事のトップに更新日時も表示する方法です。 すでにたくさんの方が同様の記事を書いていますが、なんやかんやでオリジナルな実装になりました。 こちらを使いませんでした 変更内容 仕様 変更方法 HTML, JavaScript の変更手順 追加 HTML, JavaScript CSS …

目次と見出しに入れ子の連番を振る(はてなブログ改造計画)

目次と見出しに入れ子の連番を追加する方法です。 見出しに「1-1」や「2-3-1」といった章や節にあたるような番号を付加し、読んでいる位置を分かりやすくすることが目的です。 変更内容 目次の変更 見出しの変更 補足)はてなブログは通常 h3, h4, h5 が使わ…

見出し(header)のデザインを変更(はてなブログ改造計画)

見出しのデザインを変更する方法です。ここで言う見出しとは <h3>...</h3> などのタグを指します。まあ、 CSS をちょい足ししただけですけど。 変更内容 補足)はてなブログは通常 h3, h4, h5 が使われるようです 変更方法 変更手順 追加CSS 説明 変更内容 記事内の見…

レスポンシブに対応する(はてなブログ改造計画)

レスポンシブに対応する方法です。 とは言え、ゼロからレスポンシブ対応は大変ですので、レスポンシブのテーマを利用することを前提に、そのレスポンシブの機能を利用する設定を追加する方法について書いています。 ですので、今回行うレスポンシブは、スマ…

上部にカテゴリーのリンクを含んだグローバルメニューを追加(はてなブログ改造計画)

ページの上部にグローバルメニューを追加する方法です。別の記事で実施方法を書きましたが、当ブログはカテゴリーを3段まで使っています。グローバルメニューでは2段まで表示させています。 カテゴリーの記事はこちらでした。 multimineral-tech.com こちら…

サイドバーのカテゴリーを階層化してパンくずを設置する(はてなブログ改造計画)

カテゴリーを階層化する方法です。以下の2点が変わります。 サイドバーのカテゴリー欄が階層構造になる。 記事上部にパンくずリストが追加される。 尚、カテゴリー欄が階層構造だけ対応し、パンくずリストは追加しないことも可能です。 こちらを使いました …

貼り付けた画像に枠と影を追加(はてなブログ改造計画)

記事中に貼り付けた画像に枠と影をつけようかな、と思ったので、今回はそう改造する方法です。 変更方法 変更手順 追加CSS 変更結果 説明 変更方法 記事中に貼り付けた画像を対象として枠と影をつけます。 変更手順 管理画面から以下のようにたどります。 デ…

強調文字に蛍光マーカーを引く(はてなブログ改造計画)

強調文字が太字だけだと目立ちっぷりが足りないので、蛍光マーカーを引いたような見た目に改造する方法です。 変更方法 変更手順 追加CSS 変更結果 説明 変更方法 エディタの「B」ボタンで強調した部分の装飾です。 Markdown で書くと **強調** の部分に当た…

当サイトのURLが変更になりました。はてなブログの独自ドメイン化の話

URL が変わりました 当ブログのURLが変更になりました。 旧)https://hiranoon.hatenablog.com 新)https://multimineral-tech.com/ 旧 URL は、当面は新URLにリダイレクトされます。しばらくはどちらからもアクセスできますが、しばらく後は新 URL のみとな…

はてなブログで目次を表示するようにしました

はてなブログの設定変更履歴メモ第一弾。 ブログの記事内に目次を入れる方法です。ということで、この下にも目次を入れてみます。 目次の入れ方(公式より) 目次のデザインは独自CSSでカスタマイズ 実際に使ったCSS 独自CSSの追加 2021/01/14 追記 設置方法…