やる夫スレ自分チェック用

 

ブログでのアスキーアート表示用のWebフォント導入方法まとめ

カテゴリ:管理人より |


(2016.07.30 作成)
※AAは銀英伝のチュン・ウー・チェンです
 
             , - ── - 、、
         ,.'"´         ``ヽ
         ,r'´.:.:..:.:.:.:.           ,イ
       /;;;;:;:;:;::::::::::::::.::.:.   ,,、、-‐─ヾ:!
       !;;;;;:;:;:;:;:. :.: .,、-‐'"´      リ          出張から帰ってきてブログを確認したら
       ト、;;;;:;:;:;:;ィ´        ,     l
       |:::::::::::::::〉  ,、z-ー''< r==ュ:!.           AAがズレてて慌てましたよ
       !.::r‐、::/  "´ ,ィテz:;/ {j;テz,:::{
       ヾl ヘ ゙'         i;;:. .::::|           いろいろググって調べたらいろいろ解決策が
          `ト、 ,      ,ィ _, ノ;;;;:.:.::!
         l::/ハ     /   _ `,.:::,!           分かりましたのでまとめてみます
            |!  i    ! ‐'ニ二ヽ.!::/
        _」.   ト、      ー.::::::/
       /.:::::``ー- 、ヽ、    .:::::::/_
        /.:::::::::::::::::::::i.::.:.:.ゝ---‐ <::::::.ヽ
  _ _, イ.::::::::::::::::::::::::|⌒ヽー---┘!::::::::i
 .:.::::::::::::::::::::::::::::::::::::::::::!   ト、    |:::::::::L _
 .::::::::::::::::::::::::::::::::::::::::::::ゝ---- ‐ ''"´.:::::::::::::::::::::`ー- 、
 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.:.:`ー- 、、、
 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::








 
     ,,、-‐.:.::::::::::::::::::::::;:;ー- 、
   ,、.:;:;:;:彡三三三ミミヾ`、;:;:;:;:;`ヽ               そもそもの原因はChromeのバージョンが52に更新されたことで
 . /:;:;r'"´        ̄``ヾ,ノシシ''゙ヽ
  |:;;/        _,, _   丁.:.:.:.::::.ヽ.             directwriteが強制ONになって無効化できなくなったことでした
  l:;′       _,,,,,,,_ ``  ノ.:.:.:.`t;;;;;:;j!
  l:|     rr='-─ ‐-ミ,、 〈.:.:.:.:.:.;;;ミミミ|            従来(バージョン51まで)は
  ij,r==z  j:;:;<:;テェェ- 、,, `i.:.:,r‐、;;ミミミ!
  `1,ィr示j ;;:::.:.:.`''ー     l;;;l ハ i! .:.l            『chrome://flags』を開き(アドレスに打ち込む)
   i ``7 .;;:;:;::::.:.       リ い リ.:.リ
   |  〈   `ゞ、.:       ,レ/.:.:/             ⇒『directwriteを無効にする』をクリックして表示を『有効にする』に変える
.   !   `ー''"´  ヽ     、_, イ.:.:/
    ',    ,,、 -─一      ,′.:l;;K               ⇒再起動
.   ゙、 Y´,.-一      /   ,′リ
    ゙、           /  ,'  L_                でよかったのですが、この手が使えなくなりました
      ゙、        /   ,,.、‐''"´ ヽ
        ヽ、_、_, イ,,、‐''"´    .:.:::::::!ー- 、、         ※Chromeのdirectwrite機能には欠陥があって有効にしているとAAがズレる
       _」_, イ;;:ヽ   ,r''"´ヽ.:.:::::::::/.:.:::::::::::.
  -‐'''"7´``7   /;:;:;;;;i   ヽ _/.:.:::::/.:;:;;;;;;;:::::::
 .:.:.::::::;:/  /l  /.:;:;;;:;;;:l  .:.:.::::::::::/.:;:;:;;;;;;;;::::::::::
 :::::::;:;/  〃1 /.:;:;;;;;;;;;;:l.:.:::::::::::::/.::;;;;;;;;;:;:;;;;;::::::::::
 
 
           _,,、-''"¨;;;;;;;;;;;;;;;;;;;;;;;;;;`ヽ、
         ,.-';;;;;;;;;;;;;;;;;;;;;;;;;;__;;;;;;;;;;;;;;;\
        /N/i〃, -''"     `''ー-、;;ヽ         Webフォント関係のミスという可能性も考えていましたが、
      /;;;;;;;;;;;;r'´:::::::           `i;;i
      /;;;;;;;;;;;;;;ヽ:::::::             |;;|.        AAまとめブログがスマートフォンで見れるようになるフォント設定のまとめとおまけと追記
     ,';;;;;;;;;;;;;;;;;;;;):: _,,、_   !       |j
     i;;;;;;;;;;;;;;;;;ノ::::〃ー--二ニノ  i一--、i         というツイッターまとめと
     ヽr'´ヽ;;;f::::::::::<じ二ゞ::  イr_tィー、~ノ
       l彳)ヽ::::::::::::      ::     ̄ f'           [サイト管理人向け]DirectWriteによるAAのズレを修正するスクリプト
      ヽヽ、i::::::::::::::     ::::     ,'
       \_,イ:::::::::   ,.‐'く:、:: イ    i         .  という記事を見つけました
       /:::::|:i:::::::::  i _ _ _  ヽ /
    ,rー''く::::::::i:\:::::   、`' ー ~   /             keage様、ブログ型AAツール保管庫管理人◆WarsMahrLQ様、劇場風やる夫まとめ様、この場を借りまして
    /;;;;;;;;;;\::::i::::::\::    ` …   /
   _/;;;;;;;;;;;;;;;;;;\::::::::::::\::       /ヽ              感謝の意を表させていただきます。ありがとうございました。
ー'´;\;;;;;;;;;;;;;;;;;;;;;;`ヽ 、::::::ヽ、, _ ,,/;;;;;;;;\
;;;;;;;;;;;;;;;;\;;;;;;;;;;;;:;:;:;:;:;:;::`1Y'´ ̄`'Y⌒ヽ;;;;;;;;;;`'ト、_
;;;;;;;;;;;;;;;;;;;;;;\;:;:;:;:;:;:;:;:;:;;:;:||:.:.:.   i:.:  ヽ:;:;:;:;|:;;;:;;;:;``丶、
 
 
 
 
というわけで、ブログでのアスキーアート表示用のWebフォント導入手順を紹介。
 
 
・第1段階:Webフォント「Saitamaar」の導入
1、スタイルシートに以下を追加
@font-face{
font-family: 'Saitamaar';
src: local('Saitamaar'),
url('http://keage.tokyo/fonts/Saitamaar.eot?') format('eot'),
url('http://keage.tokyo/fonts/Saitamaar.woff2') format('woff2'),
url('http://keage.tokyo/fonts/Saitamaar.woff') format('woff'),
url('http://keage.tokyo/fonts/Saitamaar.ttf') format('truetype');
font-weight: normal;
font-style: normal; }
 
2、スタイルシートのフォントの設定(font-family)にSaitamaarを以下のように追加する。
例:font-family: 'MS Pゴシック', 'MS PGothic', 'MS Pゴシック', 'MS Pゴシック', MSPゴシック, MSPゴシック, IPAMonaPGothic, 'IPA モナー Pゴシック', 'IPA mona PGothic', 'IPA MONAPGOTHIC', Mona, Monapo, Saitamaar, sans-serif;
 
 
 
・第2段階:DirectWriteによるAAのズレを修正するスクリプトを導入
1、http://www1.axfc.net/u/3647668/yaruoより『patchForAA.js』をダウンロード
 
2、スタイルシートのフォントの設定(font-family)を修正して『patchForAA』を追加
例:font-family:patchForAA, 'MS Pゴシック', 'MS PGothic', ... , Saitamaar, sans-serif;
※patchForAAは必ず左側に追加する(優先度を上げるため)
 
3、patchForAA.js をアップロードして以下をHTMLに追加
<script type="text/javascript" src="http://アップロードしたファイルのURL/patchForAA.js" charset="UTF-8"></script>
 
 
 
           ,..- ' ´ ̄ ̄``ヽ.、
       ,.' ´      _,.、-‐─ゝ、
       ,r'´‐''" ̄ア'iゞ"リ''´、.,,、-‐─‐i
      !;:、_,.r'"´,'´`': ̄'゙ ,.、-‐──‐‐|
      ,!、_,.、-‐─''´、''"´ ,_,.、--─、!
     {‐'"´ _,.、-‐─''´ ̄``ー─-r;!`
.     |}-‐'リ´_,.、-ー-、、,,_ ,;:',r=ニ=- i'       / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
     ,!^ヾ,! ´ ̄`ーrテゝ'´  ,!'fェェ, l       |   「Saitamaar」導入のみだと、フォントの色が紫っぽくなったりしますが、スクリプト導入でフォントが黒くなります。
     { (;;:l'  ,;:: ,;'´ -‐    i゙ヽ , ;:: !       <   IE11とEdgeでも確認したかぎりでは問題ないようです。
      ヾ、           ;l、   ,;:';l        \_______________
       `ゞ        ,.'´ ;;:r'ヽ ,;:'イ
       ,! ',    ,r'´____, i ,'゙l'
     ,、-┤ i、   l   、_   l  ,!
    ./  ,(! l.`ヽ、         /
   /   `ヽ、  \       /\
,.、-‐ヘ、.     /i、_,...._,i`ー─'‐─'i  ,ヘ
    \  ,/ l   `ヾr-一、ヽl ,/ |
_,,.、-‐''"´\/\ ,lヾ、  \、 ヽ,!/ 、 .l`‐、
     ,r'´   `|ヾ、    '` ,〈、 \l  `ー-、_










カテゴリ:管理人より |
[ 2014/05/01 00:30 ] TB(-) | CM(0) | △ページトップへ戻る 

広告エリア
関連カテゴリ
 

※「ねらう緒はトップヒーローを狙うようです」の投稿のうち、「やらない夫は独りだけの戦隊ヒーローのようです」とのクロス部分のみ「独り戦隊EXTRA」としてまとめます。

関連カテゴリ
【R-18】やる夫がパパになる様です
【R-18】やる夫のクソダサマナー ~そんな恰好恥ずかしく無いの?~(その1)
【R-18】やる夫のクソダサマナー ~そんな恰好恥ずかしく無いの?~(その2)
【完結】【R-18G】やる夫はロウルートに進む様です(その1)
【完結】【R-18G】やる夫はロウルートに進む様です(その2)
【未完】やる夫のDサマナー伝
【完結】やる夫のペルソナ3
【完結】Sa・Ga2やる夫の秘宝伝説
【未完】勝手にライブアライブ2
【完結】やる夫のLIVE A LIVE
童帝シリーズ「でっちゃん」
童帝シリーズ「R-18モノ?」
童帝シリーズ「JOJOモノ」
童帝シリーズ「メガテン」
童帝シリーズ「戦国モノ」
童帝 ◆CDXOg0zb8E氏/その他




関連カテゴリ
やる夫がエヴァンゲリオンを開発するようです
やる夫たちがエヴァンゲリオンを開発したようです(その1)
やる夫たちがエヴァンゲリオンを開発したようです(その2)



--------------------
  組 織 図  (主要な物のみ)  【】内は代表
--------------------

ゼーレ【キール・ローレンツ】
 │
 └→ 国際連合
     │
     ├→ 国際連合最高幹部会
     │   │
     │   └→ 人類補完委員会【キール・ローレンツ】
     │         │
     │         └→ ネルフ特殊監査部
     │                │
     │                └→ 加持リョウジ
     │               
     ├→ 日本政府【フリーザ】 → ドドリア秘書
     │   │
     │   └→ 内務省【兵藤和尊】
     │        │
     │        └→ 戦略自衛隊 (原作では国防省直属)
     │             │
     │             ├→ ムスカ大佐
     │             ├→ ヘルシングの少佐
     │             ├→ 新城直衛大尉
     │             └→ N2兵器・BC兵器
     │
     ├→ 国連軍
     │   │
     │   └→ 旧自衛隊 → N2兵器
     │
     │
     │
     │
     └→ 特務機関ネルフ【碇ゲンドウ】 → 冬月コウゾウ
         │
         ├→ ネルフ技術開発部技術局1課【赤木リツコ】 ; エヴァ素体の開発・維持・運用
         │      │
         │      ├→ 伊吹マヤ
         │      │
         │      └→水銀燈チーム【水銀燈】
         │          ├→ 金糸雀
         │          ├→ 翠星石
         │          ├→ 蒼星石
         │          ├→ 真紅
         │          ├→ 雛苺
         │          └→ 雪華綺晶
         │
         │
         ├→ ネルフ技術開発部技術局2課【やらない夫】 ; エヴァ周辺機器・設備の開発・維持・運用
         │      │
         │      ├→ やる夫 ; 各チームのヘルプ
         │      │
         │      ├→ ちゅるやさん ; 秘書,お茶汲み,特許管理,他課との折衝,その他手続き
         │      │
         │      ├→ カミナチーム【カミナ】→シモン ; エヴァ専用兵器全般
         │      │
         │      ├→ キョンチーム【キョン】→涼宮ハルヒ ; 対使徒防衛システム,都市開発計画
         │      │
         │      ├→ 泉こなたチーム【泉こなた】 ; エントリープラグ関連機器,インターフェースシステム構築
         │      │
         │      ├→ 阿部高和チーム【阿倍高和】 ; 発進システム,エヴァ格納庫,アンビリカルケーブル
         │      │
         │      └→ エドワード・エルリックチーム【エド】 ; エヴァの拘束具・特殊装甲全般及び観測機
         │
         │
         ├→ 保安諜報部【利根川幸雄】 ; 情報操作・組織内治安維持活動
         │     ├→ 赤木しげる
         │     └→ 伊藤カイジ
         │
         ├→ 製造部【DIO】 ; エヴァンゲリオンに関する製品の製造・組立
         │   ├→ ジョナサン・ジョースター
         │   ├→ ジョセフ・ジョースター
         │   ├→ 空条承太郎
         │   ├→ 東方仗助
         │   └→ ジョルノ・ジョバァーナ
         │
         ├→ 作戦部第1課【葛城ミサト】 ; 使徒殲滅作戦の立案・指揮
         │    └→ 日向マコト
         │
         ├→ 医療部 ; ネルフ職員の医療・健康管理等
         │    └→ キバヤシ先生
         │
         ├→ 情報局第2課
         │    └→ 青葉シゲル
         │
         ├→ 警備課
         │    └→ 桜田ジュン
         │
         └→ 月面基地【夜神 月】 ; 月面資源物資発掘
               ├→ 竜崎(仮名)
               ├→ リューク
               └→ レム



関連カテゴリ
やらない子は悪役令嬢


                  ┏┓                                 ┏┓
                  ┗╋━━━━━━━━━━━━━━━━━━━━━━╋┛
                  ┏╋──────────────────────╋┓
                  ┃|  まとめサイト様へのお願い及び読者の皆さんへ ..|┃
                  ┗╋──────────────────────╋┛
                  ┏╋━━━━━━━━━━━━━━━━━━━━━━╋┓
                  ┗┛                                 ┗┛

                 -----
            /ニニニニニニ=- _
           , ニニニニニニニニニ=- _
          /ニ/ ヽニニニ=----=ニニニ\
            /ニ,   /ニ- ´: : : : : : : : : `<ニ \
         /ニ/  / /: : : : |: : : : : : : :|: : : : ` <.ヽ
        ,= /  /./: : : :.:/' |: : : : : : : :|∨ /: : : }:∨i    ルール違反は、
         i /  /=i: : : :.:/_|_: |i: : : :.:.:li ∨ /: :,: ヘ:\
        /  //: |: : : /  乂八: : : : ' ̄∨: :/://  ,   他の作者様、読者様への迷惑になるだけでなく、
          /  / , : ハ : /i〓〓〓 \:/〓〓〓:.:.i |   i
.         /  /ニ.|: : : ≧ヽ            : :{ |   |   .管理人である☆凛へ多大なご迷惑をかけることになります。
        /  /ニ=:|: : : : : : :.iu           イ: : i|   |
.       /  /\ニ.乂,-====}≧r ――==≦r====ソ|   |   重ねてルール遵守をお願い致します。
      /  /'  \ニV=彡Y__ノ、  \____/: : : :ヽ |   |
     ,   ,       -|: : : : :Vハ \/ ̄∨i: : : : : : |   |   各まとめサイト様、まとめて頂きありがとうございます。
.    i   i.       |: : : : : iニiへ==彡/= |: : : : :.:.:|   |
.     乂_乂      |: : : : : |ニ-: : : : :.iニニ_: : : : : :|   |   読者の皆さんは、専用ブラウザの導入を強く推奨しております。
             |: : : : : |ニニi: : : :.:|ニニ_: }: : :个 - '
             |: ハ : : jニ= !-r彡|ニニ }八: :.:|

     この板(やる夫落書き板)のルールを守ってらくがき板ライフをお楽しみください。

     また、専用ブラウザの導入を強く推奨しております。

     専用ブラウザの導入方法がわからない方はぜひ、雑談所で聞いてみてください。

雑談所は『◆PxpsTgDRu.のやる夫スレ避難所』です。皆さん、抵触すると思った場合、こちらでの書き込みをお願い致します。






コメント一覧
コメントの投稿












管理者にだけ表示を許可する
広告エリア





アクセスカウンタ
広告エリア


プロフィール

Author:多摩ちゃん
自分で日々みているやる夫スレのまとめです。

三十路会社員です
リンクフリーです。
会社員ですので、更新は遅めです。

誤字・リンク切れetc連絡はメールもしくは
おしらせ・連絡のコメント欄にて

作品・作者に対する誹謗中傷及び
批判etc不快なコメントは削除します。
コメントは承認制です。



(2017.05.26追記)
まとめられた作品および支援絵などの
著作権は各作者様にあります。
当ブログからの転載はやめてください。
元スレ及び掲示板の規約に従うよう
お願いします。




推奨ブラウザ:Chrome

注意:広告を表示させない「Adblock Plus」を
使用しているとAAがズレることがあるようです。
このブログでは「無効」としてください。



管理画面

全記事一覧を表示する

便利リンク(仮)

[管理者用記事編集]
検索フォーム
広告エリア




人気ランキング(過去十日間)
広告エリア




リンク
■ポータルサイト
Yahoo!JAPAN
Google
ライブドアニュース

■AAスレまとめ
ブログ型AAツール保管庫
劇場風やる夫まとめ
やる模
AAまとめブログ(´∀`)
泳ぐやる夫シアター
やる夫の暇つぶし麻亜屈
AAスレお気に入りのまとめ
やらない夫オンリーブログ
やる夫エッセンシャル
それにつけても金のほしさよ
やる夫叙事詩
やる夫疾風怒濤
やるぽん!
やるやら鍋
やるやら書庫
やるやらできやら
RPG系AA物語まとめるお
勝手にやる夫を纏めたりするブログ
暇な時にやる夫まとめ
やる夫我執 [愛と <●>-=≠=-<●> 誠編]
やる夫短編集 (,,`д`)<とっても!地獄編
やる夫短編集 (,,^ー゚)<すさまじい程に! あしゅら編
Yaruyomi
AA・やる夫文庫
俺とやる夫の理想郷
やる夫AGE
東方やる夫スレ纏め
やる夫道中記
やる夫達のいる日常
隣のAA
やる夫とイワナ
やるならやらねば!!
やる夫が人生でいいじゃない
好き好き大好きやる夫くん
自作やる夫スレ&ダディの家スレまとめ
100%自分用やる夫まとめ
やる夫ング
野球のやる夫ちゃん

■まとめのまとめ
やる夫RSS+インデックス
やる夫 Wiki
やる夫見聞録
やる夫Link
R18やる夫.com
やる夫スレキャラクター出演作まとめwiki
やる夫電脳インデックス
やるリンク改
やる夫ガイド

■紹介していただけるブログetc
ヴィーナさんのスコップ感想欄
チラシの裏の読書感想文

Textar Font - アスキーアート対応ウェブフォント

やらない夫は独りだけの戦隊ヒーローのようですwiki
独りだけのAA活動写真館

童帝作品まとめ(仮)wiki

■ニュースまとめ
Birth of Blues
保守速報
黒マッチョニュース
U-1速報
キムチ速報
アルファルファモザイク
おーるじゃんる
暇人速報
政経ch
あじあにゅーす2ちゃんねる
ハムスター速報
News U.S. - 中国・韓国・在日崩壊ニュース
みそぱんNEWS
ネトウヨにゅーす
大鑑巨砲主義!
とりのまるやき
もえるあじあ(・∀・)

随時編集中
広告エリア


アクセスランキング(過去十日間)
広告エリア







広告エリア
HOME
広告エリア