SNSのシェアボタンの設置方法まとめ (サンプルコード付き)
サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
jQueryのeachの仕組みを徹底的にわかりやすく解説してみた。 · DQNEO日記
eachのキホン：要素を１個ずつ処理する まずおさらい。 このようなHTMLがあるとします。 <ul> <li>foo</li> <li>bar</li> </ul> eachを使うと、要素１個ずつに対して順繰りに処理を行うことができます。 <script> $(function(){ $('li').each(function(){ alert( $(this).text() ); // 'foo', 'bar'と表示 }); }); </script> これがキホンです。 変形してみる 上のeach式は、下のように変形できます。 (一番外側のブロック$(function(){....})は省略します) $.each( $('li'), function(){ alert($(this).text()); }); さらに変形してみます。 グローバル変数 "$" はグローバル変数 "jQu
リンク元によって任意のページに。 - OKWAVE
特定のドメインないし、特定のディレクトリ以下のファイルからのリンクを指定する場合は、正規表現を使うことで実現可能と思います。 複数のドメイン・ディレクトリをターゲットに、それら以下にあるページのリンクから来た来訪者を指定のページに移動させるように、改造してみました。 <script type="text/javascript"> <!-- function pagejump(){ specific_url = new Array(); specific_url[0] = "http://hoge1.com"; specific_url[1] = "http://hoge2.com"; specific_url[2] = "http://hoge3.com"; specific_url[3] = "http://hoge4.com"; // 特定のリンク元のドメイン・ディレクトリ・URLを指
WordPressサイトに雪を降らせるプラグイン「snowy」
前回のエントリー「WordBench東京で触発されて独自プラグインを作ってみることにしました。」では、どうしてプラグインを作ろうと思い立ったのか、という経緯について書きました。 さていよいよ、実際にプラグイン化してみます。 まずはローカル上でHTMLにJavascriptを書いて動かしてみる まずは、ローカル上でシンプルなHTMLにJSを書いてみて、ちゃんと予想どおりに動くかどうか、確認をします。 使ったのはこれ。 jQueryで雪を降らせるスクリプトです。 (1) Head内にコレを書く。 <script src="js/jquery1-7-1.js"></script> <script src="js/jquery.snow.js"></script> (2) bodyのどこでも好きなところへコレ。 <script> $(document).ready( function(){ $.f
【怖くないJavaScript + jQuery】ドラッグで要素を移動させる
おはようございます。今日もjQueryについて書いていこうと思います。 今回はjQueryに加えて、新たにもう一つ「jQuery UI」を使用します。これを使用できるようになるとできることもグンと幅広くなりますね。やってみると読み込むだけで結構簡単なのでぜひ一度試してみてください。 デモ ドラッグで好きな場所に 動かせます。 ↑こちらのボックス、ドラッグで好きな場所に動かすことができます。ちょっといじってみてください。 デモのファイルはこちらからダウンロードできます。 手順1：まず必要なファイルを読みこみ こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、jQuery UI、自分で作ったjavascriptのファイル（今回は move.js とします）を読み込みます。 <head> <script src="common/js/jquery
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link rel="stylesheet" href="slidebars.min.css"> <head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="slidebars.min.js"></script> </body> St
Googleカレンダーの背景色などをカスタマイズできる gcalendar-wrapper script ｜ memocarilog
Googleカレンダーをiframeでサイトに埋め込む事は簡単に行えますが、（ウェブサイトへの埋め込み – Google カレンダー ヘルプ）デフォルトのブルーの背景色がサイトデザインに合わなくて変更したい時があると思います。 そんな時に手軽に背景色やテキストカラーなどをカスタマイズする事ができるスクリプト gcalendar-wrapper script を見つけました。使い方や使用する際に私がつまづいた所についてです。 ダウンロード 下記のページのページ半ばにある「Download the wrapper script」よりファイルをダウンロードできます。 Easy Color Customization for Embedded Google Calendars | U-notez 参考記事とダウンロード先のページにも使用方法が詳しく書いてあります。 使用方法 1. gcalenda
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
JavaScript製とは思えないゲームをenchant.jsで簡単に作るには
JavaScript製とは思えないゲームをenchant.jsで簡単に作るには：enchant.jsでHTML5＋JavaScriptゲーム開発入門（4）（1/3 ページ） 大人気のHTML5＋JavaScriptベースのゲームエンジン「enchant.js」を使ってゲームアプリを作る方法を解説していく連載。今回は、手軽にアニメーションを作れるtl.enchant.jsの使い方や、スマホ向けアニメーションのチューニングポイント6つを解説する。 これが、JavaScriptのゲーム…… だと……？ 前回の「enchant.jsで重要なスプライトとシーンを使うには」では、ゲームの流れとなる部分を駆け足で解説いたしました。 今回は、よりゲームをリッチに見せる、複雑なアニメーションの作り方を理解していきましょう。この機能を使うと、こんなもの（サンプル）を簡単に作ることができます。ぜひ「JavaSc
YouTubeの埋め込み動画プレーヤーをJavaScriptで制御するYouTube JavaScript Player APIの使い方
サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、 Youtubeの埋め込みを使って表示する事があるかと思います。 この際にJavaScriptを使って制御ができるYouTube JavaScript Player APIというものがあり、設置をしたので そちらの実装方法のメモです。 これを使うと自分が作ったボタンで再生や停止が出来るようになります。（他にもいろいろ出来ると思います） SWFObjectを使って動画を読み込む 動画を埋め込む際は、動画の共有にある「埋め込みコード」でiframeかobjectのタグをサイト内に入れますが、 APIを使うときはFlashなどを表示する時によく使う「SWFObject」を使用します。このJSを使わなくてもできるそうですが、 このAPIがFlash Player8からしか対応してないので、この「SWFObject
jQuery Mobileを使って少し画面を書いてみる
前回は、ブラウザでフロントエンドのJavaScriptを書くためのデバッグ方法と、簡単なJavaScriptを自分で書いてみるということを実践しました。今回は、もう少しプログラムを理解するために、分岐やループなど、ほかの言語でも出てくる制御関数について見ていきましょう。 後半では、jQueryとjQuery Mobileを使って、少し画面を書いていくというステップに進みたいと思います。 プログラムの制御 前回の記事で、JavaScriptを書く場所のお話をしました。また、console関数を使ってプログラムを少し書いてみました。 <script type=”text/javascript”> var a = 1; var b = 2; console.debug(a + b); //答えは何？ //ifで比較することができます if(a > b){ console.debug(“aの方が大
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る
twitter facebook hatena google pocket Facebookをはじめスマートフォンサイトやアプリでは、メニューをタップするとサイドからにゅっと出てくるメニューが導入されて久しいです。 今回はSidr - A jQuery plugin for creating side menusを利用して、にゅっと出してみましょう。 sponsors 使用方法 Sidrからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.sidr.dark.css"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.sidr.min.js"></script> <sc
multihero.js (マルチヒーロー.js) | tshinobu.com
海外のウェブサイトで多く見られる「マルチヘッダー（MultiHeader）」「マルチヒーロー（MultiHero）」を実現するJavaScriptです。ページのキービジュアルやメインイメージに、複数のグラフィックを切り替えながら見せて、スペースをつぶさずにたくさんのコンテンツを配信します。（マルチヒーローについてはこちらの解説記事を参照→ユーザビリティやセンスの良さにグッときた8つのサイトデザイン） JavaScriptとCSSで構築しているので検索エンジンにインデックス化されやすく、どなたでも簡単にカスタマイズ＋導入いただけます。 Demo » Try demo without another. Sample code <head> <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> <script ty
要素を点滅させられるJavaScript「jquery.flicker」
twitter facebook hatena google pocket 点滅させることで注目を引くことができるjquery.flickerです。 頻繁に使うものではないと思いますが、注意を促したい時に使ってみるのも良いかもしれません。 sponsors 使用方法 jquery.flickerからファイルをダウンロード <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.flicker.js"></script> <script type="text/javascript"> $(function() { $('body').flicker({ 'reps': 5, //点滅回数 'pause': 200, //停止時間
masonry filtering | Notebook(JQueryPlugins) | kikins
<!--css--> <link rel="stylesheet" href="css/reset.css" type="text/css" /> <link href="css/masonry.css" rel="stylesheet" type="text/css" /><!--scripts--> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.masonry.min.js"></script> <div id="content"> <ul id="filtering-nav"> <li><a class="all" href="#all">メニューall</a></li> <li><a clas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
