ウェブデザイン
一覧
レスポンシブデザイン用！デバイスごとのレイアウト・表示を確認できる無料ツール発見
本日はさくっと、ご紹介のみで、、、 こちらのサイト ＞ Demonstrating Responsive Design レスポンシブデザインに対応できているかどうか、各デバイスごとにどのように見えるのか、ということをものすごく簡単にチェックできるサイトです。使い方もものすごく簡単で、右上にチェックしたいサ...
【商用可】色・サイズ・種類・形式、全てを網羅したオリジナルロゴ・アイコン素材が無料で入手できるサイト
Facebook の「いいね！ボタン」や Twitter の鳥（ラリーバード）、メールや RSS にカメラなどなど、、、色々なロゴやアイコンがありますが、それらをオリジナルの画像にしたいと思ったことはありませんか？ オリジナルの画像を使うことで、ウェブサイトとの統一感が生まれます。周りの配色に合わせてより目立たせる工夫だってできます...
【続】横幅いっぱいのヘッダーやフッターにするCSSテクニック
ヘッダーやフッターなどがブラウザの横幅いっぱいに広がっているウェブサイトをよく見ると思います。そういった表現を実現しようという趣旨です。スタイルシートを活用して、画面いっぱいに広げたいと思います。 以前、どのような考え方でCSSを変更し横を画面いっぱいに広げればいいのかということをまとめたのですが、実はある問題が発生していました。 ...
アイキャッチに個別記事へのパーマリンクを貼る方法
トップページの記事一覧。今まではアイキャッチを表示させているだけでしたが、アイキャッチにパーマリンクを埋め込もうと思い、設定してみました。さらにアイキャッチ画像ロールオーバーした際に、発光したような感じになるようにもしてみたいと思います。 なぜ、こんなことをするのかと言うと、アイキャッチをクリックした際に記事一覧から個別記事へとリン...
テクスチャはここで探せ！【無料】背景等に使えるおしゃれなテクスチャ集
背景画像を変えました。 MacOSX Lion で使われているような、上下左右にうっすらとメッシュの入った布生地みたいなテクスチャです。使っている人多そうだったんですが、Apple ファンとしてはどうしても使いたかったので使いました。 背景画像って、なかなかいいのが見つからなかったり、むしろどういうのを選んだらいいのか分からな...
WordPressの記事一覧にアイキャッチを表示させてみた（＋αで個別記事にも）
やっとできました！ アイキャッチの表示。 アイキャッチとは、その名の通り目をキャッチするためのもので、一般的には画像・写真が使われています。人は写真に注意を惹きつけられてしまう癖があるため、ブログなどの記事に注目してもらうためにこのアイキャッチが有効なのです。 WordPress にも実装されていて、アイキャッチ、またはサムネ...
メニューやヘッダー背景だけをブラウザの横幅いっぱいに広げる方法
これ、よく使う CSS テクニックなのでメモしておきます。サイトの横幅を超えて、ヘッダーやメニューをブラウザの画面一杯に広げる方法です。WordPress の Twenty Eleven に関してのメモですが、CSS のテクニックですし基本は同じなのでどんなテーマでも（ WordPress じゃなくても）応用ができると思います。 ...