スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
[Wordpress]各カテゴリと属する記事のサイドバーを変更する方法。 – devolen
カテゴリごとにサイドバーを変えたかったので、簡単な変更方法をメモしておきます。 ワードプレスでサイト構築していて、各カテゴリーとそのカテゴリに属する(スラッグが同じ)投稿記事のサイドバーを、どうしても変更する必要がありました。 なのでその変更方法をシェアがてらモしておきます。 例えば、ブログカテゴリ・ニュースカテゴリ・メニューカテゴリ という3つのカテゴリがあったとします。 その3つのカテゴリのサイドバーを、それぞれのカテゴリ用のサイドバーを読み込むようにします。 さらにその3つのカテゴリに属する投稿記事もそれぞれのサイドバーを読み込むようにします。 実装内容は以下のような感じになります。 ブログカテゴリ・ブログカテゴリのシングル記事 →ブログカテゴリのサイドバーを表示 ニュースカテゴリ・ニュースカテゴリのシングル記事 →ニュースカテゴリのサイドバーを表示 メニューカテゴリ・メニューカテゴ
single.phpに同一カテゴリー記事一覧をナビゲーションとして表示したい。
こんばんは、お世話になります。 タイトルの通り、投稿記事と一緒に同一カテゴリーの記事一覧をサイドバーの様に列挙したいのですが、Wordpress related postsが一番近いことをしてくれるのですが、その記事自体のリンクがサイドバーにないためナビゲーションらしくないのでphpコードをコピペしてみたり、いろいろなプラグインを試したりしましたが、どれも例えば自動挿入時は、レイアウトを保ってもサイドバーに表示させるため、説明通りのコードを貼り付けると表示がなかったりで上手くいきませんでした。 みなさんはＣＭＳ的にワードプレスを使用するとき、どのような方法を取っておられますか？ 以下のコードでは、リンク先はP=4、P=6と変わりますが記事自体が変わりません。 <ul> <?php foreach((get_the_category()) as $cat) { $cat_id = $cat-
サイドバーのカスタマイズ(1) 新着記事、カテゴリー内記事一覧、カテゴリーリスト 初めてのWordPress＆PC
サイドバーのカスタマイズ(1) 新着記事、カテゴリー内記事一覧、カテゴリーリスト Category: 初心者向け WordPress講座 Tags: single.php, テーマ・テンプレート ここでは、サイトの重要なナビゲーションであるサイドバー（sidebar.php）のカスタマイズについて説明しています。 内容は以下の通りです。 § サイドバーのカスタマイズ ウィジェットとマニュアル編集について 共通サイドバーと特化型サイドバーについて sidebar.phpの構成 新着記事の表示 カテゴリー内記事一覧の表示 カテゴリー・リストの表示 ——————————————— 『サイドバーのカスタマイズ(2)を参照』 サイドバー・スペースを使いこなす （ウェルカムメッセージ、タグ・クラウド、コンタクトフォーム、サイドブログなど） 特化型サイドバーの応用 共通アイテムの表示（include構
WordPress の記事一覧に新着マークを表示する「wp_recent_posts_with_newmark プラグイン」
WordPress 3.0 で、最近の記事一覧に新着マークを表示する「wp_recent_posts_with_newmarkプラグイン」を公開します。 このプラグインを適用すると、専用のウィジェットが追加され、投稿記事タイトルの右側に任意の新着表示を行うことができます。新着マークや新着表示時間の変更も可能です。 １．プラグインのダウンロード github のwp_recent_posts_with_newmarkプラグインのページに移動します。 「Download Source」のリンクをクリックして、プラグインアーカイブをダウンロードします。 ２．プラグインのインストール ダウンロードしたプラグインを展開し、中にあるwp_recent_posts_with_newmarkフォルダをwp-content/pluginsディレクトリにアップロードしてください。 プラグインの一覧を開いて「w
jQueryでスクロールしても上に固定されるメニュー｜Webpark
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
