floatで横並べにしたものを中央に配置したい
リストなどのブロック要素を横並びにするには float や inline-block を使うと思いますが、これら横並びにしたものをまとめて中央に配置したいことがあると思います。幅が決まっている場合にはそれほど難しくないのですが、ページネーションのような記事数によって横幅が変化するものの場合、結構難易度が上がります。 …[続きを読む]
inline-blockで要素を横並びにする
HTML において、ブロック要素は縦に並ぶという性質を持っています。これはブロック要素が文書構造においてひとつの塊や段落として扱われるため、前後に改行が挿入されるためです。これを横並べにしたければ、本来であればインライン要素に分類されるタグに変更するのが筋だと思うのですが、WordPress や各種ブログサービスでは出力されるタグが固定されているため、ブロック要素を横並べにしなければならない場面もあるかもしれません。 …[続きを読む]
vertical-alignとtext-alignは違うのだよ
vertical-align の使い方がよくわからなかったので調べてみました。text-align と名前が似ているので同じように使えるものだと思っていたのですが、かなり別物だったので忘れないようにまとめておきます。 …[続きを読む]
絶対パスと相対パスとルート相対パスのメリット・デメリット
スタイルシートで画像などを指定する場合にはパスを記述する必要がありますが、絶対パス、相対パス、ルート相対パスの3つの方法があります。 …[続きを読む]
ブログで背景画像を使うには
WordPress のサイドバーのドロップダウンをお洒落にカスタマイズするため背景画像について調べていたのですが、background-image などの使い方をよく知らなかったのでまとめてみました。 …[続きを読む]
WordPressで画像を中央揃えにするには
文章に説得力をもたせたり記事の彩りとしてブログの文章に画像や写真を挿入することは欠かせません。WordPress では「投稿の編集」画面から「メディアを挿入」ダイアログを利用して画像を貼り付けますが、スタイルシートでどのように指定すればよいのかを解説したいと思います。 …[続きを読む]
Amazonアソシエイトにサイトを追加で申請する方法
この記事はすでにアマゾンアフィリエイトをやっていて、さらに新しいサイトにもアマゾンアフィリエイトを貼り付けたいという人に向けたものです。Google アドセンスが一度審査に通ればほかの Web サイトにも広告を貼れるのに対して、アマゾンはサイト毎に追加申請が必要になります。Google と同じノリでいると最悪の場合にはアカウントの停止もありえるので、申請し忘れることのないように注意してください。 …[続きを読む]
divにtext-alignは効かないよ？
SNS ボタンやページネーションなどのブログカスタマイズに関係する要素を中央揃えにする場合、text-align:center; を指定しても効かないといった話をよく聞きます。最悪、マージンやパッディングをがんばって設定すればそれらしくなりますが、もっとスマートな方法で解決したいですよね。今回はこの解決方法と、簡単な text-align に関する解説をしたいと思います。 …[続きを読む]
「Internet Explorerは動作を停止しました」の原因と解決方法
Windowsのセキュリティ向上にはWindows Updateは欠かせませんが、たまにインターネットエクスプローラーが起動できなくなることがあります。まず「Internet Explorerは動作を停止しました」というダイアログが表示され、 …[続きを読む]
表示速度アップ！EWWW Image Optimizerを導入する
ブログに訪れてくれた人をリピータにするためには表示速度の改善が欠かせません。あなただって表示するまでに何十秒もかかるブログをもう一度見に行こうとは思わないでしょ？表示速度アップの方法はいくつもありますが、そのなかでも画像サイズの圧縮はかなり効果が高いです。今回はアップロードした画像を自動的に圧縮してくれる WordPress プラグイン「EWWW Image Optimizer」の基本的な設定や使い方を紹介したいと思います。 …[続きを読む]
WordPressのプルダウンをCSSだけでシャレオツにカスタマイズしてみる
このブログもサボリ気味ながら更新を続けてきたことで、サイドバーのアーカイブやカテゴリーが充実して縦長になってきました。ネットを巡回しているとやたらとサイドバーが縦長のブログにめぐり合うことがありますが、私はこれが気になったので表示をドロップダウンに切り替えようと思ったところ、デフォルトのものはどうにも味気ない。 …[続きを読む]
ローカル環境のjQueryでHello World！
超簡単な jQuery の動作テストをしようとしたのですが、ローカル環境に XAMPP を用意したり、レンタルサーバーにアップロードするのも面倒臭いので、簡単にテストできる方法がないのか考えました。デバッグなどにご利用下さい。 …[続きを読む]
擬似要素before、afterと併用するcontentプロパティ
content プロパティは要素の前や後ろにテキスト・画像を挿入する際に設定します。このプロパティを使用する場合には、擬似要素である ::before または ::after を併せて使います。例えば次のようになります。Yahoo ニュースなどで一度は見たことがあるのではないでしょうか。 …[続きを読む]
SNSボタンに必須！CSSだけで吹き出しを作る
ツイッターなどでの拡散を期待してブログに SNS ボタンを設置するのはもはや定番になりましたが、デザインに使われる吹き出しは画像を使わないでも実現することができます。最近は吹き出しジェネレータが Web サービスとして公開されているので仕組みを知らなくても導入できるのですが、細かい位置調整などをしようとするとある程度原理を理解していないと厳しいと思います。 …[続きを読む]
CSSのみで三角形を作るには
WordPress のサイドバーでドロップダウンの CSS のカスタマイズに三角形が必要になったので調べてみました。画像を使っても実現できますが、色やサイズを簡単に調整できたり、アニメーションができたりとメリットが多いです。画像より容量も縮小できますしね。使うのは border プロパティです。 …[続きを読む]
