Webエンジニアのブログ

JavaScriptを簡易的に記述できるjQueryでは、便利なメソッドがいろいろ用意されており、手軽にWebページに動きを加えることができます。ただ、Webデザインでよくある複数の画像を切り替えて表示するスライドショーは、jQueryのプ...
続きを読む>>

WordPressのテーマ開発でよく利用するget_template_part()は、利用中のテーマのテンプレートファイルを呼び出す時に使う関数です。ただ、子テーマで利用していく際は少し注意が必要です。 get_template_part(...
続きを読む>>

CSSのレイアウト構築で便利なFlexbox。とくに横並びのレイアウトではよく利用され、横並びになった要素同士も高さが揃ってくれます。 しかし、コンテンツの量の違いで、横並びの要素とコンテンツの高さと見た目が揃わないこともあります。Webデ...
続きを読む>>

WebサイトとYouTubeを連携して、WebページにYouTube動画を埋め込んでコンテンツを作っていくことがありますが、そのままの埋め込みのデザインでWebページに載せていってもいいですが、ご自身のWebデザインに合わせて、動画のサムネ...
続きを読む>>

レスポンシブWebデザインで、背景色を敷いた要素とテキストの重なり具合においては、リキッドデザインのようにWebブラウザの幅に合わせて可変する場合には、要素同士の重なり具合に合わせてデザインを調整していくことも出てきます。また、画像の上に重...
続きを読む>>

Webで利用していく画像形式は様々で、JPEGやPNG、GIFのほか、昨今では非可逆圧縮で軽量化され、画像の透過やアニメーションに対応している、WebP形式の画像の利用が進んでいます。 HTMLのマークアップでは、picture要素とsou...
続きを読む>>

Googleアナリティクス4からは、Webページに埋め込んだYouTube動画の再生回数や総再生時間などが計測できるようになり、よりユーザーの行動を把握することができるようになりました。 動画のイベントについては、自動で計測されるようですが...
続きを読む>>

Googleアナリティクスは、Webサイトを訪問したユーザーの行動を分析することができる便利なアクセス解析ツールとして、多くの方が利用さてれいます。 これからも多く利用されるGoogleアナリティクスも、2020年10月には最新バージョンと...
続きを読む>>

WordPressは世界的に人気のあるCMSとして、Web制作の現場で広く使われていますが、少しだけHTMLやCSSを理解していたり、PHPスクリプトが書けるという方は、ご自身でデザインをカスタマイズしていくことでしょう。 WordPres...
続きを読む>>

CSSファイルや、JavaScriptを記述して読み込んでいる外部ファイル（JSファイル）は、半角スペースや改行、コメントなど、無駄を省くことでファイルサイズを軽くすることができます。ファイルを圧縮・軽量化（Minify）することで、ファイ...
続きを読む>>