HTML&CSS

モバイルでoverflow-xが効かない時の対策

先日、コンテンツの背景色が画面幅からはみ出すようなデザインを作っていました。 背景色が画面の幅からはみ出しているので、当然そのままだと横スクロールが発生します。 そこでbody要素に「overflow…

WordPress

PubSubHubbubでリクエストのし忘れを防ごう

インターネットの世界ではGooglebotというクローラーが常にWEBサイトを巡回しています。 Googlebotは新たなWEBページを見つけると、そのWEBページをインデックス(データベースに登録す…

WordPress

jQueryをhead要素内ではなくbody閉じタグの前で読み込ませる

PageSpeed InsightsでWEBサイトの表示速度を計測すると、測定結果の改善項目に レンダリングを妨げるリソースの除外 という改善項目を目にする事が多いと思います。 詳細を見てみると he…

HTML&CSS

オリジナルのSNSシェアボタンなどを設置する

最近のWEBサイトではSNSボタンがあるのがほぼ当たり前の状況になっています。 記事を見てくれた人がSNSボタンを押してくれれば、記事がシェアされ記事の閲覧者を増えてくれる可能性があります。 それぞれ…

ツール

WordPressのローカル環境が超絶簡単に作れるLocal by Flywheel!

WordPressの学習やオリジナルテーマの作成には、WordPressのローカル環境が必要になります。 WordPressのローカル環境の作成には、WindowsのPCであればXAMPPを使うことが…

WordPress

画像の遅延読み込みは「Lazy Load – Optimize Images」が簡単です

WEBサイトを運営している人なら誰でも一度はPageSpeed Insightsを利用してWEBサイトの表示速度を計測したことがあると思います。 PageSpeed Insightsを利用すると、モバ…

WordPress

EWWW Image Optimizerで画像を最適化しよう

ブログには画像がつきものです。 文章だけで説明するよりも画像を使いながら説明した方が読んでいる人にも伝わりやすくなります。 画像をブログにアップロードするうえで気を付けたいのがファイルのサイズ。 ファ…

WordPress

WordPressでjQueryのコードを書く場合に気を付けること

WordPressでjQueryのコードを書く場合。 気を付けなければならないことがあります。 それは 書き出しのおまじないに「$」が使えない ということです。 jQueryの$について jQuery…

HTML&CSS

要素をスクロールに追随させたいならsticky!

画面のスクロールに合わせて特定の要素が追随してくるようなWEBサイトを見たことがありませんか? ヘッダー部分がページの先頭から終わりのスクロールまでずっと付いてくるというような追随の仕方ではなく、スク…

HTML&CSS

【簡単】タブメニューを作ろう

WEBサイトを見ていると、タブメニューをよく見かけます。 タブメニューを使うと、クリックしたタブに合わせたコンテンツが表示され、それ以外のコンテンツはサッと隠れます。 選択したものだけ表示されるので、…