I made this Flash Music Player at MyFlashFetish.com.

Labirinto di Oresama ~俺様的迷宮

Eurobeatの周辺のどうでもいいような話を中心に

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Baileys アップデート

じんじんさんからご指摘いただいたコメント投稿欄の絵文字パレットの右側3分の1が切れてしまって表示されないという件。

IEでブラウジングした場合、確かに途中で切れていた。その横にあるカラーパレットも右側が少し切れてしまっている。『あれ?』と思ってFirefoxでチェックしてみると、絵文字パレットの表示される位置がIEとは異なり、文字装飾ツールの直下なので、そのような不具合は見られない。

なぜ、位置が違うんだっ!

上がIE、下がFFで見たところということで、先ず思い浮かんだのがjavascriptを使ったレイヤー表示の位置設定。この文字装飾ツールってjavascriptを使って呼び出しているのだとうっすらと記憶していたのだが、俺様ちゃんにはjavascriptなんてわかんねぇ!>< 

javascriptってどうなってるの?と取り敢えずGoogleで検索して色々読んでみた。

そのレイヤーで表示されているものの位置をFirefoxで見た時と同じように直下になるようにスタイルシートで設定できさえすれば解決なんだが・・・。

その後、何か手掛かりになるものはないかと思い、FC2ユーザーフォーラム内を検索してトピックを読み漁った。

でも、これはユーザー側がスタイルシートで設定できるようなものではないらしい。

読んだトピック:
コメントの絵文字表示
コメントの装飾について
コメント投稿画面で絵文字が
コメントの絵文字機能を使う際、絵文字のリストがトピックスの裏に隠れてしまいます
絵文字パレットとブログアクセサリーがかぶる

仕方がないので、取り敢えず他の修正すべき点を片付けてしまうことにした。

上のスクリーンショットを見るとIEでは絵文字パレットの上の数字がやけにでかくてブサイク。これをFFと同じにするには、DTD(文書タイプ宣言)をIEでも標準モードになるものに変更すればいいのだと調べ済みだったので、それを変更。

具体的には・・・
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

これの太字部分を取っ払ってしまった。
* DTDとブラウザの表示モード

横スクロールバーが現れ、ボックスの内側にパレット全体が表示されている状態それでどうなったかなとチェックしてみたところ、意外にも絵文字パレットも全体が表示されるようになっていた。それはよかったんだが、ボックス(div)の内側に表示されていて、横スクロールバーが現れている。

どうすればボックスの外側に表示できるんだろうか。

スタイルシートのoverflow、width、paddingやらをあちこち修正してはプレヴューしてチェックするという作業を何度も繰り返したが、一向にバーは消えてくれない。IEってホント使えねー。

すっかり途方に暮れてしまった俺様ちゃん。『ってことは、今自分が使ってる新作のテンプレも基本構造はbaileysと同じだから、やっぱり絵文字パレットはダメなのか・・・』と青息吐息でIEでオープンしてみた。

すると、こっちのテンプレではちゃんとボックスの外側に表示されているではないか!?

どこが違うのか。2つのテンプレのソースと半時間ほどにらめっこ。

違う点と言えば、baileysの方はくま取り外し機能(笑)のために、カラムの配置をrelativeで指定していることぐらいだ。

ダメ元で試しにrelativeでの配置をスタイルシートから外してみた。

横スクロールバーは消え、ボックスの外側に全体が表示されている状態するとどうだろう。relativeでの配置を外したために全体の位置が下がってしまっているが、絵文字パレットは外側にピョコンと現れたではないか。

へー、relativeが原因だったとは・・・。どういう理屈でそれがこの現象を引き起こすのかは不明。というか、調べるのはかなり困難だと思われるので調べていない(笑)。でも、とにかくこれで一応は解決。修正登録しましたので、この問題でお困りの方は再度ダウンロードしてみてください。


くまは別の方法で取り外すようにしましたので、こちらの記事に書いた方法はもう使えません。ご注意ください。

スタイルシートに書いてありますが、今回のくま外し方法は次のようになっております。

/*コンテナ部分の設定*/
div#container {
background-image : url(http://blog-imgs-30.fc2.com/o/r/e/oresamachan/perlei_ctnt.jpg);
/*くま無しヴァージョンにする場合は↑のperlei_ctnt.jpgをperlei_ctn.jpgにしてください*/
background-repeat : no-repeat;
background-attachment : scroll;
background-position : center 18px;
/*くま無しヴァージョンにする場合は↑の18pxを60pxにしてください*/
width : 822px; /* コンテンツ幅を822pxに設定 */
margin-left : auto; /* 左側のマージンを自動算出 */
margin-right : auto; /* 右側のマージンを自動算出 */
text-align : left; /* body要素で指定したセンタリングを戻す */
}

/*ヘッダーの設定*/
.head{
background-position : left 18px;
background-repeat : no-repeat;
height : 102px;
text-align : center;
color : #c3b66f;
/*くま無しヴァージョンにする場合は↑の色番号をお好みのモノに変えてください*/
margin : 0;
line-height : 1.1;
}

/* ブログのタイトルの設定 */
.site_title{
font-family : Georgia, "Times New Roman", Times, serif;
font-weight : bold ;
padding : 30px 14px 0;
margin : 0;
}

.site_title a:link {font-size: 16px; color:#d1c773;}
.site_title a:active {font-size: 16px; color:#ebda7c;}
.site_title a:visited {font-size: 16px; color:#d1c773;}
.site_title a:hover {font-size: 16px; color:#ebda7c;}
/*くま無しヴァージョンにする場合は↑の色番号をお好みのモノに変えてください*/



2008年12月7日

・IE7で見ると右のメインカラムに横スクロールバーが出現する問題を修正。

IEだと横スクロールバーが現れる現象はIE6以下のヴァージョンでも見られたことで、それに対する処置としてCSSにIEだけが読み取る下記の記述を付け足していた。因みにこれは、box_mainというIDのdivの横幅を368pxに指定するための記述。IE以外のブラウザには370pxと指定。で、これは多分IEのスクロールバーの幅が他のブラウザより広いのが原因なんだろうと考えていた。(実際はそうではないらしい

* html div#box_main{
width : 368px;
}


にもかかわらず、IE7だとスクロールバーが消えてくれない。ということは、IE7ではこの記述は効かなくなったということでいいのかな?まあ、それはともかくとして、要するに幅を狭めればいいだけの話なので、結局IE用としていた368pxをデフォルトで指定して解決。
スポンサーサイト

この記事に対するコメント

あぁ、それで
サポート掲示板に俺様ちゃんがちょこちょこ出てたんですねー( ̄-  ̄ )
またややっこしい物を作っちゃいましたね(* ̄m ̄) 
でもこのダークバージョンも素敵ぃー
なんか、年収五千万とかのデキリーマンが何気に抱えてるノートみたいぃ・・・って今は誰もファイロファックスなんか使わないか・・・全部ブラックベリーとかiPhoneで済んじゃうんだよね、悲しいねぇ、昭和は遠くなりにけりだわねぇ・・・
【2007/11/03 02:31】 URL | ぷふ(☉д☉) #-


そうそう、ファイロファックスですよ。基本は6穴式ですよね。この真ん中のリングがなかなか上手く作れたかなと気に入っています。というか、年収5千万もあるのにリーマンしてる人なんて居るんですか!すごいなぁ・・・
【2007/11/03 23:06】 URL | 俺様ちゃん #-


俺様ちゃん!何これ!
テンプレート超かっちょいいんだけど!!!

ああ、揺らぐわぁ。
今使わせていただいてるexecも超オキニなんで、セカンドブログでも作ろうかしらって思うくらい惹かれるわぁ。
【2007/11/07 17:14】 URL | つな #Imebn9oI [ 編集 ]


おお、つなさんお久しぶりです。

かっこいいってことは俺様ちゃんが今使ってる方ですかね。近々、新着テンプレートのコーナーに登場すると思うんで、よかったらセカンドブログの方にでもお使いくださいまし。いやぁ、でもあのexecは誰もexecだとは気付かないでしょうね(爆)。
【2007/11/08 00:16】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]

俺様ちゃーん
ちょっと質問なんだけど、メインのボーダーを、線じゃなくて素材屋さんから借りた綺麗なボーダーとかラインの画像にしたい時ね、HTMLで指定するの?テーブルタグ使って。それともCSSで弄れちゃうの?色々あっちこっち調べたんだけど、上下左右ぐるりの枠じゃなくてただ両端につけたい時の説明が見つからないのよぅ(T▽T)
ぷふを助けてくださいな(。-_-。)
(調べ方が足りませんな、てのは無しの方向でひとつ・・・)
【2007/11/08 00:31】 URL | ぷふ( ̄▽ ̄)ノ #-

画像にもよりますが
CSSで割と簡単にできますよ。
両端に入れるってことは、縦長の画像ですね。
その画像を正確にはどこに表示したいのかという点が重要です。

その表示したいボックス(div)のクラスを見つけて、CSSで背景画像として設定します。

例えばあのドクロのテンプレでエントリー部分の上から下まで隙間無く画像を縦に表示したいのなら、クラスは.mainになります。

その場合は次のような感じになるでしょう。

.main {background-image:url(画像のパス);
background-repeat:repeat-y;
background-position:center top;}

あとは必要であればpaddingやmarginで位置を調節。

で、画像はカラム幅に合わせて、両端に画像が付いたものを用意します。つまり・・・

[素材の画像]黒の無地[素材の画像]

こんな感じですね。

ところで、またよしなし事のところがはみ出して背景が白いんですけど(涙)。
【2007/11/08 20:46】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]

おぉ・・・
>画像はカラム幅を合わせて・・・
いやぁ、気が付きませんでした_( ̄▽ ̄)ノ彡☆
あたしはもうてっきり、画像の右と左、別々にラインの位置を指定するもんだとばっかり思ってました・・・てことは、あれですね、最初から右と左にラインが入ってる画像を用意して、貼り付けちゃうってことですね?なーんだー・・・ってそれもかなり面倒だなぁ( ̄ρ ̄)ホジホジ
でも楽しそうだからやってみます。
またまたお助けいただいて、多謝♪
あ、はみだしと背景色、直ってます?今直したんだけど・・・
【2007/11/08 21:04】 URL | ぷふ( ̄▽ ̄)ノ #-


おや、相変わらず早起きマダムじゅじゅですね。
テンプレ直ってます。もうついでに作り溜めてある分を全部修正しておかれてはいかがですか。ヘッダだけ編集して変えてるのかなと思ってましたが、その分だと結構あるんでしょ(笑)。

右と左と別々にボックスを作って指定する方法もあります(というかその方が一般的かも?)が、こっちの方が簡単でしょ?俺様ちゃんはいつもこっち。
【2007/11/08 21:56】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]


俺様ちゃん、baileysってば見れば見るほどかわいいのでセカンドブログを作ったんだけどタイトルに画像を使いたいっていったら怒る?
どこをどうしたら出来ますか?
ダメなら諦めます。
急いでないので後回しでいいからね。
【2007/11/08 22:26】 URL | つな #Imebn9oI [ 編集 ]

タイトルに画像を
おっ、つなさんこんばんは。

baileysの方だったんですか。いいですよ改造してもらって。
パターンが2つあります。

・ロゴ程度のものの場合
<div class="head">
<h1 class="site_title"><a href="<%url>"><%blog_name></a></h1><h2 class="site_s"><%introduction></h2>
</div>
htmlのヘッダ部分の紫の変数を画像のタグ<img src="画像のパス" alt="***" title="xxx">に置き換えます。<%introduction>も使わないのであれば消してしまうとスッキリ。

・大き目のバナーのようなものの場合
/*ヘッダーの設定*/
.head{background-image : url(画像のパス);
background-position : left 18px;
background-repeat : no-repeat;
height : 102px;
text-align : center;
color : #c3b66f;
/*くま無しヴァージョンにする場合は↑の色番号をお好みのモノに変えてください*/
margin : 0;
line-height : 1.1;
}
スタイルシートに紫の部分を追加し、背景画像として設定。オレンジ色の部分でそれの位置を調整。

こんな感じですね。適当に数字を弄ってみてください。
【2007/11/08 22:54】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]

うげげ(☉д☉)
ヘッダだけ変えて・・・で行こうと思ってたんですけどね、なんかそれじゃつまんないなーと思って・・・で、朝からせっせと画像作りしてるんですけど、作り始めてみて初めてあたしは「背景透過」をきちんと理解してないおたんちんだったと判りまして、激しく凹んでます。もうアマゾンジャパンで画像加工のハウツー本なんて探してますよ・・・(涙)
あ、マダムじゅじゅ、可愛いので戴きます(ΦωΦ)今日からあたしはマダムじゅじゅです。
【2007/11/09 01:41】 URL | ぷふ #-


マダムじゅじゅP。かわいいでしょ?PはもちろんアレのPです(爆)。

画像透過ですか?あんまり関係ないような・・・。あ、きっとラインとラインの間の部分を透過にしてしまうってことでしょうね。

各ボックスがどうなってるのかは、それぞれ違う背景色を設定してみたら分かりやすいですよ。
【2007/11/09 22:44】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]


透過ね、たぶん、あれよ、あたしったら黒背景用じゃない素材を無理無理使おうとして、んで間に黒無地背景挟んで実際に置いて見たら線のとこだけ透過されたまんま、って言うか、背景が白くなっちゃってたのよー、ね・え・さ・ん(ΦωΦ)
この週末は今使ってる画像加工ソフトのウェブサイトに入り浸りだわよ。
でも、解決方法は偶然だけど見つけちゃったの( ̄∇ ̄)あたしも伊達にpじゃないわね、んふふ。
【2007/11/10 04:44】 URL | じゅじゅp #-


俺様ちゃん、とても忙しい中あたしのわがままを受け止めてくれて感謝の言葉が見つからないわ。
念のために言っておくけど、感謝してるってことなのよ。
後々のことを考慮してご回答の後者の方を利用させていただきました。
これからも頼りにしてるね★
ありがとう。
【2007/11/10 12:10】 URL | つな #Imebn9oI [ 編集 ]


>じゅじゅP
んー・・・現物見てみないとよくわかんないわねぇ。てか、解決法みっかったんならもういいわね。ともかくおめでとう。

>つなさん
いえ、どういたしまして。念のためには無くても普通十分わかると思いますけど(笑)。
【2007/11/10 22:14】 URL | 俺様ちゃん #7dmq8oQg [ 編集 ]


この記事に対するコメントの投稿
















この記事に対するトラックバック

トラックバックURL
→http://oresamachan.blog23.fc2.com/tb.php/219-746426a8
この記事にトラックバックする(FC2ブログユーザー)
SEARCH

Enter keyword, click on Search button and you can find all the articles including it.

LINK J
LINK F
SHOW ALL ARTICLES


全タイトルを表示

CALENDARCHIVE

08 ≪│2017/09│≫ 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

TRACK WORD
RSS FEED

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。