「JQuery」カテゴリーアーカイブ

Webサイトで本をめくるように表示することができるJQueryプラグインturn.jsを試す

Web制作をしているといろいろな要望を受けることがあります。Webサイトで本をめくるようにコンテンツを見せたいという要望があったときにさて、どんな方法があるだろうと思いました。
うっすらとJQueryのプラグインがあるんだろうなぁと思って検索をしてみました。いくつか見つかったのですが一番エフェクトが凝ってるなぁと思ったJQueryプラグイン「turn.js」を試してみました。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

スマホの時、「今すぐ電話する」ボタンを表示、タップで電話する機能を追加する

毎月一度行っているWordPressもくもく会ではWordPressやWebサイト制作に関する四方山話をするのが楽しいです。先週行ったもくもく会では「スマホ表示の時に今すぐ電話するボタンが表示できるといいのだけどなぁ」という要望を聞きました。
確かに、スマホの時はそういうボタンを表示したいサイトもあると思います。ちょっと前に作ったお問合せボタンと同じようにtoastrでできるのでは?と思ったのでタップで電話する機能を追加してみました。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ページの右下にお問い合わせボタンを表示の修正ースマホのときとトップページ

Webページの右下に「お問い合わせ」というボタンを縦表示させる方法 というブログ記事でページの右下に「お問い合わせ」という縦書きのボタンを追加しました。
実際に追加してから見てみたところ、スマホのときに邪魔になるなぁとかトップページにはいらないんじゃないかなと思いましたので微修正してみました。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

Webページの右下に「お問い合わせ」というボタンを縦表示させる方法

たとえばこのブログを読んでいて、自分でやるのは不安なので有償で頼んでみたいと思うお客さん(がいるといいんですが!)がいたときに、すぐに聞けるようにお問い合わせのボタンが常に表示されているようにしてみたいなと思いました。
そこでページの右下に「お問い合わせ」というボタンを縦表示できるようにしてみました。その方法について書きます。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

子テーマ作成プラグイン、『子テーマメーカー』作りました

WordPressでサイトを構築するとき、私の場合はほぼ必ず子テーマを作ってその中をカスタマイズしています。作るときに作り方を忘れて、親テーマを丸ごとコピーしてしまったり、子テーマに必要なファイルは…と自分のblogを見たりしています。
あまり何度もそれをやっていていやになったので、WordPressのプラグインを作ってみました。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

カラーピッカーを自分の作るサイトに付けるためにJSColorを使う

今、構想中のWEBサービスがあります。それを作るために色々な技術を試しています。作ろうと思っているサービスで色が簡単に、自由に指定できるようにしたいなーと思うので、パレットから色を指定できるようなモノを簡単に付けたいと思いました。
検索してみて簡単に付けられそうなJSColorというものを見つけたのでその使い方について書いてみます。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

PCがあれば無料でコーディングの勉強ができるCodecademy

ネットに繋がったPCとやる気!があれば、いつでもどこでも誰でも無料で勉強ができる時代です。いくつかある無料サイトのなかで、先日Facebookのタイムラインで、超お勧めされていたサイトがあったので試してみました。それについて書きます。
続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

日本地図を表示するjQuery プラグイン Japan Mapは簡単便利

Image [10]

jQueryについてちょっと別の事で検索をしていたのですが、偶然「日本地図を表示するjQuery プラグイン Japan Map」を見つけました。日本地図を表示したりクリックしてページに遷移したりできそうな面白いものだったので、どんな風に使えるかを試してみました。
続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

みんなの経済新聞の電光掲示板、をちょっと作ってみた

Image [4]

新幹線のドアの上にあるちょっとしたニュースのタイトルが出る電光掲示板が好きです。あれと同じようなモノをWebで作ってみたいな-、みんなの経済新聞のRSSから表示すれば面白いなーと思って、ちょっと作ってみたのでそれについて書きます。
続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

チェックボックスを択一にするjQuery書いてみました

1120

チェックボックスは通常複数選択できるものなのですが、それを択一にしたいというご要望がありました。こういうのはjQueryが得意なのでjQuery でラジオボタンみたいに択一になるように書いてみました。かなり簡単ですのでお試しください。
続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

htmlでタイトルをクリックすると詳細を表示する方法

Image [3]

よくある質問、などで「タイトルをクリックすると詳細を表示する」という仕組みがあります。ちょっとこういう表現をしたいなと思って調べてみました。最終的にはWordPressのコンテンツでそのような表現をしたいですが、まずはどのような仕組みでそれが実現するのかを通常のhtmlで試しました。
続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

JQueryのTimepickerを使ったフォームでのデフォルト値の指定

Image

そろそろRYUSも夏休みが近づいてきました。ゴールデンウィークに使おうと思って適当に作ってあった「臨時ニュースプラグイン」を今回こそ、ちゃんと作り上げて公開しようと色々やっています。

今はまだ途中なのですが、Timepickerのデフォルト値を指定したときにちょっと困って解決したのでそれについて書きます。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

OWLカルーセルで最新記事から画像をスライダー表示する

Image

カルーセルができるJQueryプラグイン OWL Carousel は簡単便利!」という投稿はかなり人気があって、毎日誰かしら参照してくれているようです。

前回は小さい画像をいくつも並べるというパターンでしたが、今日はトップページなどで使える大きな画像を使ってみたいと思います。
続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

カルーセルができるJQueryプラグイン OWL Carousel は簡単便利!

Image
Amazonなどで見かける「この商品を買った人はこんな商品も買っています」という、画像があって左右に移動できるもの…そういう動きのものをカルーセルというらしいのですが、これを作る導入簡単なJQueryプラグインがあったので使ってみました。通常のhtmlでもWordPressでもXOOPS Cubeでもおおよそどこでも使えますよ(^_^)v 続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

datepickerとtimepickerを使って入力しやすいフォームを作る

Image

前回(WordPressでJQueryを”$”で動かせるようにする)、前々回(ダッシュボードでも!WordPressでJQueryを”$”で動かせるようにする)とJQueryのライブラリを組み込むための環境作りができましたのでいよいよDatepickerTimepickerを組み込みたいと思います。

WordPressだけでなく、JQueryのライブラリであるDatepickerとTimepickerを組み込むというやり方は、他のCMSやスクラッチコーディング時も同じように出来るので自分でも書き留めて今後参照しようと思います。 続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ダッシュボードでも!WordPressでJQueryを”$”で動かせるようにする

Image

前回のblog WordPressでJQueryを”$”で動かせるようにする という記事を書きました。ということでいよいよ自作pluginにDatepickerを追加しよう!としたところ思わぬところでつまづきました。表画面とダッシュボードでは状況が違うためのようでした。対応できたのでそれについて書きたいと思います。 続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。