最近追加した作品

TRPGとはなんぞや?
とある酒飲みどもの戯言
ダディは中年スカベンジャーのようです
【SAO】キリトの大冒険・しあわせの箱の花婿【トルネコ】
【R-60】ち○ことま○この大冒険
【R-18・酉】我々は騎空士のようです【安価】
【R-18G】管理世界レイプ!!イレギュラーと化した先輩!!【即興投下】
キル夫くんのミートピア日記
崩壊世界の中心であずにゃんを愛でる
8周年記念タッグトーナメント
   もっと見る 

 アクセスカウンター

 累計880,755pv
 今日543pv
 昨日3,938pv
 7日間29,184pv
 30日間  144,967pv


タグ一覧(AND検索NG検索はこちら )
安価R18現行完結更新停止読み切りオリジナル原作ありゲームマンガ・アニメ系その他(原)ドラクエFF女神転生ペルソナサ・ガ世界樹の迷宮アトリエ太閤立志伝ガンパレード・マーチFateポケモンウィザードリィパワプロソフトハウスキャラその他(ゲ)ジョジョ遊戯王ガンダム他マンガ・アニメラノベ特撮ドラマ・映画・小説その他(そ)モンハンアイマスドラクエ3ファンタジーギャグ・ラブコメ学ぶ・体験競技・スポーツ現実・シリアス異世界転移・転生純異世界現実世界ギャグラブコメ日常系学ぶ体験アクション競技スポーツカードゲームサスペンスホラーその他(現)歴史サバイバル野球サッカー政治・経済異能力バトルハーレムあんこやる夫主人公やらない夫主人公その他主人公~20話21~50話51~200話201話~2008年開始2009年開始2010年開始2011年開始2012年開始2013年開始2014年開始2015年開始2016年開始2017年開始2008年完結2009年完結2010年完結2011年完結2012年完結2013年完結2014年完結2015年完結2016年完結2017年完結Yaruyomiやる夫達のいる日常暇な時にやる夫まとめやる夫が人生でいいじゃない東方やる夫スレ纏めだっておwwwキャンセルこのやる夫スレ、まとめてもよろしいですか?このやる夫スレ、まとめてもよろしいですか?隣のAAやる夫短編集やるぽん!自分用やる夫作品まとめやる夫AGE好き好き大好きやる夫くんやる夫茶やる夫を拾い読みやる夫の暇つぶし麻亜屈やる夫エッセンシャルやる夫+個人的やる夫まとめやる夫Xやる夫まとめに挑戦個別wikiやる夫とやらない夫と麻雀のブログ安価でやるお!ムラムラする秋の夜長に胡蝶のやる夫
トピックス
現在作品内のサブカテゴリが一部表示されません。
ボチボチ直します。
AAのズレについて記事を書きました

準備中

AAのズレについて


やる夫ガイドの管理人が、初心者ながら勉強した結果をまとめました。
間違いがあったらツイッター や意見・要望ページ 等から報告してください。
※まとめブログ運営者に向けての記事です。

ページ内リンク

1.AAのズレの原因
2.AAのズレへの対策
3.AAズレ対策の具体例
4.フォントの導入方法
5.ぜろちゃんねるプラス掲示板にSaitamaarを適用させる方法
6.Saitamaarが緑色に変色する現象への対策
7.スマホ対応について
8.オススメ設定(これだけ読んでおけば大丈夫)

1.AAのズレの原因

AAのズレはwindowsのDirectWrite機能によって発生します。
DirectWrite機能とは、簡単に言うとフォントの自動調整機能です。
Firefoxでズレが起きないのは、FirefoxではDirectWrite機能に独自に対策しているからです。
DirectWrite機能自体を無効化できれば良いのですが、ブログ管理人側ではできず、
ユーザー全員にそれをさせるのは現実的ではありません。
また、2016年以降のChromeではDirectWrite機能を無効化できません。

2.AAのズレへの対策

AAのズレへの対策としては以下の2つが考えられます。

①スクリプトを使ってズレを修正する方法

②DirectWrite機能の影響を受けないフォントを使用する方法


それぞれにメリット・デメリットがあります。

①の方法は、仕上がりは綺麗ですが、反映に毎回ラグがあり、重いです。
②の方法は、ラグがなく軽快ですが、フォントによっては文字が太かったり滲んだり変色することがあります。

3.AAズレ対策の具体例

①スクリプトを使ってズレを修正する方法

ズレ修正スクリプトには「patchForAA」と「KGIndirectWriter」があります。
スクリプトについては製作者様の解説ページがありますので、そちらのリンクを張っておきます。
patchForAA
KGIndirectWriter

②DirectWrite機能の影響を受けないフォントを使用する方法

AAのズレないフォントには「Saitamaar」「textar」「RobotoJAA」等があります。
管理人のオススメは「Saitamaar」です。

参考:MSPゴシック(ズレあり)

参考:MSPゴシック(ズレなし※Firefox)

参考:Saitamaar

参考:textar

参考:RobotoJAA



4.フォントの導入方法

①Saitamaarの場合

まず、CSS内に
@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;
}

と記入してください。※3
その後「AAを表示する範囲の要素(タグorクラス)」のfont-familyの先頭に'Saitamaar'を追加します。※2
例)
AA表示範囲要素{
font-family: 'Saitamaar', 'MS Pゴシック', 'MS PGothic', sans-serif;

これで導入完了です。


②「textar」「RobotoJAA」の場合

まず、textarRobotoJAA のリンクから、フォントファイル(ttfファイル)を入手してください。
フォントファイルが複数ある場合、同梱してあるReadme.txtを読んで、好きなものを選んでください。
ファイルを入手したら、当該ファイルを任意の場所にアップロードし、そこのパスを覚えておきます。
※ルートディレクトリに「fonts」という名前のフォルダを作り、その中にアップすることをオススメします。
 ちなみに、その場合のパスは「 /fonts/textar.ttf 」です(※textarフォントの場合)。
次に、CSS内に
@font-face{
font-family: 'textar';
src: url('ファイルのパス');
}

と記入してください。 ※「ファイルのパス」は先程覚えたフォントファイルのパス
その後「AAを表示する範囲の要素(タグorクラス)」のfont-familyの先頭に'textar'を追加します。※1※2
例)
AA表示範囲要素{
font-family: 'textar', 'MS Pゴシック', 'MS PGothic', sans-serif;

これで導入完了です。

※1 「RobotoJAA」の場合は、上記「'textar'」のところを「'RobotoJAA'」に変えてください。
 ここの名称は任意に変更可能ですが、@font-face内とAA表示範囲要素内で同一のものにしてください。
※2 自身のサイトの「AAを表示する範囲の要素(タグorクラス)」が分からない場合、
 CSS内で「font-family:'MS Pゴシック'」を探せば、恐らくそれです。
Saitamaar.jsを導入することによっても解決可能ですが、ラグが発生します。
※3 SSL(https)サイトの場合、自分でフォントを入手し、②の方法を利用する必要があります。

5.ぜろちゃんねるプラス掲示板にSaitamaarを適用させる方法

ぜろちゃんねるプラス掲示板では、デフォルトではCSSの指定がほぼできませんが、
スレッド共通のHTMLパーツにCSS読み込みタグを入れれば、CSSを指定することができます。

①簡単な方法(バナー部に埋め込む方法)

1管理画面のシステム設定→表示設定→「index.html以外の告知欄を表示する」にチェックを入れます。
2管理画面の各種編集→告知編集(pc用)→「内容」内を
<style type="text/css">
@font-face{
font-family: 'Saitamaar';
src: local('Saitamaar'),
url('http://keage.sakura.ne.jp/fonts/Saitamaar.eot?') format('eot'),
url('http://keage.sakura.ne.jp/fonts/Saitamaar.woff2') format('woff2'),
url('http://keage.sakura.ne.jp/fonts/Saitamaar.woff') format('woff'),
url('http://keage.sakura.ne.jp/fonts/Saitamaar.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
dd {
font-family:'Saitamaar','MS Pゴシック','MS PGothic',sans-serif;
font-size:16px;
line-height:18px;
}
</style>
と書き換えます。 最後に設定ボタンを押して完了です。

※トップ画面にもSaitamaarを適用させたい場合

 1管理画面のシステム設定→表示設定→「index.htmlの告知欄を表示する」にもチェックを入れます。
 2管理画面の掲示板→該当掲示板にチェックを入れ、index更新ボタンを押します。
  これで適用完了です。
※下記②の方法を参考に外部CSSを利用することもできます。

②本格的な方法(HTMLヘッダーに埋め込む方法)

1Saitamaarを導入する設定のCSSを用意し任意の場所にアップロードし、そこのパスを覚えておきます。
 ※①を参考に、範囲要素はddにしておけばOKです。
2「/read.cgi」内の196行目に

<link rel='stylesheet' href='CSSのパス'>

を記入します。これで適用完了です。

※トップ画面にもSaitamaarを適用させたい場合

1「/module/varda.pl」内の300行目に

<link rel='stylesheet' href='CSSのパス'>

を記入します。
2管理画面の掲示板→該当掲示板にチェックを入れ、index更新ボタンを押します。
これで適用完了です。

※②の方法は告知欄とは無関係です。
※①の方法を参考に、外部CSSではなく直接記述もできます。


応用(おまけ)

①②の両方とも、同様の方法でスクリプト等を埋め込む事ができます。
また①の方法では、body内に埋め込めるため、HTMLパーツを埋め込み、それをjQueryを使って移動、
あるいは、外部CSS等と組み合わせることで、一般のwebサイトとほぼ同等のカスタマイズができます。
管理画面からでは記述しにくい場合は「/module/denethor.pl」内の48行目のシングルクォーテーション内を
書き換えることによっても同様のことができます。

協力:「ごみ」さん サイト二次創作についてあれやこれや
          ツイッターごみ@WastIndustrial

6.Saitamaarが緑色に変色する現象への対策

DirectWriteか、アンチエイリアスか、ClearTypeか、原因がはっきりしなかったのですが、
Saitamaarで16pxのフォントを利用すると、ブラウザ幅によっては緑色に変色することがあります。

対策

18pxのフォントは、ほぼ緑色に変色しないので、18pxのフォントを使用し、0.9倍に縮小します。
CSS内のAA表示要素内の該当箇所を
font-size: 18px;
line-height: 20px;

と書き換え、同要素内に
-webkit-transform-origin: 0 0;
-webkit-transform: scale(0.9, 0.9);
-moz-transform-origin: 0 0;
-moz-transform: scale(0.9, 0.9);
-ms-transform-origin: 0 0;
-ms-transform: scale(0.9, 0.9);
-o-transform-origin: 0 0;
-o-transform: scale(0.9, 0.9);

を書き加えます。これで適用完了です。

デメリット

縦横の比率が若干変わります。
また、ズレや滲みが若干発生します。

参考:通常のSaitamaar

参考:変色したSaitamaar

参考:変色対策後のSaitamaar



7.スマホ対応について

スマホに対応するには、「Saitamaar」「textar」等のフォントを導入する必要があります。
また、ブラウザに文字サイズを勝手に変更されることがあるため、それをさせない設定にする必要があります。

①Saitamaar等を既に導入している場合

AA表示範囲要素内に
-moz-text-size-adjust: none;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;

を書き加えます。これで適用完了です。

②Saitamaar等をメインフォントとしては導入しない場合

「4.フォントの導入方法」とほぼ同じ手順でフォントを導入しますが、最後の'Saitamaar'を
font-familyの「'MS Pゴシック','MS PGothic'」の後に記入してください。
例)
font-family:'MS Pゴシック','MS PGothic', 'Saitamaar', sans-serif;
その後、同要素内に
-moz-text-size-adjust: none;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;

を書き加えます。これで適用完了です。

参考サイトSaitamaarの製作者様とのTwitterやりとりまとめ
      Saitamaar製作者様のサイトの記事keageLog

8.オススメ設定(これだけ読んでおけば大丈夫)

フォントにSaitamaarを導入し、変色対策とスマホ対応した設定です。

まず、CSS内に
@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
その後「AAを表示する範囲の要素(タグorクラス)」を ※1
AA表示範囲要素{
font-family: 'Saitamaar', 'MS Pゴシック', 'MS PGothic', sans-serif;
font-size: 18px;
line-height: 20px;
font-style: normal;
font-weight: normal;
letter-spacing: 0;
overflow: auto;
white-space: nowrap;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(0.9, 0.9);
-moz-transform-origin: 0 0;
-moz-transform: scale(0.9, 0.9);
-ms-transform-origin: 0 0;
-ms-transform: scale(0.9, 0.9);
-o-transform-origin: 0 0;
-o-transform: scale(0.9, 0.9);
-moz-text-size-adjust: none;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}

と上書きします。これで完了です。

※1 自身のサイトの「AAを表示する範囲の要素(タグorクラス)」が分からない場合、
 CSS内で「font-family:'MS Pゴシック'」を探せば、恐らくそれです。
Saitamaar.jsを導入することによっても解決可能ですが、ラグが発生します。
 やる夫ガイドの管理人にDMを送れば答えられるかもしれません。
※2 SSL(https)サイトの場合、Saitamaarの導入は、自分でフォントを入手し、自サーバー等に置き
 そこのパスを指定する必要があります。(4,フォントの導入方法②参照)

TOPページへ