palm84.com

革命的愛熊主義者同盟!

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

Google の広告

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

f:id:palm84:20190315193027p:plain

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

INDEX

Webフォント - aahub_light

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

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

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

【2019.3.24 追記】Data URI scheme

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

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

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

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

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

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


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

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

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

f:id:palm84:20190315193032p:plainf:id:palm84:20190315194844p:plain

  • 「記事上」にstyle要素(タグ)を記述
<style>
ここにCSSコード記述
</style>

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

…の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;
}

f:id:palm84:20190315193040p:plainf:id:palm84:20190315194847p:plain

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

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

white-space: pre;
overflow: auto;

表示テスト

 / ̄ ̄ ̄ ̄ ̄\  |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\  \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\       ∨               \___   __/ |  マイヤホー♪ |                             ∨       \__   ____/     ∩___∩              ∩____∩      ∨     | ノ     ヽ            /       ヽ|  ∩____∩    /  ●   ● |            | ●   ●  ヽ /      ヽ|    |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ   彡、   |∪|  、`\        /     |∪|    彡  (_●_)    |  / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ  (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ

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

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

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

まず aahub_light を作成

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

*,.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の両方

いろいろ

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


ほなクマー!