楽天アフィリエイトの商品リンクをスマホ対応・レスポンシブ化するCSS
- 公開日：
楽天アフィリエイトの商品リンクを「画像＋テキスト」形式で、そのままコピー＆ペーストして貼り付けるとスマホから閲覧した際に画面からはみ出てしまうことがあります。 今回、この「画像＋テキスト」の楽天アフィリエイトのリンクを、 […]
「CSS・Javascript」の記事一覧
画像なしで実装できる！手紙・ノート風の罫線デザインのCSS
- 更新日：
- 公開日：
LP（ランディングページ）やSP（セールスページ）では、お客様の声や制作者からのメッセージを“手紙風”にデザインしたものを目にする機会があります。 追伸 猫は言葉を話せません。だからこそ「一口ごとの表情」や「残さず食べて […]
floatレイアウト対応！サイドバーの画像などを固定（追従）させる方法
- 更新日：
- 公開日：
Webサイトをスクロールした際に、サイドバーの一部が途中から追従（追尾）して固定表示される動きは、２カラムレイアウトのサイトでよく使われます。 そして、多くのワードプレステーマ（SWELLやTHOR）などでは、この「追尾 […]
画像にスポットライト（照明）が当たっているように見えるCSS
- 更新日：
- 公開日：
LP（ランディングページ）やSP（セールスページ）などで、特定の要素に注目を集めたいときには、下記のようなスポットライト風の演出が効果的かもしれません。 今回、試行錯誤しながら、画像とCSSでアニメーション効果を作成した […]
DSEGフォントで7セグ風デザインをWebサイトに実装する手順
- 更新日：
- 公開日：
LEDやデジタル時計などに使われている「デジタル数字（正式名称は？）」のフォントを、ワードプレス（WordPress）で使用してみました。 0123456789 使用したのは「DSEG（でぃーせぐ）」というフォントで、商 […]
期間限定で右下にポップアップを表示する方法【HTML＋CSS＋JavaScript】
- 更新日：
- 公開日：
Amazonや楽天のセール期間の告知、メルマガの登録案内など、訪問者に優先的に伝えたい情報がある場合があると思います。 そういった時に便利なのが、以下の様な右下に表示されているポップアップ（ワイプ広告）です。 このような […]
導入企業のロゴなどをスライド表示！画像を無限ループさせるCSS
- 公開日：
企業サイトやランディングページ（LP）などで、導入企業のロゴや社名が横にスライドして表示されているのを見かけたことはありませんか？ たとえば、こんな感じです 。 今回は、そのような「会社名やロゴ画像をスライドで表示する仕 […]
“お客様の声”や“導入事例”をスライダーで魅せる！Slick Sliderの使い方
- 更新日：
- 公開日：
企業のホームページやLP（ランディングページ）などで、「お客様の声（導入事例）」を掲載しているのをよく見ます。 ただ、声の数や導入事例が多い場合は、１つずつ並べていくとページが縦に長くなってしまいます。 そういった時は、 […]
ワードプレスでも使用可能！縦線のないテーブル（表）のCSS
- 更新日：
- 公開日：
このサイトは、ワードプレステーマの賢威（けんい）を使って作成しています。 一応、賢威にはいくつかのテーブルデザインがあるのですが、その中に自分が欲しいデザインがなかったので、下記のテーブルを自作しました。 縦線のない表（ […]
補足説明をする際に最適！HTML・CSS・JSでツールチップを作ってみた
- 更新日：
- 公開日：
Webサイトやブログで、「この用語って何？」とユーザーが疑問に思いそうな専門用語や略語を記載しなければいけないこともあると思います。 かといって、その都度注釈や脚注を入れてしまうと、文章の流れが損なわれてしまい読みにくく […]