Mac版IEからのコメント文字化け対策?(2)

テーマ:
先日、Mac版IEからのコメント文字化け対策?(1)という記事をアップしたところ、

マイクロソフト・インサイド・アウトのmillefeuilleさんから、「編集するところが違う気が...」と、助言を頂きました(^^ゞ

millefeuilleさん、ありがとうございます♪

で、助言を参考に、「common」の「input,textarea」を

input,textarea{font-size:12px;font-family: "Lucida Grande","Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka";}

という風に編集してみました(>_<)


現在のCSSファイルは、こちらです!


これで直るかなぁ。。。


ムックはこの現象について、以前から、「アメーバブログ側で対処すべき」と主張していますが、どうしてそのように主張しているのかについて、これまで書かなかった理由を付け加えておきます。


アメーバブログのスタッフブログで紹介されている対処方法から推測すると、この現象の根本原因は、Mac版IEの初期設定にあるようですね。

初期設定の仕様は誰が決めたものなのか?

それは、メーカーであって、Mac版IEを使っているユーザーの責任ではありません。

もしも、ユーザー本人が、Mac版IEに対しておかしな設定をしてしまったのであれば、ユーザー本人が設定を直すべきでしょう。

問題は、今回のように、初期設定がおかしな状態で出荷されている場合は、誰が対応すべきと考えるのか??

このような場合は、「サーバ側で、そのクライアントの使用を認めており、そして、サーバ側で対処ができるのならば、サーバ側で対処すべき」というのが、ムックの考えです。
AD

Mac版IEからのコメント文字化け対策?(1)

テーマ:
久しぶりにCSSを編集してみました(>_<)

なぜなら、Mac版IEでコメントすると文字化けする件について、アメーバブログ側は対処する気がないようなので。。。

今回編集したのは、

#comment_module .each_comment {

部分です。

ここに、

font-family: "Lucida Grande","Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka";

という行を追加してみました(>_<)


コレで解決するかなぁ・・・?

Mac版IEを使用されている方がいらっしゃいましたら、コメントのテストをしていただけると大変ありがたいです(>_<)


8/30追記

えっと、この記事には続きがあります(>_<)

興味のある方は、Mac版IEからのコメント文字化け対策?(2)をご参照ください(>_<)
AD

CSS編集(3)

テーマ:
久しぶりのCSS編集。今日は、地味~なトコに手をつけました(>_<)

それは、、、「font-information」の「font-size」を%で設定すること!

それで何が変わるかって~と、Internet Explorerで、「表示」-「文字のサイズ」を変えるコトで、表示される文字の大きさを変更することができるよ~になります(^.^)

アメーバブログの場合、デフォルトのCSSのままだと、Internet Explorerで、「表示」-「文字のサイズ」を変更しても、文字の大きさが変わらないんだよね。。。

わたしの場合、主にブログを見るのは自宅。
そして、自宅で使用しているブラウザは、Netscape7.1。

Netscape7.1の場合、「編集」-「設定」-「表示」-「フォント」で、「フォントサイズ」と「フォントの最小サイズ」を指定できる♪

さらに、スタイルシートでフォントサイズが固定に設定されていても、「表示」-「テキストの拡大/縮小」を変更するコトで、文字の大きさを変えるコトができる♪

なので、Internet Explorerで文字の大きさが変わらないコトについて、あまり問題にしてなかった(^^ゞ

んでも、こんな記事を書いたことだし、「まず、自分でできるところからユニバーサルデザイン♪」と思って、取り組んでみたよ☆彡

「ちょっと変。」「もっとここはこ~すれば。。。」など、感想やご意見などありましたら、コメントしていただけると助かります♪

ちなみに、現在のCSSファイルは、こちらです!

フォントサイズを可変にすることについて、以下の方々のご意見も参考になります☆彡

「弱視の人に何かできないかな」の「私が求めるフォントサイズ」
「アカリヤ」の「フォントサイズとユーザビリティ」  
AD

CSSでブログをもっと楽しく(2)

テーマ:
旦那:CSS編集(2)
   CSSファイルへのリンクが貼ってあるケド、
   CSSファイルの場所は、ど~やって調べたの??

ムック:あれはね~。
    アカリヤさんに教えてもらったんだ(^.^)

旦那:あ、そ~なの?

ムック:うん(>_<)
    ムック、こんな記事書いてるケド、
    HTMLやCSSは素人だからさ(^^ゞ


    アカリヤさん、いつもお世話になってます☆彡

旦那:そ~なんだ。で、ど~やって調べたの??

ムック:まず、自分のブログのソースを表示して。


     ソースを表示する方法は、、、

     Internet Explorerなら、
    自分のブログを表示して、

     「表示」メニューの「ソース」

     Netscape7.1なら、自分のブログを表示して、
     「表示」メニューの「ページのソース」
     

旦那:OK。表示したよ!

ムック:
そしたら、そのソースの中から、
     こんな風に書いてある行を探してね♪


<link rel="stylesheet" href="http://ameblo.jp/(中略).css" type="text/css" media="screen,print" />

旦那:あ、あった

ムック:
その行の中の、
    「http://ameblo.jp/(中略).css」が、
     CSSファイルの場所(URL)だよ!


※この会話はフィクションです(>_<)

分かりやすく書いたつもりですが、「分かりにくいよ~」などといったご意見や、ご質問などありましたら、コメントなどでお知らせください。また、「こ~するにはど~すれば?」といった質問も、随時受付中です!
お気軽にど~ぞ♪

HTMLでブログをもっと楽しく(11)

テーマ:
 ムック:知ってる?
    アメーバブログのリニューアルで、
    tableタグが使えるよ~になったよ♪

<4/10追記>
なんか、さりげなく使えるよ~になってました。まだ公式アナウンスはされてないみたいデス(>_<)
でもって、以前は、「ヘルプ」で、使用できるHTMLタグ一覧が確認できましたが、今は、さりげなくリンクが外れてます。
参考:http://ameblo.jp/help/faq.php#2-9

旦那:ほんと?
   で、てーぶるたぐって何??

ムック:表を作成するタグだよ♪

旦那:へぇ。
   じゃ、記事の中に表を入れられるんだね!

ムック:うん。プロフィールなんかにも入れられるよ。

旦那:便利だね♪ で、ど~やって表を作るの??

ムック:まず、表の部分は
    <table>と</table>で囲むよ。


     そして、各行は<tr></tr>で囲んで、
     各セルを<td></td>で囲むんだよ♪


     例えば、こんな風に。

<table>
<tr>
<td>ニックネーム</td><td>血液型</td><td>星座</td><td>動物占い</td>
</tr>
<tr>
<td>旦那</td><td>AB型</td><td>天秤座</td><td>狼</td>
</tr>
<tr><td>ムック</td><td>B型</td><td>魚座</td><td>狼</td>
</tr>
</table>

ニックネーム 血液型 星座 動物占い
旦那 AB型 天秤座
ムック B型 魚座

旦那:ほぉ!

ムック:
罫線を表示させたい時は、tableタグ内に
    「border="ココに数字を入れる"」ってのを
    入れてね♪


     「border="1"」だと、こんな風になるよ(>_<)

ニックネーム 血液型 星座 動物占い
旦那 AB型 天秤座
ムック B型 魚座


旦那:
そ~なんだぁ。。。

※この会話はフィクションです(>_<)

分かりやすく書いたつもりですが、「分かりにくいよ~」などといったご意見や、ご質問などありましたら、コメントなどでお知らせください。 また、「こ~するにはど~すれば?」といった質問も、随時受付中です!
お気軽にど~ぞ♪

CSS編集(2)

テーマ:
昨日、タイトルにオリジナルの画像を使おうとしてイロイロ試したのデスが、画像をアップしてみると、大きくなったり小さくなったり、思うよ~にならない。。。

仕方がないので、昨日は納得いかないデザインのまま保留。。。

そんなとき、akariyaさんのブログの「さっそく背景変更」にこんな記述が。。。

手始めに背景を変えてみました。
一旦ネコのスキンに変更して、背景をwebで配布されてる素材に。
ただ、これをアメブロの中でやろうとするとちょっと無理があって、アメブロの画像フォルダにアップすると、 なぜか1024*768の画像が 640*480サイズに・・・!
ナンダソレー アリエナーイ アリエナーイ!!
結局別で契約している有料のサーバにアップして、画像のみ参照してます。

そっか、コレって、CSSの書き方の問題じゃなくて、アメーバブログに画像をアップした段階の問題だったのか(+_+)

CSSのコトがまだよく分からないもんで、そっちの方ばっかり疑ってました(>_<)

早速、無料のフォトアルバムに登録して、フリーの素材をアップ!

そして、「グリーンフィールド」のスキンを選択してからCSSを編集して、その画像を使用♪

で、一度は目的の画像が表示されたのデスが。。。

しばらくしたら、「システムエラーが発生しました」って表示になっちゃった(>_<)

あらあら。。。

でも、このエラー画像もおもしろいから、ちょっとそのままにしとこ~かな(^^ゞ

akariyaさん、いろいろ参考にさせてもらってます♪
どうもありがとうございます☆彡

<追記>
結局、背景の画像用に、MSNにブログを登録して、そこにアップロードした画像をしました(>_<)
「B型★きまぐれ日記」別館

それと、画像は、-Natural Breeze- Flash&Photo Materialsさんのところのリンクウェアを利用しました☆彡

ふぅぅ。疲れた(+_+)

現在のCSSファイルはコチラです♪

HTMLでブログをもっと楽しく(10)

テーマ:
旦那:ん~(?_?)

ムック:今度は何?

旦那:画像を貼り付けたとき、
   横に並ぶ文字と下揃えになる ケド、
   上揃えにしたり、中央揃えにするには、
   ど~すればい~の?

リンク自由青 あああああああああああああああああああああああああ

ムック:そしたら、「HTMLタグを表示」画面を開いて、
    imgタグ内に「align="top"」、あるいは
    「align="middle"」を追加してみて♪

旦那:ほいきた!

リンク自由青 あああああああああああああああああああああああああ

リンク自由青 あああああああああああああああああああああああああ

ムック:できた?

旦那:おぅ!

※会話はフィクションです(>_<)
※間違いや分かりにくい点、質問などありましたら
  コメントください!

 

HTMLでブログをもっと楽しく(9)

テーマ:

旦那:アメーバブログリニューアル最悪~(?_?)

ムック:ん、どしたの?

旦那:画像を貼り付けたとき、
   左右の余白に文字が入らなくなったよ~。

suraimu あああああああああああああああああああああああああああああああああああああ

ムック:そしたら、「HTMLタグを表示」画面を開いて、

     imgタグ内に「align="right"」、
     あるいは「align="left"」を追加してみて♪


旦那:どれどれ?


suraimu ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
suraimu ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

旦那:おお~!

ムック:解決した?

旦那:うん、バッチリ♪


※会話はフィクションです(>_<)
※間違いや分かりにくい点、質問などありましたら、
  コメントください!

CSSでブログをもっと楽しく(3)

テーマ:

旦那:う~ん。。。


ムック:ど~したの??

旦那:スキンを変えたら、
   リンクスポットの色が変わったら、
   自分で変えた文字の色と同じになって、
   リンクスポットかど~か、

   見分けられなくなっちゃったよ。。。


ムック:そんなときは、CSSを編集すれば、
    すべてのリンクスポットの色を変えれるよ♪


旦那:え、そ~なの??
   
すごいね~、CSS♪
    で、ど~すればい~の??


ムック:CSSの記述の中に、
    「a:link」ってのがあるから、
     探してみて。


旦那:あ、あった!
   「a:link {text-decoration: none}」って
   行があるよ!


ムック:その下の行も注目してみて。
   
a:visited {text-decoration: none}
    a:hover {text-decoration: underline}」

    てあるでしょ?


旦那:うん!

ムック:この3行の頭の部分はね、
    こ~いう意味なんだよ。


A:link   リンクスポット
A:visited アクセス済みのリンクスポット
A:hover  ポイントしたときのリンクスポット


旦那:へぇ~。


ムック:で、後ろの部分は、こんな意味。


text-decoration: none
 リンクスポットの下線を表示しない


text-decoration: underline
 リンクスポットの下線を表示する


旦那:てことは、今は、リンクスポットの下線は、

   ポイントしたときだけ表示する設定に
   なってるんだね?


ムック:そう。もしも、ポイントしたとき以外も、

    リンクスポットに下線を表示したければ

    「none」の部分を「underline」に変更すれば
    い~んだよ。


旦那:なるほど♪


ムック:そして、リンクスポットを
    好きな色で表示したいときは、

    「color:ココに何色か入れる;」を追加すれば
    い~よ。


    「ココに何色か入れる」って部分は、

    カラー定数と16進数一覧表を参考にね♪


<記述例>
a:link {text-decoration: none;color: blue;}
a:visited {text-decoration: none;color: #8080FF;}

旦那:なるほど。これで解決だ!

<参考となるサイト>

TAG index
HTMLクイックリファレンス

MOPA Assertionが提供する HTML & CSS

※会話はフィクションです(>_<)
※間違いや分かりにくい点、質問などありましたら、
  コメントください!