Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

使用条件

 ご自分のFC2ブログで使用するのであれば、ご自由にご利用ください。
 ※画像の著作権などは放棄しておりません

 基本的に商用などブログジャンルを問いません。
 何らかの制限を設ける場合は、テンプレートの登録者コメント欄に記載する所存です。アダルトに関しては公開制限を設けることで通知したものとします。

 再配布は禁止致しております。カスタマイズ後の再配布、共有プラグイン規模の部分的な再配布も含みます。

 作者リンクは削除しないようにお願いします(Designed byの文言を外して、ブログタイトルのみのリンクでも構いません)。

 画像の差し替え、画像の保存および別サーバーにアップロードしての利用、画像の原型をとどめる程度の加工はOKです。
 他作者様のテンプレートで画像のみご利用の際は、素材元がわかるようにリンクを入れてください(Material byの文言を外して、ブログタイトルのみのリンクでも構いません)。
 ※画像の差し替えやカスタマイズを禁止しているテンプレートかどうかを確認してください。

<a href="http://paro2day.blog122.fc2.com/" target="_blank">Material by Paroday</a>

 共有テンプレートのご利用は、FC2ブログ利用規約に同意したものとみなします。

 FC2ブログ内においては、共有プラグイン規模のコードについて、オリジナルを要求しています。

申請できるのはオリジナルのものに限られます。他所で配布されていたり、掲載されているコードを利用することは認められません。

自作を共有プラグインに登録する

[20090329]menue → menue-i

menueに戻る

[2カラム] pazo-menue-i

コピー場所 ▼ スタイルシートの編集

以下をすべて選択し、コピー、スタイルシート欄に貼り付けてください。

続きを読む

menue → menue-i

menueに戻る

[2カラム] pazo-menue-i

コピー場所 ▼ スタイルシートの編集

以下をすべて選択し、コピー、スタイルシート欄に貼り付けてください。

続きを読む

[MacIE5] クラスを複数指定した際のバグ

(半角スペースの前にある)複数指定したクラスと一致する名前を先頭に含むクラスも適用される

<div class="main hoge">

上記divにはmainだけでなく以下のようなクラスも適用される

  • mainbody
  • main-body
  • main-contents

■回避法

「abcd」というクラスがある場合

.abcd{
 background: green;
 border: 1px #000 solid;
}


(1)一致しないクラスを前に、一致するクラスを最後に置く

class="hoge abc"

半角スペースが後ろに入らないようにします。


(2)複数指定するクラスの名前に他のクラスと一致するものをつけない

×ダメな例

class="a hoge"
class="ab hoge"
class="abc hoge"

○正常に適用される例

class="abd hoge"
class="abce hoge"
class="ab-c hoge"


(3)優先順位によって回避する

.abc{
 background: blue !important;
 border: none !important; /* borderのリセット */
}

div.abc{
 background: blue;
 border: none; /* borderのリセット */
}


(4)クラスを複数指定しない。idを利用する。

<div class="abc" id="hoge">テキスト</div>


■サンプル

【×】MacIE5で見た場合

(1)HTML
<div class="abc hoge">
背景色は緑になる
</div>

(1)CSS
.abc{
  background: blue;
}
.abcd{
  background: green;
}

(2)HTML
<div class="main hoge">
右に罫線がつく
</div>

(2)CSS
.main{
  background: blue;
}
.main-contents{
  border-right: 10px #000 solid;
}

【○】通常

(1)HTML
<div class="abc hoge">
背景色は青
</div>

(1)CSS
.abc{
  background: blue;
}
.abcd{
  background: green;
}

(2)HTML
<div class="main hoge">
右の罫線はつかない
</div>

(2)CSS
.main{
  background: blue;
}
.main-contents{
  border-right: 10px #000 solid;
}

【×】MacIE5で見た場合はバグ再現のため実際のソースとは異なります。
【○】通常は表示HTML/CSSそのままです。
したがって、MacIE5で見ると通常MacIE5で見た場合と同じ表示になります。


回避法

背景色や罫線・文字色など別のプロパティをそれぞれ指定している場合は、優先順位(.wxyを.wxyzより下に記述する、!importantの付加など)によって回避し、罫線などはリセットする必要があります。


【○】MacIE5で見た場合

(3)HTML
<div class="wxy hoge">
背景色は青
</div>

(3)CSS
div.wxy{
  background: blue;
}
.wxyz{
  background: green;
}

(4)HTML
<div class="tax hoge">
右の罫線はつかない
</div>

(4)CSS
.tax{
  background: blue !important;
  border: none !important;
}
.taxy{
  border-right: 10px #000 solid;
}

(5)HTML
<div class="hoge wxy">
背景色は青
</div>

(5)CSS
.wxy{
  background: blue;
}
.wxyz{
  background: green;
}

【○】通常

(3)HTML
<div class="wxy hoge">
背景色は青
</div>

(3)CSS
div.wxy{
  background: blue;
}
.wxyz{
  background: green;
}

(4)HTML
<div class="tax hoge">
右の罫線はつかない
</div>

(4)CSS
.tax{
  background: blue !important;
  border: none !important;
}
.taxy{
  border-right: 10px #000 solid;
}

(5)HTML
<div class="hoge wxy">
背景色は青
</div>

(5)CSS
.wxy{
  background: blue;
}
.wxyz{
  background: green;
}

【○】MacIE5で見た場合、【○】通常どちらもHTML/CSSそのままです。
(3)ではdiv、(4)では!importantをつけて優先順位をあげています。
(5)はクラスの順番を入替えて回避しています。
MacIE5で見ても通常と同じように正しく表示されます。

プルダウンメニュー

 適当なテンプレートを複製して、テンプレート一覧から複製したテンプレートの[編集]をクリックして、再読み込み。その後、pado-mildのメニュープルダウンよりHTMLとスタイルシートをコピーして、貼り付けます。

 検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウに「タイトル」と入力してください

続きを読む