はてなブログでスマホでのAA（アスキーアート）表示のためにWebフォントを設定

2019.03.24 Data URI scheme について、ブックマークレットを追記、ページが重くなってます、すみません...

おま環だったらスミマセン... まだまだレベルかも。

INDEX

Webフォント - aahub_light

Webフォント - aahub_light - については（作成者に多謝！）下記ページをお読みくだされ。

• AA表示用の軽量なフォント(43KB)を作った - Qiita
• モナー等のAAをずれずに表示するためのWebフォント設定 - Qiita

ハイ、素晴らしいですね！

ってか、PC用CSSにも設定しとけば完璧やん！(笑)... 嗚呼、今までの苦労は... （´・ω・｀）

【2019.3.24 追記】Data URI scheme

不勉強ですみません、「Webフォント」と書きましたが通常の方法ではなくCSSにデータを埋め込む形式のようです。

• Data URI scheme - Wikipedia

こんなことができるとは感嘆するばかり...。

• 参考リンク :
  • webフォントをData URI schemeで実装 - ヲレサイト
  • [Webフォント] Base64エンコードしてCSSに直接埋め込む - Cottpic

• 戻る

はてなブログのカスタマイズ設定

ご注意

• Android版Chrome, Firefox でのみ確認、なのでおま環だったらごめんチャイ
• はてなブログのデザイン設定について、head要素外へのstyleタグの追記はバッドノウハウかも？
• レスポンシブデザインは無効設定（※ デフォルトのまま）
• 記事ページのみ適用（※ 無料版の場合）

PC用ページにも設定するなら…

管理画面→「デザイン」→スパナ(アイコン)→「{}デザインCSS」へ追記しませう。

• 参考リンク :
  • ブログのデザインを変更する（スマートフォン） - はてなブログ ヘルプ
  • <style>: スタイル情報要素 - HTML: HyperText Markup Language | MDN

管理画面→「デザイン」→スマートフォン(アイコン)→「記事」へと進み

（※【注】PRO版なら「ヘッダ」→「タイトル下」に記述してすべてのページに適用可能。）

• 記事上下のカスタマイズ - 「スマートフォン用にHTMLを設定する」

• 「記事上」にstyle要素（タグ）を記述

<style>
ここにCSSコード記述
</style>

styleタグの内容は、前述のページ…

• モナー等のAAをずれずに表示するためのWebフォント設定 - Qiita

…のCSS内容、及びAA用のclass属性などを合わせて記述、ウチの（スマホ用）classはこんなのです。

.kuma {
font-family: aahub_light, sans-serif !important;
font-size: 1em;
line-height: 1.1!important;
letter-spacing: 0 !important;
margin: auto;
padding: 0.5em;
border: dotted 2px #c7dce3 !important;
white-space: pre;
overflow: auto;
}

尚、はみ出し防止については、これも前述のページを参考にしました...

• AA(Shift-JIS Art)をずれずに表示するCSS設定＆はみ出し対策 - Qiita

上記の最後の2行がソレです。

white-space: pre;
overflow: auto;

• 戻る

表示テスト

• font-family 削除 | inherit | Sans-serif (ＭＳ Ｐゴシック | MS PGothic)
• aahub_light (Monapo | IPA モナー Pゴシック | Mona | 梅Pゴシック | Textar | RobotoJAA)

　／￣￣￣￣￣＼ 　|　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ 　＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　 ヽ| 　∩＿＿＿_∩ 　　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ /　　　　　　ヽ| 　　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | 　/　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ 　(＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• 戻る

【追記】ブックマークレット

出番があるかは疑問ですけど、実験してみた。

尚、ダウンロードするわけではないのでオフライン時でも使えます（そんな機会ないかなｗ）

まず aahub_light を作成

• aahub_light 有効化

font-family 設定、一旦すべての要素及びよくあるclass属性に設定し等幅系は再設定

• aahub_light(*,.kuma etc +mono)

*,.kuma,.kuma2,.kumakuma,.test_kuma,.kuma_test,
#test_kuma,#kuma_test,.aa,.aa-test,.ascii-art,.ascii,
#aa,#aa-test,#ascii-art,#ascii,.lang-aa,.syobon {
font-family:aahub_light,sans-serif!important;
}

code,kbd,var,samp,pre,.code,
.synComment,.synType,.synConstant,.synSpecial,.synIdentifier,.synPreProc,
.lang-css,del {
font-family:monospace,monospace !important;
}

1+2の両方

• aahub_light (有効+設定)

• 戻る

いろいろ

PC用のCSSにも設定すべきだと考えていますが、「今までの苦労はナンダッタンダー」てなかんじなのでもうチョイ後にしとこう...(;'∀')

• 参考リンク :
  • AAHub Fonts - アスキーアート表示用Webフォントのカタログサイト
  • html5.2ではstyle要素をbody内に書けるようになりました - webのあれこれ
  • <style>－HTML5タグリファレンス

• 戻る

---

ほなクマー！

---