段落 画像（はてなフォトライフ） 脚注 続きを読む 罫線 asin 引用 リスト（ul,ol,dl） テーブル コードブロック h1見出し h2見出し h3見出し h4見出し h5見出し h6見出し 段落 あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくし…

標準アンダーライン あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。 標準打ち消し線 あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森…

サンプルブログを手っ取り早く準備したくてアイキャッチ／ヒーロー画像を手早く生成するために作成したウェブアプリです。単色の背景の上に単色のMaterial Iconsを表示するだけの極めてシンプルなものです。 はてなブログなら自動生成アイキャッチでも良いか…

サンプルブログではこちらの記事で紹介している固定式ブログタイトル下プロモーションバナーを使用していますが、最近メインブログではJavaScriptを使用した表示の切り替えが可能なプロモーションバナーを導入しました。スポンサードを受けて期間限定のプロ…

ivoireは基本的に、自分で使用することを前提に用意したものです。そのため、自分のメインブログ、サンプルブログともにはてなブログPro限定のオプションを有効にした状態でデザインを行い、公開しています。 ivoireのご利用に限らず、本格的なカスタマイズ…

テーマ、メインブログやサンプルブログの制作にあたって実際に使用したツール・ウェブアプリを紹介します。ただし、詳しい使い方についてはここでは紹介しません。また、外部サイトへのリンクですので、訪問先の内容・安全性への保証はいたしかねます。 Mini…

参考にさせて頂いたサイト/ページへのリンク集です。ぶっちゃけ、必要な情報の大半は「フジブロっ！」様と「Minimal Green」様で仕入れました。 デザインシステム はてなブログカスタマイズ HTML構造 トップへ戻るボタン 引用のカスタマイズ カスタムHTML プ…

言語ラベル表示同様、当サンプルブログでのコード解説用に、コードブロック右上に表示するコードも用意しました。このページでは、それらコードの導入について解説します。 （追記）モバイルでの閲覧状態をきちんと確認していなかったので、マウスホバーのな…

ivoireに組み込みの機能ではありませんが、当サンプルブログでのコード解説用に、Markdownのpre記法で指定した言語名をJavaScriptで取得し、CSSの疑似要素を使ってコードブロック左上に表示するコードも用意しました。このページでは、それらコードの導入に…

このページでは、メインブログやこのサンプルブログで使用している、グローバルナビゲーション下（デスクトップ）/ブログタイトル下（モバイル）にシンプルな背景色囲み枠およびその内部にアイコンやテキストを挿入するHTML/CSSを紹介します。 デスクトップ…

テーマを書きながら困った不具合と解決のまとめです。 もし、ここの表示がおかしいんじゃない？やこの要素が自分の環境ではきちんと機能していないよ！という部分を発見した場合はコメントなどで知らせていただけると助かります。ログインなしでもコメントが…

ivoireではCSSでCDNからMaterial Iconsを読み込み、利用しています。そのため、 はてなブログ組み込みのアイコンフォント Material Icons がテーマ標準で利用できるようになっています。一方でFont-Awesome、Googleの最新オープンフォントであるMaterial Sym…

ここで言う基本デザインとは、ブログに独自性のある外観を与える視覚的な特徴のことです。読者のニーズや自身のパーソナリティ、ブログを通して公開したい内容に応じて調整、変更を行ってください。 レイアウト カラー リンクテキスト テキストスタイル レイ…

解説のためにサンプルブログでだけ導入している、Hex カラーコードに対応するカラーを表示するためのJavaScriptです。メインコンテンツがWeb解説系のブログでもなければ、いらないと思います。 Markdownでは#が見出しに反応してしまうため、文頭に持ってくる…