新しいブログテーマ「Superliner」を作成しました

　2021年度，心機一転。

f:id:mntone:20210407142956p:plain

1. なんとなく。
2. 線を基調としたテーマ
3. このテーマについて

1. なんとなく。

　書き始めた動機は「なんとなく」ですｗ　ただ，テーマを新調する上で以下の要件を満たすテーマを作りたいと思っていました。

OS のダークテーマ切り替えに対応すること (Media Query: prefers-color-scheme: dark)
iPhone では dynamic type に応じて全体のフォントサイズを変更すること

　前のテーマは長く使っていたので，新年度の気分転換という意味合いもあります。

2. 線を基調としたテーマ

　見てもわかると思いますが，線を多用した個性を出さない感じで作ってみました。結構こういう紙の上に印字した感じのデザインって好きなんですけどね。

　OS でダークテーマを利用している場合は明るくならないので，暗いのが好きな人も大丈夫でしょう！

3. このテーマについて

　~~現在，デバッグも兼ねて非公開にしていますが，そのうち公開するかも（未定）。~~

　2021/4/15 現在，誰でも使えるようにテーマストアに公開しました。

blog.hatena.ne.jp

　一応コンパイル前のデザインはここにあります。

github.com

3.1 既知の不具合

はてなブログのヘッダーのポップアップの位置がおかしい（左右に余白を入れるとこうなるようです）
OS のテーマを表示したまま切り替えると，はてなブログのヘッダーが色を追従してくれない（仕様？　不具合？）

3.2 更新履歴

0.9.8 (2021年4月15日)

クラス figure-image を標準でストレッチしないように変更。また計算済みの calc に最適化。
YouTube コンテンツを記事領域全体に広がるように改善
overflow: clip を overflow: hidden の項目に指定 (Firefox 81〜, Chrome 90〜*1 )

0.9.7 (2021年4月13日)

Media Query 表記をひとまとめにする Media Query packer を採用
印刷時スタイルの追加
コメント・フッター・カテゴリー・About・Amazon/iTunes埋め込みスタイルの改善
ページャー関連
- ボタン表示からリンク形式への変更
- どのようなデバイス・設定でも一行表示になるように調整（はみ出した分は「…」で表示される）
その他，細かな調整

0.9.6 (2021年4月11日)

Internet Explorer で概要が横幅いっぱいになってしまう問題に対処
要素 code で禁則処理が働いて横に広がりすぎてしまうことがある問題の修正
URLリスト内のカテゴリー表示に対応
一部の設定の構成で URLリストが乱れる問題に対処
その他，細かな調整

0.9.5 (2021年4月11日)

アーカイブページ・ツールチップ・概要のスタイルを実装
Windows 向けにヘッダーのフォントに Arial を追加
CSS contain を使ったパフォーマンス改善の実装*2
検索ボックス関連
- Internet Explorer で検索ボックスの placeholder が通常文字と同じ濃い色で表示されている不具合の修正
- 大きい文字を使用している場合，検索ボタンが隠れてしまう問題の修正
- 2カラムレイアウトを使用している場合，検索ボックスを一番上に配置するように変更（モジュールが追加されている場合）
その他，細かな調整

0.9.4 (2021年4月9日)

ページャーのスタイルを実装
largeレイアウトの調整
動的フォントサイズ関連の不具合を修正
その他，細かな調整

0.9.3 (2021年4月8日)

フッターの余白を調整
コメントモジュールのサポートを追加
minify の出力に対応
その他，細かな調整

0.9.2 (2021年4月8日)

ブラウザーや dynamic type で非常に大きいフォントサイズを指定している場合，ヘッダーに余白が大きすぎる問題の修正
ダークモード時に検索ボックスの文字やボタンが見えない問題の修正
コメントモジュールのサポートを追加
タグ `hr` やコメント関連のボタンの調整

0.9.1 (2021年4月7日)

OS で動きを減らす `prefers-reduced-motion` が有効である場合，アニメーションを無効化する機能の追加
`blockquote` や Amazon パーツなどのデザインを変更
ブログデザインや記事執筆用に `text-primary`, `text-secondary` & `text-tertiary` を追加

0.9.0 (2021年4月7日)

初回リリース

3.3 Internet Explorer について

　一部機能は Internet Explorer に実装されていないため，正しいスタイルで表示されません。これは 2020 年 7 月 10 日より，Internet Explorer 11 が推奨ブラウザーから外れているためです*3。ただし，IE10, IE11 では大幅なレイアウト乱れが発生しないことは確認しています。

タイトル部分の文字色 (-webkit-background-clip: text*4 非対応による)
正しい表示（左・Chrome 89 on macOS Big Sur 11.2.3） / 不正な表示（右・IE11 on Windows 10 20H2）
検索ボックス部分のフォーカス表示 (:focus-within*5 非対応による)
~~概要表示の横幅~~ 0.9.6 にて対応 (width: fit-content*6 非対応による)

3.3.1 Internet Explorer 9 の大幅なレイアウト乱れ

　IE9 では flexbox に非対応により大きくレイアウトが乱れます（パフォーマンスのため flexbox のほうをデフォルトで採用しています*7）。以下のコードを head 内（設定 > 詳細設定 > headに要素を追加）に追加することによって，Windows Vista の IE9，Windows 7 の IE9 を追加サポートすることができます。

<!--[if lte IE 9]>
<style>
@media (min-width: 840px) {
  #wrapper {
    float: left;
  }
  #box2 {
    float: right;
  }
  #container::after {
    clear: both;
    display: block;
    content: '';
  }
}
</style>
<![endif]-->

　コピペの際は改行・スペースなくしたバージョンをどうぞ。

3.3.2 Internet Explorer 7, 8 について

　このブラウザーは Media Query というウィンドウの横幅に応じたレイアウト切り替えが実装されておらず*8，レスポンシブデザインのための基礎的要素になっているため，基本的に非対応です。Windows XP では IE8 までしかインストールできないため，仮にその層をターゲットにする場合何らかの対応が必要です。

3.4 機能

🌟文字列の色を変える

　ダークモードでも最適な表示を得られるものです。

<span class="text-primary">primary</span>, <span class="text-secondary">secondary</span>, and <span class="text-tertiary">tertiary</span>

primary, secondary, and tertiary

🌟でかい画像やテーブルを広げる

　PCなどゆとりのあるデバイスで画像やテーブルを左の余白まで広げます。

<table class="element-stretch">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th></tr>
<tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td><td>Item 5</td></tr>
</table>

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9	Header 10	Header 11	Header 12	Header 13
Item 1	Item 2	Item 3	Item 4	Item 5	Item 6	Item 7	Item 8	Item 9	Item 10	Item 11	Item 12	Item 13

　具体的な記事は以下のような感じ。映える画像に対してつけると良いです。

mntone.hateblo.jp

3.5 カスタマイズ

3.5.1 「概要」のリストマーク非表示

　このブログの概要にあるようにリストマークを非表示にする場合，以下の CSS を追加してください（デザイン > カスタマイズ > デザインCSS の一番最後に追加する）。

.entry-content .table-of-contents{list-style:none;padding-left:1rem}
.entry-content .table-of-contents ul{list-style:none;padding-left:0}
.entry-content .table-of-contents::before{margin-left:-.5em}

3.5.2 Twitter のダークモード対応

　ツイートの埋め込み表示をダークモードにする場合，以下の JavaScript を追加してください（設定 > 詳細設定 > headに要素を追加 に張り付ける）。ただし，動的なテーマの切り替えには対応しておらず，ロード時のテーマを反映する形になります。

<script>
function applyDarkThemeToTweet(e) {
  var tweets = document.querySelectorAll('.twitter-tweet')
  for (var i in tweets) {
    tweets[i].setAttribute('data-theme', 'dark')
  }
}

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.addEventListener('DOMContentLoaded', applyDarkThemeToTweet);
}
</script>

3.5.3 暖色系に変更

　色変えもとても簡単です。

f:id:mntone:20210413172140p:plain:w344 — 暖色系

　以下の CSS を設定で追加してください（デザイン > カスタマイズ > デザインCSS の一番最後に追加する）。

a { color: #b2462b; }
a:hover { color: #893621; }
#title a {
  background: -webkit-gradient(linear, left top, right top, from(#cc145a), to(#b2462b));
  background: linear-gradient(to right, #cc145a, #b2462b);
}
#title a:hover {
    background: -webkit-gradient(linear, left top, right top, from(#b91252), to(#893621));
    background: linear-gradient(to right, #b91252, #893621);
}

@media (prefers-color-scheme: dark) {
  a { color: #d66f55; }
  a:hover { color: #c84f30; }
  #title a {
    background: -webkit-gradient(linear, left top, right top, from(#ec4283), to(#d66f55));
    background: linear-gradient(to right, #ec4283, #d66f55);
  }
  #title a:hover {
    background: -webkit-gradient(linear, left top, right top, from(#f0679b), to(#eab5a7));
    background: linear-gradient(to right, #f0679b, #eab5a7);
  }
}