記事情報だけが欲しいのに、サイドバーやヘッダー・フッターなどのデータも毎回読み込むから表示も遅い。 そこで本稿で紹介したいのは「Infinite Scroll」です。 これを実装すれば、ページ遷移せずに過去の記事を読み込むことが出来るので、過去の記事をサクサクっと呼び出せるようになります。 コードも短く、JavaScriptが苦手な人でもカンタンに実装できるので初心者にもオススメです。 デモページはこちら Infinite Scrollのデモページ アーカイブページのHTML要素を確認 archive.php、category.php、taxonomy.phpなど、記事の一覧を表示するテンプレートファイルを編集します。 必要に応じて、実装したいページに同じ変更を加えてください。 念の為、ファイルをコピーして「category_backup.php」など名前を変えてバックアップしてくださいね

wordpressを使用した、ブログ等のカスタマイズで記事詳細ページで同じタグが付いた記事を呼びたい時のメモ。 wordpress見ている記事（シングルページ）に同一タグの記事を呼び出す <?php $original_post = $post; $tags = wp_get_post_tags($post->ID); $tagIDs = array(); if ($tags) { $tagcount = count($tags); for ($i = 0; $i < $tagcount; $i++) { $tagIDs[$i] = $tags[$i]->term_id; } $args=array( 'tag__in' => $tagIDs, 'post__not_in' => array($post->ID), 'showposts'=>4, 'ignore_sticky_posts'

2013/07/03 タグ: ユーザビリティ, 中級 Wikiをはじめ、記事の先頭にリストの目次（インデックス）をつけているサイトを目にしたことがあると思います。 記事の内容がざっと理解でき、さらにクリックすることでスクロール移動できます。 訪問者にはとても優しい構成ですね。 ただし、このリストの目次は手作業で行うとかなり面倒です。 ユーザービリティの向上につながるとはいえ、投稿時に手間が掛かってはいただけません。 このサイトでも実装していますが、WordPressの場合は「Table of Contents Plus」などのプラグインで機能追加することができます。 今回はjQueryを使って、自前で実装してみたいと思います。 jQueryの確認 前提としてjQueryがロードされている必要があります。ソースのヘッダ内で下記のようにjQuery.jsが出力されているか確認してください。 <

普通に設置する場合 普通のテキストリンクとして設置する場合には以下のコードを使用します。CSSは適宜調整して下さい。 ※FacebookやGoogle+はogp設定をしていないと正しくシェアできません。opg設定については下記参考サイトが分かりやすいです。 facebook いいねボタン設置時のOGP設定方法♪ ｜ フリーランスWebデザイナーの仕事 Twitter ツイートボタン <a href="http://twitter.com/share?url=共有したいＵＲＬ&text=ツイート内に含める文字&via=ツイート内に含まれるユーザー名&related=関連アカウント">ツイート</a> Facebook シェアボタン <a href="http://www.facebook.com/share.php?u=共有したいＵＲＬ" onclick="window.open(this.

ワンポイントに使えるCSS3マウスオーバーアニメーション5種 ちょっとしたワンポイントに使えそうなCSS3オンリーのマウスオーバーアニメーションです。 IEは10以上で動きます。 投稿日2013年10月30日 更新日2013年10月30日 ベースHTML ベースのHTMLです。っていっても基本aタグだけです。 html <a href="#" class="btn01">BUTTON</a> 1.くるくるって回るアニメーション くるくるっと２回転するアニメです。 くるっと１回転の場合は「rotate」を360にすればOKです。 css .btn01 { color: #fff; text-decoration: none; background-color: #dda0dd; display: block; width: 150px; height: 150px; line-height:

デモページ HTML <div id="btn"><a href="javascript:void(0);">button</a></div> CSS #btn { display: table; margin: 0 auto; width: 100px; height: 100px; } #btn a { position: relative; display: table-cell; color: #52d3ff; font-weight: bold; text-decoration: none; text-align: center; vertical-align: middle; } #btn a:after { position: absolute; left: 0; top: 0; border-radius: 50%; border: 5px solid #52d3ff; b

2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top

そうか、こんなスクリプトでもいいのかと気づいた時は、驚いたり感動したりするのですが、今回のスクリプトもそんな一つ。リンクのクリック領域を親要素全体に適応する方法なのですが、「そうか、こんな考え方もできるのか！」なんて思ってしまったスクリプトです。 ネタ元：Useful and Handy jQuery Tips and Tricks 今回使うHTML <ul> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul> 単純にliをCSSでブロックに見せて作ったサンプルです。 同じウィンドウ内に開く ■スクリプト $("div#test1 li").click(function(){ window.location=$(this).find("a").attr("h

One of the fundamental things in web design in reference to usability is navigation. Navigation menus are important to help the user find the information that he or she seeks. Use of colors, highlights and mouse-over effects will facilitate detection of the items that are being searched. The use of icons beside menu items is a fantastic alternative that favors a quick visual option identification;

（”追記”書きました。） 下にスクロールすると横にtopへ戻るボタンを表示させるjQueryのコードのチュートリアルが公開されていましたのでメモ。 チュートリアルページ→webdesignerwall チュートリアルdemo→demo 上記のページに設置方法も詳しくのっています。デモコードと画像のダウンロードもできます。 チュートリアルページに公開されているCSSのコードとjQueryのコードをヘッド内で読み込み、 下記の例のように、body内のスクロールさせたい要素に”back-top”とidをふり空のspanを入れます。 <p id="back-top"> <a href="#top"><span></span>Back to Top</a> </p> このspanの部分がスクロールボタンになります。 CSSをいじればスクロールボタンの位置やデザインなど変更できます。 ↓↓Demoを作

jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

よくリンクにアイコンを付けることってありますよね？アレをリンク先のfaviconを自動で表示させることってできればって思ったことってないっすか？ そんなWEB屋なら一度は（？）考えたことのあるfaviconのアイコン化がこんな感じで実装できることをつい先日知ることになり、びっくり感動してしまったので是非ご紹介させて頂ければこれ幸いです！ 元記事はこちら！ Favicons Next To External Links | CSS-Tricks これ実装すると、つまり下のような感じになるわけっすね！ これ、何をしてるのか気になって見てみたら、そもそもgetFaviconっていうサービスがあるらしいことをしりました。これはリンク先のURLをパラメーターとして渡すと、リンク先の<link>情報みて、faviconのURL引っ張ってくるって仕組みらしいですね。 http://g.etfv.co/h