ツール

「Google Search Console」と「Google Analytics」へのサイトの追加

WEBサイトの運営には欠かせない「Google Search Console」と「Google Analytics」。 WEBサイトを開設したらすぐに導入する人がほとんどだと思います。 サイトの運営に…

ツール

Gulpの導入と初歩的な使い方

コーディングをしていると決まって行う作業があります。 例えば ベンダープレフィックスを付ける scssをcssにコンパイルする 画像を圧縮する などです。 このようなコーディングをする上で必ず発生する…

PHP

PHPで作る初歩的なアクセスカンター

今から10年くらい前。 WEBサイトを訪問すると良く見かけるものがありました。 その、よく見かけていたものとは「アクセスカウンター」です。 アクセスカウンターとはサイトにアクセスがあるごとに訪問者数の…

JavaScript

簡単なローディング画面の作り方

情報量の多いページにアクセスした場合、画面の表示に時間がかかることがあります。 そんな時によく見かけるのが「ローディング画面」です。 画像等の読み込みに時間がかかっているときに、真っ白の画面を見せるの…

ツール

「Code Pen」の基本的な使い方

ブログでHTMLやCSSについて書く場合。 コードだけをただ書くよりも、実行結果も確認できた方がとてもわかりやすくなります。 このような場合、別のページにデモページを作成してリンクを貼って実行結果を確…

JavaScript

左から右にゆっくりと文字を表示させる

WEBサイトを見ているとメインビジュアルなどの部分で、サイト名やキャッチフレーズなどが左から右へ1文字ずつ時間差で表示されるのを見たことがありませんか? このように左から右へゆっくりと文字を表示したい…

HTML&CSS

CSSで作るドロップダウンメニュー

WEBサイトにを見ているとグローバルナビゲーションにマウスカーソルを乗せるとニューっとサブメニューが現れる「ドロップダウンメニュー」というのを見かけることがあります。 ドロップダウンメニューを一見する…

WordPress

不要なサイズの画像を自動で作らせない方法

WordPressに画像をアップロードした場合。 アップロードした画像だけではなく、アップロードした画像を元にサイズの異なる画像が複数作成されます。 例えば僕の環境の場合、1枚の画像をアップロードする…

HTML&CSS

埋め込んだ動画が再生されない原因と解決策

先日、動画ファイルをWEBサイトに埋め込む作業をしていました。 最近ではWEBサイトに動画を表示させる場合は、まずYouTubeに動画をアップロードしてYouTubeからその動画を読み込む形式が多いで…

HTML&CSS

CSSでボタンをキラッとさせる

WEBサイトには「ボタン」がつきものです。 別のページに移動するためのボタンやメッセージを送信するためのボタンなど、どんなWEBサイトでもたいてい1つか2つのボタンが設置されています。 ボタンはただ置…