FC2でAA(アスキーアート）を簡単に貼る方法と対応環境
- FC2でブログをやっている方におすすめのAA(アスキーアート）の貼り方をご紹介します。
- AAを貼る方法として、.aaクラスを設定し、それをspanタグで囲んで表示する方法が簡単で便利です。
- ただし、一部の環境（firefoxとIE）ではAAの表示がずれてしまう可能性があるのでご注意ください。
- ベストアンサー
FC2でブログをやっています そのブログでAA(アスキーアート）を貼り
FC2でブログをやっています そのブログでAA(アスキーアート）を貼りたいんですが いろんな方法を試したのですがずれてしまいます・・・ /* AA表示 */ .aa{ font-family:"ＭＳ Ｐゴシック","MS PGothic","Mona","mona-gothic-jisx0208.1990-0",sans-serif; font-size:16px; line-height:18px; } <span class="aa"></span> 上記の方法や<pre></pre>を使った方法もためしましたが どうしてもずれてしまいます 環境はfirefox と IE です 両方ともに対応できればありがたいです。 解凍お願いします
- debuhayago
- お礼率8% (1/12)
- ブログ
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
(1)マシン依存文字を使用しない方がいいです。使用したフォントはＰＣにインストールされていないときに問題が発生します。 (2)ＨＴＭＬの中で、半角スペースは、２回以上ダブルと１回にカウントされるおそれがあります。そこで。。 .aa {white-space:pre;} として ＜div id="aa" ＞ ここにＡＡ ＜/div＞ か ＜span id="aa" ＞ ここにＡＡ ＜/span＞ などで可能になると思います。 改行幅・文字サイズ・表示位置は、ＣＳＳで調整してください。
関連するQ&A
- floatの使い方
すごく初歩的な質問をさせて下さい。 DW5.5を使用しております。 「contents」というdivの中に「main_1」と「main_2」というdivを入れたいのですが、 floatを使用するとcontentsの下側に回ってしまいます。 「main_1」を左寄せに、「main_2」を右寄せにして「contents」内にはめるには どのようにすればよいのでしょうか？ どなたかご教授下さい。 ＜＜ソース＞＞ <body> <div id="contents"> <div class="main_1"> </div> <div class="main_2"> </div> </div> </body> ＜＜css＞＞ *{ margin:0px; padding:0px; } img{ border:none; } li{ list-style-type:none; } body{ font-size:12px; line-height:1.4em; font-family:"ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; background-color: #333333; margin:0px auto; } /* FireFox リンク選択時の点線を消す */ a{ overflow:hidden; outline:none; } /* FireFox flashの境界の点線を消す */ object{ outline:none; } #contents{ width: 940px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background: #000 url(../img/con_main.png) repeat-y; padding-top: 42px; padding-left: 60px; } .main_1{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-left: 40px; width: 550px; float: left; height: 500px; } .main_2{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; float: right; width: 296px; padding-right: 30px; height: 500px; }
- ベストアンサー
- ホームページ作成ソフト
- Firefox2.0で2chのアスキーアートを綺麗に表示するには？
Monaフォントをインストールしていろいろ設定を変えてみたんですがFirefoxではどうしてもズレが直りません。 SafariとiCabでは綺麗に表示されます。 FirefoxでAAを綺麗に見れる方いましたら、方法を教えてください。
- ベストアンサー
- Mac
- fc2ブログのスタイルシートについて
h1～h6タグの文字の大きさ＆改行（しない）を変更したいのですが、 fc2ブログのスタイルシートのどこに書き込めばいいのか分からない状態です。 色々調べてみたのですが、どうしても分からないので、分かる方がいましたら、教えて下さい。 よろしくお願いします。 ソースは、こちらになります。 （文字数が足りないので数ヵ所省きました）↓ body{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic","Arial","Osaka"; margin:0px; margin-left:auto; margin-rught:auto; padding:0px; background-color: #FFFFFF; color:#666666; text-align:center; letter-spacing:1px; word-break: break-all; } #container{ width:840px; margin-right:auto; margin-left:auto; padding:0px 0px; background-color: #FFFFFF; border-left:1px solid #DECE21; border-right:1px solid #DECE21; } /* ### 共通のタグ ### */ blockquote{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:15px 0px; padding:10px; background-color:; border:1px dashed #996600; font-size:12px; line-height:150%; width:90%; voice-family:"\"}\""; voice-family:inherit; width:90%; } html>body blockquote{ width:90%; } blockquote p{ margin:0px 0px; padding:0px; line-height:150%; } h1.blogtitle{ position:absolute; width:820px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px; top:3px; left:20px; color:#333333; font-size:24px; font-weight:normal; z-index:1; } h1.blogtitle_back{ position:absolute; width:818px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px 0px 0px 1px; top:4px; left:21px; color : #CCCCCC; font-size:24px; font-weight:normal; z-index:0; } /* ### メイン部（左側） ### */ #main{ width:590px; float:left; margin:0px; padding:0px; } #contents{ margin:0px 20px 0px 20px; padding:0px; text-align:left; width:590px; voice-family:"\"}\""; voice-family:inherit; width:550px; } html>body #contents{ width:550px; } /* ### エントリー（記事） ### */ .e_title{ font-family: "MS UI Gothic", "Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; height:20px; text-indent:60px; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; color:#967B3F; font-size:14px; font-weight:bold; letter-spacing:1px; } .e_date{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic", "Arial","Osaka"; margin:0px 0px 30px 60px; text-align:left; color:#999999; font-size:10px; line-height:150%; letter-spacing:1px; } .e_body{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:0px 0px 15px 0px; margin-bottom:25px; padding:0px ; color:#444444; font-size:12px; line-height:155%; letter-spacing:1px; } .e_body img, .e_body a img{ margin:2px; border:0px; } .e_body_w{ margin:0px; padding:5px 15px 5px 15px; background-attachment: scroll; background-image: url(http://blog-imgs-41.fc2.com/a/w/i/awitchsally/aws_np03_point.gif); background-repeat: no-repeat; background-position: 0% 0%; border:1px solid #E9F3E9; } .e_more{ margin:30px 0px 15px 0px; padding:0px; text-align:left; color:#333333; font-size:10px; font-weight:bold; letter-spacing:1px; } .e_state{ font-family: "Verdana","ＭＳ Ｐゴシック","MS UI Gothic", "Arial","Osaka"; margin:5px 0px; text-align:left; color#967B3F; font-size:10px; letter-spacing:1px; line-height:150%; font-weight:bold; }
- ベストアンサー
- HTML
- font-sizeが効かない
html5でHTMLソースを記述しています。 時々、font-sizeが効かない事がありますが、どうしてかわかりますでしょうか？ HTML＞ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <div class="mainContents"> <a href="#"><span class="r20 t30 b30 right">＜戻る</span></a> <div class="clear"></div> </div> CSS＞ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー .right { float:right; } .r20 { margin-right:20px; } .t30 { margin-top:30px; } .b30 { margin-bottom:30px; } .mainContents { width:320px; background-color:#fff; font-family:"ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:12px; } 確認ブラウザは、SafariとFireFoxです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- ▲▲HTML・CSSの BODY{} について▲▲
CSSの BODY { ○○ } の中に記入する事について質問します。 例えば。 BODY { font-size : 12px; font-family : MS UI Gothic; font-color : #FF0000 } と指定した場合、普通に<BODY>内に入力したものは、 上記で指定したものになりますか？ もう1つは上記の指定以外に .font { font-size : 10px; font-family : MS UI Gothic; font-color : #000000 } 上記のものも指定したと想定し<BODY>内に あいうえおかきくけこさしすせそ <font span="font1">あいうえおかきくけそさしすせそ</span> と入力した場合<font span="font1">と指定した以外の場所は、 BODY { font-size : 12px; font-family : MS UI Gothic; font-color : #FF0000 } で指定したものになりますか？ 長くてスイマセン。おわかりになる方教えてください☆
- ベストアンサー
- HTML
- スクロールバーの色を（黒色に）変えたいので、下記のようにHTMLを記述
スクロールバーの色を（黒色に）変えたいので、下記のようにHTMLを記述しましたが、上手く出来ません。変更が出来ないのです。どなたか解る方がいましたらスクロールバーの色の変更のやり方を教えてください。よろしくお願い致します。 因みに、私はドリームウェーバーＣＳ５を使用しております。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>KANESUZU</title> <style type="text/css"> body { background-image: url(sozai/back.jpg); margin-top: 20px; margin-bottom: 20px; scrollbar-face-color:#000000; color: #BBCADE; } .waku { border: 1px solid #999; } .style7 { font-size: 12px; color: #999; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .obi { background-image: url(sozai/obi.jpg); } .obimoji { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 14px; color: #999; }
- ベストアンサー
- HTML
- スタイルシート font-familyについて
ブログのスタイルシートをいじっているのですが、ブログの記事名、ブログ本文のフォントをComic Sans MSにしたいと思っています。 それでフォント名をComic Sans MSに指定するのですが、反映されません。 また、試しにHGP行書体にすると、きちんと反映されました。 他の「カテゴリー」「コメント」等、サイドメニューの書体はちゃんとComic Sans MSに変わります。 どうすれば、Comic Sans MSになるのでしょうか。 初心者なので、どこが間違っているのかが分かりません。 下は私の作っているスタイルシートです。 div.article_subject { color: #000000; font-size: 22px; font-weight: bold; font-family: Comic Sans MS,"ＭＳ Ｐゴシック",Arial,Helvetica,sans-serif; } よろしくお願いいたします。
- ベストアンサー
- CSS
- font-familyの使い方
font-familyに正しい使い方ってあるんでしょうか？ 私、ブログとサイト（共にFC2)やってるんですけど2種類（3種類？）のfont-familyを使ってるんです。 これって閲覧者にとっては見づらいものなのでしょうか。 ブログの方では、bodyに font-family : "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","verdana","arial", sans-serif; を使い、記事の本文にだけ font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif; を使ってます。 サイトでは、bodyに font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif; を使い、メニュー部（英語）には font-family: Georgia,Helvetica,Arial; を使い、小説部分では説明（感想）部分はbodyのままですが本文では font-family: 'ＭＳ Ｐゴシック', sans-serif; を使ってます。 フォントサイズについては、基本11pxですが本文だけ12pxにしてます。 日本語の部分はsans-serifだしいいかぁと思ってるんですが、やはり見にくいものなのでしょうか？ こちらの意図としては本文だけ見やすかったらいい、と思っています。 ふと疑問に思ったことなので、暇な時に回答して頂ければ幸いです。
- ベストアンサー
- HTML
- CSSがFirefoxで効かない（IEでは効く）
body{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } という記述をしているのですが、IE7では有効なのに、Firefox3では有効になりません。 なぜなのでしょうか？ ご存じの方いらっしゃいましたら、お教えいただけると幸いです。 よろしくお願いいたします。 ＊当方環境は、vista ultimate 64bitです
- ベストアンサー
- HTML
- Firefoxで2ちゃんねるのAAがずれます
AAをhtmlに保存しいつでもブラウザで見られるように編集していたのですが、 Firefoxのフォントをヒラギノにしているためかずれてしまいます。 「AA html ずれ」などのワードで検索し、cssを外部読み込みするところ までたどり着けたのですが、なぜかAAの部分がMS Pゴシックで表示されません。 cssには ---ここから--- /* AAをずれないようにする */ div.ascii-art{ font-size:12pt; line-height:18px; font-family: 'ＭＳ Ｐゴシック','ＭＳＰゴシック','MSPゴシック','MS Pゴシック'; } ---ここまで--- このような記述をしました。 そしてhtmlには ---ここから--- <link rel="stylesheet" href="bace.css" type="text/css" /> ---ここまで--- こう記述し、フォントサイズは問題なく適用されているようです。（12pt→16ptで変化があったため） なぜフォントが適用されないのでしょうか？ 原因を教えて下さい。よろしくお願いします。
- ベストアンサー
- HTML
