サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Google I/O
web-pc.net
4行でページトップまでスルスルスクロールを実装するjQuery 「ページトップへ」ボタンをクリックするとトップまでスクロールするjQueryをご紹介します。 ひとまずページの上までするスルッとスクロールさせたいんだよって時の選択肢の一つにいかがでしょうか。 説明 下記のJSを使用することで「btn_top」というクラス内のaタグ付きボタンをクリックすると作動します。 JS $(function(){ $(".btn_top").click(function () { $('html,body').animate({ scrollTop: 0 }, 'fast'); return false; }); }); jquery本体と、 上記スクリプトをコピーして「pagetop.js」などというファイルを作成して読み込ませて下さい。 （head内に書く場合は<script type=”text/
アーカイブや投稿一覧を、設定の表示設定にある「表示する最大投稿数」と異なる件数に設定する覚書です。 件数を変更してページ送りが動かないって時にも参考になるかと思います。 capture まず、新着を3件だけ表示するなら、 <?php query_posts( 'category_name=news&posts_per_page=3 ); if (have_posts()) : while (have_posts()) : the_post(); ?> こんな感じでループを回せばいいと思うのですが、 この「query_posts」で呼び出すと、データベースに再度アクセスすることになり負担がかかります。 また、変更したいテンプレート各々に条件変更の記述をしなければなりません。 さらに、一覧ページでページネーションを付ける場合、上手く動作しないってことになりかねません。 ■内容 is_main_
スライダーの上に、扉が開く動作（animate）を付けるjQuery クロスフェードのスライダー上に、扉が開く動きを付けるjQueryです。 オンマウスやクリックで開くタイプではなく、読み込めば開くタイプです。 コードはとても簡単・シンプルですので、使える部分があれば参考にしてみてください。 参照サイト-スライド：最も短いコードで実装出来るイメージスライドショー 参照サイト-アニメーション：Crafting an Animated 上記の参照サイトを参考にさせていただききました。 良記事ありがとうございます！ DEMO デモページ DEMO デモページを例に説明していきます。 また、スライダー部分についての説明は省略ぎみです。 この記事のHTML・CSS・JSをコピペすれば動くと思いますが、詳しくは参照サイトの「スライド」をご覧ください。 記述例：HTML <html> <head> ・
ブラウザ幅（ブレイクポイント）でタブメニューからアコーディオンメニューに切り替えるjQuery スマートフォン等で閲覧した時、タブメニューからアコーディオンメニューへ、レスポンシブに変わってくれると使いやすくなりますよね。 シンプルなコードで動作しますので、備忘録を兼ねてご紹介します。 参照サイト：Easy Responsive Tabs to Accordion ダウンロード：Download デモページ DEMO ダウンロード 上記ダウンロードから「Easy Responsive Tabs to Accordion」フォルダをダウンロードします。 （GitHubに登録されていない方は、右下の「Download ZIP」からどうぞ） 解凍すると色々入っていますが、 ・JSフォルダ内 easyResponsiveTabs.js ・CSSフォルダ内 easy-responsive-tabs.
外部リンクにtarget=”_blank”とclassを付与するjQueryで別窓アイコンを付ける サイト内の外部リンクは別窓で表示して、横に別窓で表示的なアイコンを付けるjQueryとCSSです。 すでに書いている記事の中から、外部リンクを探してtarget=_blankやアイコンを追加するのは大変だと思った時などにも使ってみてはいかがでしょうか。 まず、jQuery本体を読み込ませます。 次に、外部リンクにtarget=_blankとアイコンを表示するためのCSSのクラス名を付与して、自サイトには付けない処理を記述します。 記述例。 <html> <head> ・ <link href="style.css" type="text/css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jq
レスポンシブデザインでクリッカブルマップ（イメージマップ）対応にするjQueryプラグイン レスポンシブにすると画像の大きさが変わってしまって、クリッカブルマップ（イメージマップ）の座標がズレるってことになりますよね。 少し古いプラグインですが、そんな時に使えるレスポンシブに対応するクリッカブルマップjQueryプラグインをご紹介します。 Responsive Image Maps jQuery Plugin まず、stowball/jQuery-rwdImageMaps ・ GitHubにアクセスして、該当ファイルをダウンロードしてきます。 下図の丸印「ZIP」をクリックすると「jQuery-rwdImageMaps-master.zip」というフォルダがダウンロード出来ると思います。 で、フォルダを開いた中に「jquery.rwdImageMaps.min.js」ファイルがありますので
1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョン、 2.x 系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン、という認識で良いのではないでしょうか。 制作環境に合ったバージョンをダウンロードして下さい。 ダウンロードするファイルは、1.X系2.X系共に Download the compressed, production jQuery ○.○.○ Download the uncompressed, development jQuery ○.○.○ のいずれか。 compressed は圧縮されたファイルで、 uncompressed は非圧縮ファイルです。 特にコアファイルを触らない方は、圧縮ファイルの方を選択で良いと思います。 クリックすると、ズラズラっとコードが表示されますので、 右クリックして名前をつけて保存をクリック
Webデザイン制作を楽にするCSS3コード生成ジェネレーターのまとめ10個+１個 Webデザイン制作を楽にする、CSS3コードを生成してくれるジェネレーター10個と、CSSコードを綺麗に並べてくれるサイトを紹介します。 紹介され尽くした感がありますが、参考にして頂ければと思います。 CSS3コード生成ジェネレーター ｛CSS}Porterl グローバルナビにある「CSS Generators」から、 ・角丸・ボタン・テキストシャドウ・ボックスシャドウ・メニューなど色々なジェネレーターが選べます。 http://www.cssportal.com/ CSS3プロパティジェネレーター 日本語サイトなのでわかりやすいく、グラデーションやドロップシャドウ、角丸など作成可能です。 http://css-eblog.com/eblog_sample/0912/css3-generator/ 3D CS
Webデザイン制作で参考になるサイトリンク集15個+2個 Webデザイン制作で参考になるサイトリンク集15個と、ランディングページ、ロゴの参考サイトを集めてみました。 ご存知のものも多数あるかと思いますが、HTML5やレスポンシブサイトを集めたものもありますので、カッコイイ、オシャレなサイトを作る参考にしてみてはいかがでしょうか。 WEBデザインのリンク いけてるサイトドットコム ウェブデザインに役立つ、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを集めたWEBデザイナーのためのWEBデザインのリンク集。 http://www.ikesai.com/ デザイケ -Design Iketeru- イケてるサイト、カッコイイ、オシャレなサイトなどを紹介するWebデザインのリンク集です。 http://design-iketeru.azu-mi.com/ Good De
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"
Webサイトなど、HTMLファイルをLightBox風に表示するjQuery 画像をクリックすると大きく表示できるLigthBox系のjqueryは、みなさんお使いのことと思います。 Webサイトなど、HTMLファイルをLightBox風に表示する機会があったので、備忘録的に紹介します。 みなさんも機会があれば、選択肢の一つにいかがでしょうか。 fancyBox 少し古いプラグインになりますが、設定できるオプションも色々あり、画像のポップアップ用に使っても十分役に立つと思います。 画像のグループ化、SWFにも対応していますので、使い勝手は良いですね。 今回は、Webサイト・HTMLファイル用のみの説明となります。 まず、fancyBoxから、右側に「Version 1.3.4 (2010/11/11)」とありますので、クリックしてダウンロードします。 ※バージョン2から商用利用が有料となっ
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 （今回はグローバルナビで説明） HTML記述例（HEAD部） <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st
Flashっぽいローディングを表示するｊQuery Flashページで読み込み時に「すー」っとローディングバーが登場してくるエフェクトを表示させるjQueryプラグインを紹介します。 Flashで作るのはちょっと…という方は、選択肢の一つにいかがでしょうか。 IntroTzikas まず上記サイトにアクセスし、 2.Download introtzikas.jsをクリックして、introtzikas.jsをダウンロード（ソースが表示されます）します。 ※ブラウザによって異なりますが右クリックして「名前をつけてページを保存」(FireFox) 表示させたいページのHTMLのhead部分でjQueryとintrotzikas.jsを読み込ませ、 実行コードも付け加えます。 jQueryの設置方法→以前の記事初歩的なjQueryプラグインの設置方法 <html> <head> <script t
HTML版簡易ローディング画面設置ｊQuery 今回ご紹介するのは、ページの読み込み完了までローディング画面を表示し、完了後コンテンツを表示する方法です。 大きな画像を多用していたり、1ページあたりの容量が大きくなった場合など、読み込みが完了するまで結構な時間がかかってしまうページでの訪問者のイライラを解消する選択肢の一つにいかがでしょうか。 HTMLで作成したページでローディング画面を表示させ、ページ全体が読み込まれてから表示させる方法を、2GRAVITY(ニジュウリョク)様が、とてもわかり易く説明していただいているのでご紹介致します。 Flashページで読み込み時に「loading・・・」等と表示されるのをよく見かけますよね。 javascript（jQuery版）を使用すると、HTMLで作成したページでも同じようなことが表現可能になります。 【html】記述例 <body> <div
初歩的なjQueryプラグインの設置方法 ほとんどのjQueryプラグインは、jQuery本体、プラグイン本体、実行コードの３つで形成されます。 初心者でもわかるように、初歩的な設置方法について説明していきたいと思います。 jQuery本体の設置 まず、jQuery本体を設置しないと動きません。ここでは ①jQueryをダウンロードしてフォルダに入れて使用する。（サーバにアップロード） ②GoogleやMicrosoftなどが配布しているjQueryファイルを読み込んで使用する。 の2つを説明します。 ダウンロードして使用する場合 jQuery本サイト(http://jquery.com/)の「Download(jQuery)」ボタンを押します。 フォルダでダウンロードされる訳では無くソースが表示されますので、ブラウザによって異なりますが右クリックして「名前をつけてページを保存」(Fire
気持ち良いスクロールをするjQueryプラグイン ページ内で「するすると」移動する、気持ち良いスクロールを出来るようにするjQueryプラグインを紹介します。 スムーススクロールを実装できるものはこれ以外にも色々ありますが、選択肢の一つにいかがでしょうか。 jquery.smoothScroll.js まず↑サイトからjQuery.smoothScroll.jsをダウンロードし、フォルダーに放り込みます。 （下記ではjsフォルダー） ヘッド内に下記のコード（jQueryとjQuery.smoothScroll.js）を読み込ませます。 簡単に書くとこんな感じでしょうか。 <html> <head> ・ ・ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery
CSSで画像にリボンを斜めがけする 最近リボンで装飾されたサイトや画像を良く目にします。 今回は画像加工ではなく、HTMLとCSSで斜めがけのリボンを表現できるサイトをご紹介します。 リボンの文字も変更できるので便利じゃないでしょうか。 Creating CSS3 Image Ribbon Tagsです。 英語のサイトですが、スクリプトとか入っていないのでHTMLとCSSをコピペだけで使えますので簡単～。 HTML記述例 <div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div> まず、クラス名をつけたdivを作り、画像を配置。 リボン内に入るテキストをspan内に入力します。 CSS記述例 まず、クラスを定義 .side-corner-tag { position:
既存のホームページを自分で更新したい方 ・既存のHTMLのホームページをWordPressへ変更 ・Woredpressのインストール ・初期設定 ・トップページに「新着情報」を設置 ・内部SEO施策 ※ご契約中のレンタルサーバーで、PHPとMySQLが使用可能な場合に限ります
CSSでサムネイルにエフェクト10種類 画像などをサムネイルとして並べる時、ただ並べるのではなく一工夫欲しいところではないでしょうか。 今回は、CSS3でサムネイルにロールオーバーエフェクトを実装できるサイトをご紹介します。 10種類から選べるので、お気に入りのエフェクトを選んでみてはいかがでしょうか。
このページを最初にブックマークしてみませんか？
『ホームページ制作やリニューアル制作と印刷物デザインのWPC大阪』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
