WPテーマTwenty Seventeenでヘッダーにキャプションを追加する方法

今回はワードプレステーマ「Twenty Seventeen」でヘッダー画像上にキャプションを追加する方法について解説したいと思います。 「Twenty Seventeen」は1ページ構成のサイトを作成するのに大変重宝する …

コピペで使える!CSSで大きさが変わるアニメーションボタンサンプル

概要 タイトルの通り、今回はHTML・CSSだけで大きさが変わるアニメーションボタンを作成してみたいと思います。 まずは以下サンプルの動作をご確認ください。   お申し込みはこちら   ランディングペ …

コピペで使える!レスポンシブデザインでいい感じにテキストの改行位置を調整する方法

概要 今回は、レスポンシブデザインでテキストの改行位置を調整する実装方法について紹介したいと思います。 横幅が固定されているPC専用デザインの場合は、指定のフォントサイズであれば改行位置というのも概ね決まってくるため、& …

コピペで使える!超シンプルなJavascript画像切り替えスクリプトサンプル

はじめに 大きな画像の下に、小さなサムネイル画像のリストがあり、サムネイル画像のマウスを乗せると大きな画像がそのサムネイル画像に切り替わる。 ショッピングサイトなんかでよく見る仕様です。 省スペースで多くの商品画像を見せ …

コピペで使える!Googleアナリティクスのイベントトラッキング設定方法

  イベントトラッキングとは Googleアナリティクスのイベントトラッキング機能は、主にリンクやボタンをクリックした回数を計測できる機能です。 Googleアナリティクスは、アナリティクスコードが設置された同 …

コピペで使う!スマホ対応のCSSリストデザイン

格好良く見せようとすると意外と難しいCSSリストデザイン。今回は、「シンプル」「機能的」「オシャレ」の3条件を満たすCSSリストデザインに挑戦してみたいと思います。 ul liのタグを使ったデザインは、結構素っ気ない感じ …

コピペで使う!画像アップロード付きAjax(JQuery)フォームサンプル

はじめに 今回は、Ajaxを利用した画像アップロード機能付きフォームのサンプルを作成します。 画像ファイルをアップロードするだけのサンプルは複数見つかったのですが、画像ファイル以外のテキスト情報も一緒に取り扱っているサン …

コピペで使う!HTML5/CSS3の基本テンプレート

ウェブサイトのコーディングを行うとき、ひな形となるテンプレートを毎回探していませんか? 作る度に異なるテンプレートを適用して、「これでほんとにいいのかな?」「古いHTMLの記述が残っているのでは?」と不安を覚えながらもコ …