『アメブロのサイドバーにスライドショーをつける方法』
ぼく、レオだよっ♪ 「ブラッシ」大好き♪(*´▽｀*)ノ ウェルシュ・コーギーだよっ(#^.^#) 今日もブラッシ大好きレオくんが 気持ちよさそうになっている間に 私の備忘録記事を書くことに致します。(^^) 先日ある友人たちより ○○さんのブログのサイドバーの 「ぼくレオだよ」ってやつですけど 昔フラッシュを使っているって言われていましたよね。 なのになんでiphoneのgoogleChromeやsafari（パソコン版） で表示されてるのですか？ なにか特別な方法でもあるのですか？ 私もスライドショーをサイドバーに付けたいのですが 難しいですか？ だからiphoneでも （ただしブラウザをパソコン版にすることで） スライドショーが見えるようになりました(*´▽｀*) 難しいか？ ですか？ そんなに難しくないですよヽ(*´∀｀)ノ わざめーばさん(松本さん）のように コピペ一発ハイ解決！
『【カスタマイズ】ヘッダー画像やサイドバーにアクセントを！コンテンツスライダーや追従してくるバナー』
【カスタマイズ】ヘッダー画像やサイドバーにアクセントを！コンテンツスライダーや追従してくるバナー | 個人事業のためのホームページ制作 - 小さな会社の大きなブログデザイン戦略 アメブロはカスタマイズの自由度が低いと言われておりますが、全然そんなことはない、ということを証明するために、このブログでは、これまで色々なカスタマイズをおこなってきました。 全部の記事下にfacebookのプラグインやメルマガフォーム、バナーなどを設置したり、いいねボタンやツウィートボタンを設置したり。 意外に思ったようにカスタマイズできるのものなのです。 そして、今回はヘッダーにコンテンツスライダーやサイドバーに追従するバナーといった、訪問者に対してアピールできるアクセントをつけてみましたので、ご紹介していきたいと思います。 カスタマイズ方法のご紹介 まずは、Jquery には必須のこれをフリープラグインに記述し
『アメブロにJQueryスライダーを設置』
JQueryのスライダーはかなりありますが、その中でもカスタマイズしやすく有名なプラグインにBXSLIDERというプラグインがあります。 今回はこのBXSLIDERをアメブロに設置する方法を紹介します。 設置していく為のコードは、アメブロのメッセージボードに設置した場合の方法で、尚且つレイアウトは3カラムの場合のサイズで紹介してあります。 アメブロのカスタマイズがある程度分かる方ならもちろんメッセージボード以外でも設置は可能です。 まずはBXSLIDERからwandoledzep-bxslider-6ab0c2c.zipをダウンロードして下さい。その中にjquery.bxSlider.min.jsファイルが入ってますのでそれをサーバーにアップロードして使っていきます。 サーバーを借りてない方はDropboxを利用すると便利だと思います。ここではDropboxの使用方法などはお答え出来ません
jQuery入門講座：Nivo Slider(1)
索引 └ プラグイン目次 1章：小ネタ系 ├ イージングの追加 ├ 要素のセンタリング ├ クッキーの操作 ├ マウスホイール ├ スクロールバー(1) ├ スクロールバー(2) ├ スクロールバー(3) ├ スクロールバー(おまけ) └ アニメの一時停止/再開 2章：ショーケース系 ├ Nivo Slider(1) ├ Nivo Slider(2) ├ Nivo Slider(3) └ Nivo Sliderの改造 3章：カルーセル系 ├ carouFredSel(1) ├ carouFredSel(2) ├ carouFredSel(3) ├ carouFredSel(4) ├ carouFredSel(5) ├ スマホでカルーセル(1) ├ スマホでカルーセル(2) ├ カルーセルとnivo(1) ├ カルーセルとnivo(2) ├ カルーセルとnivo(3) └ カルーセルとniv
watanabehiroki.net - このウェブサイトは販売用です！ - watanabehiroki リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQueryでスクロールすると表示する系いろいろ
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
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
MdN Design｜総合情報サイト
床に画像が反射して映り込んでいるような効果を表現したい場合、「Image Reflection with jQuery and MooTools」（davidwalsh.name/javascrip-reflection）の「reflection.js」を使ってみよう。画像にclassを追加するだけで反射の効果をつけられる。 まずはjQueryの最新版とプラグインの「reflection.js」を読み込む【1】。次に透明度と反射部分の高さをoptionとして設定するためスクリプト部分を追加する。opacityが透明度で0〜1の間で設定し、heightが高さでこちらも0〜1で設定する【2】。この設定は「reflection.js」内にもあるので、そちらで指定すればHTML側には指定する必要はない。デフォルトでは「height:1/3,opacity:0.5」となっている【3】。 【1】jQu
【みんビズ jimdoでインタラクティブなjQueryスライドショーを入れる】これでjimdoサイトもちょっとはかっこよくなるかな｜今村だけがよくわかるブログ
この2つのページで申し上げたことは、jimdoでjqueryを使う時には注意が必要と言うことでした。以上を踏まえた上で説明いたします。 追記：もうちょっといろいろできるjQueryスライドの導入方法を以下のページに書きました。こちらもご参考ください。 １．jimdoの管理画面はインタラクティブですねjimdoの管理画面は動きがあってわかりやすいですよね。特に管理画面のコントロールパネルや、保存完了の通知ポップアップ表示など。（赤枠で囲った箇所です） jimdoの管理画面はインタラクティブ ここでは、こういったインタラクティブな動作がjimdoの管理画面では既に使われているってことだけ覚えておいてください。 ２．jimdoにjqueryのスライドショーを設置してみましょうではでは、jqueryのスライドショーをjimdoに設置してみます。下のサイトはスライドショーを設置するためのファイルがダ
JimdoでjQueryを使う為の準備 - Jimdo活用研究室
JimdoでjQueryを利用するには通常の使い方通りヘッダにjQueryのライブラリを読み込めばよいのですが、Jimdo自体が別のJavaScriptライブラリであるprototype.jsで動作する為に、衝突が起きて正しく動作しないことがあります。 Jimdoで使う場合にはこの点に注意しなければなりません。 まず、Jimdoの設定→ヘッダー部を編集に次のコードを追加します。 色々な記述方法がありますが、ここでは Google AJAX Libraries API を利用して、jQueryバージョン1.3系の最新版を読み込んでいます。 この方法だとJimdoにjQueryをアップロードする必要がなく、常に最新のライブラリを使用することができます。 <script type="text/javascript" src="http://www.google.com/jsapi"> </scr
画像スライドメニュー Horizontal Accordion「slidemenu.js」
画像スライドメニューで「Image Menu」に比べて「Horizontal Accordion」は1kbと軽いのが特徴。 DEMO-A：「Image Menu」 DEMO-B：「Horizontal Accordion」 DEMO-A・・Image Menu DEMO-B・・Horizontal Accordion HTML・・Horizontal Accordion <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=
スライドでフラッシュ風にみせる「s3Slider jQuery plugin」
管理しているサイトでも使用している「s3Slider jQuery plugin」の紹介。 トップページなどで写真を使用する場合など少し見栄えがよくなるかも？一度作成しておけば、同じサイズの写真を追加・変更するだけで簡単に更新できます。デモのようにスライド部分の設定はリストタグ内のclassで上からスライドなら”top”。下からスライドは”bottom”に変更すればOK。 配布元：s3Slider jQuery plugin ※配布元に左右のスライドもあります。 DEMO: ソース： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19
s3Slider jQuery plugin
Example 1 This example shows the layer appears on top or bottom. Lorem ipsum dolor Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet. Praesent Maecenas est erat, aliquam a, ornare eu, pretium nec, pede. In hac habitasse Quisque ipsum est, fermentum quis, sodales nec, consectetuer sed, quam. Nulla feugiat lacinia odio. Fusce rhoncus Praesent pellentesque nibh sed nibh. Sed ac
s3Slider - jQueryベースFlash風画像切り替えるスライドショー - オープンソースコラム
s3SliderはjQueryベースのスライドショーライブラリで、画像やテキストをFlashのようにスムーズに自動的に切り替えることができます。 >> デモページ 動作環境 ◇ jQuery ◇ ブラウザー： * Firefox 2.x (Win) * Firefox 3.0.3 (Win/Linux/Mac) * Opera 9.6 (Win/Linux) * Safari 3.0.3 (Win/Mac) * Internet Explorer 6 (Win) * Internet Explorer 7 (Win) * Google Chrome (Win) ◇ ライセンス：Creative Commons Attribution 2.5 使い方 １）<head>～</head>にjavascript とCSSファイルをインポ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
