CSS– tag –

Twitter BootstrapとGoogle Maps apiを同時に使用すると、 Twitter Bootstrap側のCSSの影響を受けて、 Google Mapsの表示内のアイコンが細長くなったり、 小さくなったり、 表示されないという問題が発生しました。 サイトを作成する上で、 ちょくちょくBo...

【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】シリーズの方法で色々試行錯誤して、 スマートフォン用のテーマを作成していました。 やりたい事は親テーマの機能を引き継ぎつつ、 PCサイトとはデザインが別で、 スマートフォン向け...

bodyタグにclassまたはidを振って、 PCとスマートフォンのCSSを１枚で管理する方法です。 元ネタはBrowser Detection and the body_class() Functionです。 ブラウザ別にbody_class() 関数にブラウザ別のクラスを加えるという方法。 つまり、bodyタグにス...

PCとスマートフォンのCSSを完全に別にして、１つのテーマで管理する方法です。 余り知られていませんが、 WordPressには、PCサイトとスマートフォンサイトを出し分ける条件タグがあります。 [php][/php] この条件タグを利用して、テーマ内で出し分けを行い...

PCサイトとスマートフォンサイトで必要となってくるカスタマイズの説明です。 これは、どのテーマ作成にも関わってきます。 PC専用のウィジェットとスマートフォン専用のウィジェットを設置する PCサイトでは閲覧範囲が広いので、 ２カラム３カラムレイア...

カテゴリーを表示した時、カテゴリーごとにCSSを効かせる方法です。 カテゴリー別にCSS分岐の方法とは違い、テーマファイル内にidあるいは、classとして指定し、限定して使う方法です。 id指定する場合は、bodyタグにつける事をお勧めします。 [php]id="< ...

Head Cleaner (最適化＆高速化)をインストールし、 更にサイトを軽減化しようと、 画像リクエスト数を減らすことにしました。 この方法は、親しいSEが、 小さい画像がいくつもあると、 それだけリクエスト数が増えるわけだから、 負荷が高くなる。 画像が...

ワンランク上を目指す CSSクリエイティブ・デザインは、グリットデザインなど、シンプルで且つ見やすくデザインするコツが書かれていて参考になる一冊。 読みやすいためにはどう余白を制御し、字間をコントロールするかが説明されていて、 実際例として掲...

Lovelog+*もFirefox3で見た時に表示崩れを起こしていました。 Firefox3はCSSでの表示が若干おかしくなっていました。 特に、position周りのバグがあるのかなと。 そんな訳で、Firefox3の調整をしていたのですが、 中々Firefox3のCSSハックが見つからない・...

携帯サイトもリニューアルいたしました。 現在使っているテーマに合わせて…。 携帯サイトの最近のWEB制作も学ばねばと思いつつも、 携帯キャリアを1つしか持っていない私は、 先延ばし先延ばししています…(・ω・;A)ｱｾｱｾ… XHTML＋CSSできればできるとは思い...