Sponsored Link
Twitter BootstrapとGoogle Maps apiを同時に使用すると、
Twitter Bootstrap側のCSSの影響を受けて、
Google Mapsの表示内のアイコンが細長くなったり、
小さくなったり、
表示されないという問題が発生しました。
Continue reading
CSS
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】スマホ用の子テーマを作成する方法
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】シリーズの方法で色々試行錯誤して、
スマートフォン用のテーマを作成していました。
やりたい事は親テーマの機能を引き継ぎつつ、
PCサイトとはデザインが別で、
スマートフォン向けのデザインテーマを作成したかったのです。
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】１つのCSSで出し分ける方法
bodyタグにclassまたはidを振って、
PCとスマートフォンのCSSを１枚で管理する方法です。
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】条件タグでCSSを出し分ける方法
PCとスマートフォンのCSSを完全に別にして、１つのテーマで管理する方法です。
余り知られていませんが、
WordPressには、PCサイトとスマートフォンサイトを出し分ける条件タグがあります。
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】基本編
PCサイトとスマートフォンサイトで必要となってくるカスタマイズの説明です。
これは、どのテーマ作成にも関わってきます。
id、class指定で、カテゴリーごとにCSSを効かせる方法
カテゴリーを表示した時、カテゴリーごとにCSSを効かせる方法です。
カテゴリー別にCSS分岐の方法とは違い、テーマファイル内にidあるいは、classとして指定し、限定して使う方法です。
画像リクエスト数を減らしてサイトを軽くする
Head Cleaner (最適化＆高速化)をインストールし、
更にサイトを軽減化しようと、
画像リクエスト数を減らすことにしました。
ワンランク上を目指す CSSクリエイティブ・デザイン
ワンランク上を目指す CSSクリエイティブ・デザイン
読みやすいためにはどう余白を制御し、字間をコントロールするかが説明されていて、
実際例として掲載されているものも、見て納得できるもの。
ワンランク上を目指す CSSクリエイティブ・デザイン
Firefox3でCSSバグに対応するCSSハック
Lovelog+*もFirefox3で見た時に表示崩れを起こしていました。
Firefox3はCSSでの表示が若干おかしくなっていました。
特に、position周りのバグがあるのかなと。
そんな訳で、Firefox3の調整をしていたのですが、
中々Firefox3のCSSハックが見つからない・・・。
そしてようやく見つけました。
Firefox3でCSSバグに対応するCSSハック
携帯サイトもリニューアル
携帯サイトもリニューアルいたしました。
現在使っているテーマに合わせて…。
携帯サイトもリニューアル