にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/10/16. 17:35:40.

最初は冒頭だけを見せる「続きを読む」ボタンの作成方法

その場で展開できる「続きを読む」ボタンの作り方最初はコンテンツの冒頭だけを見せておき、後続のコンテンツは「続きを読む」ボタンをクリックすることで閲覧可能になるUI(ユーザ・インターフェイス)をよく見かけます。
「続きを読む」ボタンをクリックすると別ページへ飛ばされる仕様もよくありますが、その場で(ページ移動することなく)後続コンテンツが見える場合もあります。
動作は以下のような感じです。

  • ウェブページを表示した際、最初は「コンテンツの冒頭部分」だけが表示されている。(後続のコンテンツは折りたたまれて非表示状態になっている。)
  • 閲覧者が「続きを読む」ボタンを押すと、ボタンが消え、その代わりに後続コンテンツがどばーっと表示される。

上記のような動作をする「続きを読む」ボタン機能の作成方法を、All Aboutで解説してみました。

その場で展開できる「続きを読む」ボタンの作り方(@All About ホームページ作成)

HTML+CSS+JavaScriptで作成するんですが、「一瞬で後続コンテンツを表示するJavaScript版」と、「スライドダウンするアニメーション効果を伴って後続コンテンツを表示するjQuery版」の2通りを紹介してみました。
また、CSS3のグラデーション機能(linear-gradient)を使って、徐々に後続コンテンツを薄くして見せる表示効果を作る方法も併せて解説しています。

ほとんどコピー&ペーストで使えます。(書き換える必要があるのは、ボタンやボックスに指定するid名などの属性値だけです。)
「続きを読む」ボタンは1ページ中に何個でも掲載できる仕様にしてありますが、1個だけしか掲載しないなら、何も書き換える必要なくコピー&ペーストだけで使えます。
ぜひ、試してみて下さい。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---