やる夫 aa スマホ

まが男AA

＿＿＿_ ／_ノ ヽ､_＼ ﾐ ﾐ ﾐ oﾟ(（●）) (（●）)ﾟo ﾐ ﾐ ﾐ こんなんで逮捕されるわけないおｗｗｗ /⌒)⌒)⌒. . ⌒（__人__）⌒. ＼ /⌒)⌒)⌒) | / / / |r┬-| | (⌒)/ / / /／ バ | . (⌒) | | | ／ ゝ . / ン | ノ | | | ＼ / ） / バ ヽ / `ー'´ ヽ / ／ ン | | l||l 从人 l||l l||l 从人 l||l ヽ -一'''''''~~｀`'ー--､ -一'''''''ー-､ ヽ ＿＿＿＿(⌒)(⌒)⌒) ) (⌒＿(⌒)⌒)⌒))

そうだ これは夢なんだ

＼ r'´￣￣￣ ￣￣￣｀ ､. ＿＿＿ l> ､:: ＼ﾍ,___,／￣￣￣￣＼＿/. ＿＿| .|＿＿＿＿＿＿＿＿＿_＿ |l ＼:: | | /;;:: ::;ヽ ｜､. |[], _ .|:<ニ>. |l'-,､イ＼: | | |;;:: ｨ●ｧ ｨ●ｧ::;;|｜. ﾍ￣￣,/. (_＿):: |l ´ヽ,ノ: | | |;;:: ::;;| ,l､. ￣￣. |l | :| | | |;;:: c < っ ::;;| l. |l.,＼＼| :| | ,' |;;:: ＿＿ ::;;;| l. そうだ |l | :| | | ヽ;;:: ー ::;;／ l. これは夢なんだ |l＿＿,,| :| | |,r'',´￣￣￣￣￣｀ヽ､|l. ぼくは今、夢を見ているんだ |l￣｀~~| :| | | |l. 目が覚めたとき、 |l | :| | | |l. ぼくはまだ12歳 |l | :| | | '''´ |l. 起きたらラジオ体操に行って、 |l ＼＼[]:| | | |l. 朝ご飯を食べて、涼しい午前中にスイカを食べながら宿題して、 |l ｨ'´~ヽ | | ｀`' |l. 午後から友達とプールにいっておもいっきり遊ぶんだ・・・ |l-''´ヽ,／:: | | '''´ |l.

1.AAのズレの原因

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

2.AAのズレへの対策

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

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

3.AAズレ対策の具体例

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

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

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; > と記入してください。※３ その後「AAを表示する範囲の要素（タグorクラス）」のfont-familyの先頭に'Saitamaar'を追加します。※２ 例） AA表示範囲要素 font-family: 'Saitamaar', 'ＭＳ Ｐゴシック', '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'を追加します。※１※２ 例） AA表示範囲要素 font-family: 'textar', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; これで導入完了です。

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

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

①簡単な方法（バナー部に埋め込む方法）

１管理画面のシステム設定→表示設定→「index.html以外の告知欄を表示する」にチェックを入れます。 ２管理画面の各種編集→告知編集（pc用）→「内容」内を と書き換えます。 最後に設定ボタンを押して完了です。

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

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

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

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

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

応用（おまけ）

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

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

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); を書き加えます。これで適用完了です。

デメリット

7.スマホ対応について

①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 PGothic'」の後に記入してください。 例） font-family:'ＭＳ Ｐゴシック','MS PGothic', 'Saitamaar', sans-serif; その後、同要素内に -moz-text-size-adjust: none; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; を書き加えます。これで適用完了です。

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

まず、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; > と記入してください。※２ その後「AAを表示する範囲の要素（タグorクラス）」を ※１ AA表示範囲要素 font-family: 'Saitamaar', 'ＭＳ Ｐゴシック', '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%; > と上書きします。これで完了です。

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