CSSテクニック
一覧
素人っぽさを見せないサイトデザイン５つのポイント
ノンデザイナー。ウェブデザインの知識やスキルがない人間でも、最近は簡単にウェブサイトやブログを作れるようになりました。デザインに関しても、品質の高いテンプレートが無償・有償問わずそろっていますし、それをそのまま適用すれば何も問題はないのです。が、やはり自社の商品・サービス、方向性などに合わせたデザインをしたいと思いますよね。 Wor...
CSSでのグリッドデザイン法とレスポンシブデザインへの対応方法
ワードプレス（WordPress）について 2 つ、質問を頂きました。1 つ目の質問に関してはこちらの Twenty Thirteen に関する記事でお答えしました。本日は 2 つ目の質問です。 ② コンテンツのフィードを、CSS だけでグリッドデザインする方法はあるのでしょうか、参考になるサイトがあれば教えていただけないで...
ヘッダー・フッター・ナビメニューなどを横幅いっぱいに広げるCSSの書き方-Twenty Twelve篇-
よく他のウェブサイトをデザインの参考に見ていると、ヘッダーの背景やフッターの背景、またグローバルナビゲーションメニューなどが横いっぱいに広がっているデザインを見かけます。サイトコンテンツは中央に配置されているのに、背景だけ横いっぱい、ブラウザいっぱいに広がっているのです。 以前、Twenty Eleven でこのようなデザインに変更...
WordPressでページごとに別のスタイル（外部CSS）を適用させる方法
「このページだけ、違うスタイルシートを適用したいな〜」と思ったことはありませんか？ WordPress のテーマファイルには必ずスタイルシート（style.css）が含まれているはずです。そして、基本的にそこで決めたスタイルは全てのページに適用されます。でも、ページによってはちょっと違うスタイルを適用させたい……と思う時がありますよね。 ...
【続】横幅いっぱいのヘッダーやフッターにするCSSテクニック
ヘッダーやフッターなどがブラウザの横幅いっぱいに広がっているウェブサイトをよく見ると思います。そういった表現を実現しようという趣旨です。スタイルシートを活用して、画面いっぱいに広げたいと思います。 以前、どのような考え方でCSSを変更し横を画面いっぱいに広げればいいのかということをまとめたのですが、実はある問題が発生していました。 ...
Twenty Elevenのナビゲーションの「次へ」と「→」がズレてしまう件
Twenty Eleven で個別記事のページを開いたときに、上の方に前の記事や次の記事へのナビゲーションが表示されるかと思いますが、これって、あなたのブラウザではちゃんと表示されていますでしょうか？ もしかしてこんな感じに見えていませんか？ ぼくは Mac を使ってますが、Safari も Chrome も「次へ→」...
アイキャッチに個別記事へのパーマリンクを貼る方法
トップページの記事一覧。今まではアイキャッチを表示させているだけでしたが、アイキャッチにパーマリンクを埋め込もうと思い、設定してみました。さらにアイキャッチ画像ロールオーバーした際に、発光したような感じになるようにもしてみたいと思います。 なぜ、こんなことをするのかと言うと、アイキャッチをクリックした際に記事一覧から個別記事へとリン...