[JS]jQueryでページスクロールしてもナビゲーションを固定させる方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
ページを下までスクロールしてもサイドメニューに広告が固定されたまま、なんてブログをよく目にしますが、このような動きはjQuery を利用することで実装可能です。 バナー広告以外にもメニューボタンやSNSボタン、ページの先頭へ戻るなどのリンクを設置できるなど、色々と応用しやすいカスタマイズです。 Javascript のサンプル jquery ファイルと一緒に、<head> 内に以下のjavascript のコードを記述します。 <script src="./jquery.min.js"></script> <script> $(function($) { var tab = $('.nav'), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab
![[JS]jQueryでページスクロールしてもナビゲーションを固定させる方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
スクロール位置によってサイドバーを固定/解除させる jQuery実装方法
2012年の始めに【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法という記事を書きました。この記事で書いたのは、ヘッダーバーとフッターバーを対象にスクロール位置による要素を固定/解除する方法でした。当時はまだサイドバーを固定させるUIというのは主流ではありませんでしたが、昨年の後半から今年にかけていろんな所で見るようになってきました。 先日、1年前の記事でサイドバーを固定/解除させる方法についての質問もいただきましたので、その実装方法についてまとめてみたいと思います。このブログでも「サイドバーを固定/解除させている」ので、このブログを例に説明していきます。 ポイントは、以下の3つの値をどう取得するかということになります。この値さえ取得できてしまえば、あとはその値によってサイドバーを固定/解除するような命令を与るだけとなります。 スクロールトップの位置を
WordPress｜アイキャッチ画像（サムネイル）を新着記事一覧に表示する方法
WordPress（ワードプレス）のバージョン3.xから”アイキャッチ画像”という機能が追加されました。 ”アイキャッチ”というネーミングは「愛を取る」という意味合いではなく（ある意味近いか？）、「ユーザーの目を惹く」という意味で、記事ひとつひとつの印象付けの為のサムネイル画像を表示させる機能です。 アイキャッチ画像を記事に設定（登録）しておけば、記事に関連するページのサムネイルやヘッダー画像としても利用が可能です。 ここではホームページのトップページやサイドバー（最新の投稿）などに表示するアイキャッチ画像付き記事一覧（エントリータイトルリスト）の表示方法を綴ります。カスタムフィールドやプラグインを使うことなく実装できますし、ポータルサイトなどにも使え、簡単シンプルかつ凄く使えるソースだと確信致します（笑） ブックマークなどをしていただき辞書的にいつでも振り返り活用していただければと思いま
【WordPress】サイドバーにサムネイル付き最新記事一覧を追加
サイドバーの最新記事一覧がテキストだけでも全然構わないんですが、デザインによっては画像が無いと寂しい場合もありますよね。 当サイトではアイキャッチ画像（↑タイトルに被っているこの画像）をそのまま最新記事及びランダム記事一覧のサムネイル画像に自動で転用しています。例によってプラグインは使っていないところがミソですね。 まだアイキャッチを利用されていない方はこちらをご覧ください。 ⇒ 【WordPress】アイキャッチ画像を自動で切り抜き・リサイズ はじめに アイキャッチ画像を使用していることが前提です。 管理画面の「ウィジェット」は使いません。ファイルを直で編集します。 リストアップする件数は任意で設定可能です。 サムネイルのサイズは任意で設定可能です。 1.functions.phpにコードを追加 テーマファイルのディレクトリ直下にあるfunctions.phpまたはそれに相当するファイル
高速化にも！オリジナルテーマ ウィジェットを使わないサイドバーの作り方 [WordPress Customize NOTE]
当サイトでは、サイドバーの作り方を2つ紹介します。今回はウィジェットを使わない作り方です。 ウィジェットを使用した方が手軽にサイドバーを作れます。ですが、今回の方法だと、ある程度HTMLタグを自分で好きなようにできるので、ソースも比較的簡潔にすみ、SEO・デザイン性がよくなりやすいと思います。また、高速化にも期待できます。編集の手軽さにこだわらない方にはおすすめです。 今回紹介するウィジェットを使用せずに利用できるサイドバーの機能は以下です。フリースペース・RSS・メタ情報等は、HTML同様に記述することで代用できます。 カテゴリー 最近の投稿 月別アーカイブ カレンダー タグクラウド 検索フォーム 好きなものを組み合わせ、「sidebar.php」に記述します。 カテゴリーは、以下のテンプレートタグで出力できます。 Pick up <?php wp_list_categories();
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールしても固定されて追尾するサイドバー
