レスポンシブ対応に必須!シンプルな折りたたみ式メニューを作ってみた

 スマホからインターネットを利用する人が増えてきたことで、Google もモバイル向けページの評価に基づいて検索順位を決定する「モバイルファースト」に重点を置くようになってきました。画面サイズによってブレイクポイントを設定して CSS の設定を切り替えるわけですが、ブログやウェブサイトで定番のグローバルナビゲーションのレスポンシブ対応はちょっと難しかったりします。 …[続きを読む]

Windows 10にアップグレードしたらXAMPPのApacheが起動しなくなった件

 マイクロソフトさんが無償アップグレードのキャンペーンを展開したことなどにより、Windows 10 のシェアが拡大しているようです。一時期は強制的にアップグレードを行わせるなどのトラブルがあったりしましたが、PC の買い替え需要なども重なり、ゆるやかながら OS の移行が進んでいるように思われます。 …[続きを読む]

管理が簡単!静的HTMLサイトの共通部分をパーツ化する

 ホームページといえば、ヘッダー・グローバルナビゲーション・コンテンツ・サイドメニュー・フッターで構成されるのが一般的です。このうち、コンテンツを除く部分は各ページで共通していることが多いと思います。 …[続きを読む]

WordPressでカエレバの不具合を修正するには

 最近のブログアフィリエイトではすっかりお馴染みとなった Web サービス「カエレバ」ですが、サービスの不具合により運営者さんのアフィリエイト ID が入ったパーツを生成していたことが問題となっております。該当している場合には、早急にリンクを貼り替えるようにとの公式アナウンスです。 …[続きを読む]

WordPressのSearch Regexプラグインで記事の文字列を一括置換する

 今まで書いてきた複数の記事にある同じ文字列を一括で置換したいときがあると思います。たくさん記事を投稿しているような場合、ひとつひとつを手作業で置き換えていくのは実に作業効率が悪いです。そんなときは一括で文字列置換を行ってくれる Search Regex プラグインが便利です。 …[続きを読む]

inline-blockの横並びで隙間が空いちゃう問題

 グローバルナビゲーションや SNS ボタン、ページネーションを実現する場合、div や li といった要素を横に並べることになります。このとき、float や inline-block を使うことになるのですが、inline-block を使って横並べにする場合には、ひとつ注意しなければならないことがあります。 …[続きを読む]

floatの解除は忘れずに

 最近のブログではお馴染みのグローバルナビゲーションやページネーション、SNS ボタンなどは要素を横に並べるで実現されますが、要素を横並べにする方法として float はよく使われてきました。最近では inline-block や table-cell などが主流になりつつあるようですが、まだまだ float を使っているホームページはたくさんあります。 …[続きを読む]

floatで横並べにしたものを中央に配置したい

 リストなどのブロック要素を横並びにするには float や inline-block を使うと思いますが、これら横並びにしたものをまとめて中央に配置したいことがあると思います。幅が決まっている場合にはそれほど難しくないのですが、ページネーションのような記事数によって横幅が変化するものの場合、結構難易度が上がります。 …[続きを読む]

inline-blockで要素を横並びにする

 HTML において、ブロック要素は縦に並ぶという性質を持っています。これはブロック要素が文書構造においてひとつの塊や段落として扱われるため、前後に改行が挿入されるためです。これを横並べにしたければ、本来であればインライン要素に分類されるタグに変更するのが筋だと思うのですが、WordPress や各種ブログサービスでは出力されるタグが固定されているため、ブロック要素を横並べにしなければならない場面もあるかもしれません。 …[続きを読む]

vertical-alignとtext-alignは違うのだよ

 vertical-align の使い方がよくわからなかったので調べてみました。text-align と名前が似ているので同じように使えるものだと思っていたのですが、かなり別物だったので忘れないようにまとめておきます。 …[続きを読む]

絶対パスと相対パスとルート相対パス

 スタイルシートで背景画像を指定する場合、background-image などで画像の URL を指定する必要がありますが、URL を指定するには絶対パス、相対パス、ルート相対パスの3つの方法があります。今回はこれらの違いについて調べたものをまとめてみました。 …[続きを読む]

ブログで背景画像を使うには

 WordPress のサイドバーのドロップダウンをお洒落にカスタマイズするため背景画像について調べていたのですが、background-image などの使い方をよく知らなかったのでまとめてみました。 …[続きを読む]

WordPressで画像を中央揃えにするには

 文章に説得力をもたせたり記事の彩りとしてブログの文章に画像や写真を挿入することは欠かせません。WordPress では「投稿の編集」画面から「メディアを挿入」ダイアログを利用して画像を貼り付けますが、スタイルシートでどのように指定すればよいのかを解説したいと思います。 …[続きを読む]

Amazonアソシエイトにサイトを追加で申請する方法

 この記事はすでにアマゾンアフィリエイトをやっていて、さらに新しいサイトにもアマゾンアフィリエイトを貼り付けたいという人に向けたものです。Google アドセンスが一度審査に通ればほかの Web サイトにも広告を貼れるのに対して、アマゾンはサイト毎に追加申請が必要になります。Google と同じノリでいると最悪の場合にはアカウントの停止もありえるので、申請し忘れることのないように注意してください。 …[続きを読む]

divにtext-alignは効かないよ?

 SNS ボタンやページネーションなどのブログカスタマイズに関係する要素を中央揃えにする場合、text-align:center; を指定しても効かないといった話をよく聞きます。最悪、マージンやパッディングをがんばって設定すればそれらしくなりますが、もっとスマートな方法で解決したいですよね。今回はこの解決方法と、簡単な text-align に関する解説をしたいと思います。 …[続きを読む]

Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP