コピペで使える!アフィリエイトバナーをPCとスマホで表示分けする簡単な方法

アフィリエイトサイトを作って広告バナーを掲載する際、PCとスマートフォンで表示するバナー画像を分けたいと思ったことはないでしょうか? PCでは横長の画像を設置したいけどスマートフォン表示になると見切れてしまう・・・、でも …

コピペで使える!CSSでテキストにマーカー(テキストと重なる下線)を引く方法

記事中のテキストに以下のようなマーカーで線を引いたような下線をひきたいと思ったことはないでしょうか? 今ならポイント10倍 線がテキストの後ろに回りこむような形の表現がいいですよね。 下線と言えば、text-decara …

コピペで使える!スクロールでフェードインさせる使いまわし可能なJQuery実装サンプル

よくページをスクロールするとふわっとコンテンツ(文字や画像)が現れるお洒落な効果を見ると思います。 今回はこの効果を実現するためのJQueryの実装方法について紹介します。 こういった動きのある効果をアニメーション効果と …

JQueryって一体何なの?JQueryのシンプルな理解の仕方

ウェブデザイナーやHTMLコーダーの中には、JQueryと聞くと何やら難しいプログラミングと考えて拒絶反応が出てしまう方も多いかと思います。 一方でプログラマーからすると、何を取り扱っているのかわからない何やら中途半端な …

コピペで使える!JQueryのトップへ戻るボタン実装サンプル

ウェブサイトを見ているとよく右下の方に「トップへ戻る」や上矢印のようなボタンがあって、クリックするとページの一番上まで自動でスクロール(アニメーション)しながら戻るといった機能を見るかと思います。 今回はこの「トップへ戻 …

Bootstrap(ブートストラップ)の有用性と基本的なコーディング方法

Bootstrap(ブートストラップ)とは Bootstrapと聞くと開発者の方は、OS起動時に実行されるプログラムを連想する方も少なくないかと思いますが、今回紹介するのはTwitter社が開発したCSSのフレームワーク …

コピペで使える!YouTube動画埋め込み時にアスペクト比(縦横比)を固定する方法

スマートフォン対応をしているレスポンシブデザインのウェブサイトにおいて、YouTube動画を綺麗に埋め込むというのは実はなかなか難しかったりします。 通常のYouTube動画の埋め込みタグでは、iframeのwidth・ …

WPテーマTwenty Seventeenでヘッダー画像に重ねてキャプションを設置する方法

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

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

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