スマホ版 Chrome のヘッダー部分に色をつけるには meta タグを仕掛ければ良い

スマホ版 Chrome のヘッダー部分に色をつけるには meta タグを仕掛ければ良い

2016/02/12 HTML・CSS

スマートフォンでネットサーフィンをしていると、サイトによってアドレスバーの部分が彩色されているページがあることに気付くでしょう。通常はグレーですが、青やらオレンジやら、ページによっ...

WordPress の投稿記事一覧をデータベースから取得してファイルに出力する方法

WordPress の投稿記事一覧をデータベースから取得してファイルに出力する方法

2016/02/02 WordPress

WordPress の投稿記事リストの一覧をデータ抽出するために、SQL を発行してこれらの項目を出力した一覧を取得します。 ID 公開日 最終更新日 記事 URL...

CSS で画像を丸く切り取って表示する方法

CSS で画像を丸く切り取って表示する方法

2016/01/29 HTML・CSS

Twitter や Facebook など SNS のプロフィールアイコンで、画像が丸く切り抜かれているのをよく見かけます。これは画像が編集されたものではなく、画面表示時に CSS...

Lazy Load と Edge の相性が良くないので遅延読込みを対象外にした

Lazy Load と Edge の相性が良くないので遅延読込みを対象外にした

2016/01/28 WordPress

Windows 10 の利用ユーザーが増え、それに比例するように Micorosoft Edge を利用するユーザーも増えてきました。当ブログのアクセス解析を見ても2%程度ではある...

【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説!

【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説!

2016/01/27 HTML・CSS

CSS のコードをシンプルかつ明瞭な構成にするために、隣接セレクタ・直下セレクタ・間接セレクタの利用は欠かせません。 絶対的に必要なものではありませんが、内容を理解すればとて...

jQuery で右クリックのイベントを禁止する方法

jQuery で右クリックのイベントを禁止する方法

2016/01/27 基本

Web ページで右クリックのコンテキストメニューを表示させたくない理由は様々です。 戻る、進むを禁止する 再読み込みを禁止する 画像の保存を禁止する ソースコードの...

【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索!クリック1つでコードをコピー【アイコン一覧】

【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索!クリック1つでコードをコピー【アイコン一覧】

2016/01/20 HTML・CSS

Font Awesome はアイコンをフォントで表現できる便利なツールです。このサイトでも、各種アイコンは画像ファイルでなく Font Awesome を利用しています。CDN で...

iframe からのアクセスを拒否する .htaccess の設定方法

iframe からのアクセスを拒否する .htaccess の設定方法

2016/01/19 サイト運営

ヘッダー部分に自身のサイトの情報と広告が掲載され、下部に iframe にて当サイトが表示されている海外のサイトのページを見つけてしまいました。 直接的な被害はないものの、こ...

フィード(RSS)アイコンを HTML と CSS だけで実装する方法

フィード(RSS)アイコンを HTML と CSS だけで実装する方法

2016/01/19 HTML・CSS

形状が単純なものであれば、画像を用意しなくても HTML と CSS で実装することができます。以前、三本線のメニューアイコン、通称ハンバーガーメニューを CSS で実装しました。...

メニューの三本線アイコンを HTML と CSS だけで実装する方法

メニューの三本線アイコンを HTML と CSS だけで実装する方法

2016/01/18 HTML・CSS

スマホで Web ページを見ていると、画面の上によくある3本線のアイコン。その見た目から通称「ハンバーガーメニュー」と呼ばれ、メニュー表示のアイコンとして用いられます。 今回...

入力した数値を JavaScript で自動的に3桁カンマ区切りにして表示する方法!全角入力を許容する拡張機能も実装!

入力した数値を JavaScript で自動的に3桁カンマ区切りにして表示する方法!全角入力を許容する拡張機能も実装!

2016/01/13 JavaScript

数字項目、特に金額の入力項目においては、打ち込んだ数字の桁が間違っていないか確認する上で、3桁のカンマ区切りで表示されていることが重要視されます。 テキストボックス上で3桁カ...

小さい画像ファイルを base 64 変換してソースコードへ直接貼り付けるテクニック

小さい画像ファイルを base 64 変換してソースコードへ直接貼り付けるテクニック

2016/01/13 HTML・CSS

Web 上に画像を出力するためには、画像データが必要です。しかし画像ファイルだけでなく、次のように画像の内容をコード値で表現することで、ファイルが存在しなくても画像を出力することが...

.htaccess で別ドメインから画像やスクリプトファイルへの直リンク禁止する方法

.htaccess で別ドメインから画像やスクリプトファイルへの直リンク禁止する方法

2016/01/12 サイト運営

アクセス解析を見ていると、思いもよらないファイルに直リンクされている時があります。 画像の載せ方がわからずソースをそのままコピーしてしまった、悪気のない直リンクであると願いた...

さくらインターネットサーバーで Index of を表示させないようにする方法

さくらインターネットサーバーで Index of を表示させないようにする方法

レンタルサーバーのさくらインターネットサーバーでは、ドメインのルートのアドレスへアクセスすると、次のように Index of が表示され、ファイルの一覧が丸見えになってしまいます。...

CSS で HTML 内の画像やテキストを中央寄せにする方法

CSS で HTML 内の画像やテキストを中央寄せにする方法

2015/12/24 HTML・CSS

CSS の左右中央寄せ・上下中央寄せにはいくつか実装方法がありますが、根本的な考え方は大きく分けて2つになります。 外側のブロック要素にスタイルを設定して、内側の要素を中...

ロリポップからエックスサーバーへドメインごと移行する方法

ロリポップからエックスサーバーへドメインごと移行する方法

先日ロリポップからエックスサーバーへレンタルサーバーを変更したことをお伝えしましたが、今回は具体的な手順を説明していきます。 手順は次の通りです。前提としてWordP...

ムームードメインからエックスサーバーへドメイン移管する方法!独自ドメイン永年無料特典を利用する場合

ムームードメインからエックスサーバーへドメイン移管する方法!独自ドメイン永年無料特典を利用する場合

Xserver を契約すると、独自ドメインの更新料がずっと0円になる永年無料特典が受けられます。 この特典は、エックスサーバーを契約し続ける限りドメイン代が無料 になるサービ...

レンタルサーバーをロリポップから Xserver へ変更を決めた理由

レンタルサーバーをロリポップから Xserver へ変更を決めた理由

ロリポップのスタンダードプランからの移行先を検討し、Xserver スタンダード (X10) プランのお試し期間を利用してしばらく使ってみました。その結果、正式にエックスサーバーへ...

CMYK RGB色空間 HSL色空間 HSV色空間 16進数カラーコードの変換ツール

CMYK RGB色空間 HSL色空間 HSV色空間 16進数カラーコードの変換ツール

2015/12/14 サイト運営

このツールでは以下「色に関するコード値」の相互変換を行います。 16進数カラーコード : CSS で利用される #FF9900 等 RGB : R レッド、G グリーン...

CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話

CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話

2015/12/14 HTML・CSS

文章の一部を強調表示をするために、Webllica では蛍光ペン風マーカーの CSS を設定しています。実際にそのスタイルを反映させると次のような表示になります。 蛍光ペン風...

このブログの運営者

NJ

元システムエンジニア。個人事業主として独立して Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりしています。