CSS

Chrome拡張機能「Pesticide for Chrome」はWeb製作者必須ツールだ！

WEBを制作している方が使用しているブラウザは、ほとんどがGoogle ChromeかFirefoxだと思います。製作中に「あれ？なんか横幅がおかしい・・・？スマホで右端に空白が出てるぞ・・・？」なんて事たくさんありますよね。そこで...

CSS Google Web Font のNoto Sansをホームページに！！

サイトを制作していると、「フォントがいまいちなんだよなぁ・・・」って事ありませんか？僕はいつも思います。 Macで見れば綺麗だが、Windowsでみるとあんまり・・・またその逆もしかり・・・すべてimgで作ってしまえば問題は解決す...

WordPress Popular Posts アクセスランキングにPHPを使わずCSSで順位の数字をつける方法

前回WordPress Popular Posts を週間・月間・全期間 PHPで吐き出す方法】の記事を作成しました。これで人気の記事を【週間】【月間】【全期間】の三種類表示できるようになりました。今回はこのランキングをもっと解りや...

CSS inline-blockを均等に配置する！

普段、ブロック要素を横並びする時にinline-blockを使用しています。ただmarginの設定がとても面倒臭い。。。「横幅いっぱいで均等に配置してくれんか！？」と常々思っていたものですハイ。ついに重い腰をあげ、やり方を探したら簡単に見つ...

CSS　Chrome Firefoxのみ読み込むCSS

コーディングしていて苦労するのはブラウザによって表示の仕方がバラバラな所だ。Chromeでちゃんと表示されているのに、Firefoxで背景がはみ出ていたり。その逆もしかり。僕が思っているだけかもしれないが、特にFirefoxでの見え方が違う...

WordPress iframeで作成されたFacebookのLikeboxをCSSでレスポンシブに

FacebookのLikeboxってとても素敵ですよね。多くのサイトがFacebookのLikeboxを使っています。ただLikeboxはレスポンシブではなく、PCでは綺麗に表示されるがスマホの幅ではLikeboxの幅が変わらず、著しくデザ...

WordPress Contact Form 7 スマートフォン使用時はみ出るテキストエリアを修正

Wordpressのプラグイン「Contact Form 7」はとても便利だ。非常に簡単に問い合わせフォームを作ることが出来る。そのまま実装してもいいのだが、僕はtableを使って(レスポンシブ)表示している。ただこのContact For...

WordPress Youtubeの埋め込みをレスポンシブに

HPをレスポンシブで作成した際、埋め込んだYoutubeの大きさが変わらずスマートフォンで見ると横にはみ出てしまう。かといってiframeのwidthを100%にしても高さがそのままなので縦に長くなってしまう。何とか縦横比を保ったままレスポ...