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

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

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

続きを読む

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

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

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

続きを読む

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

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

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

続きを読む

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

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

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

続きを読む

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

Webカラー一覧から、色を見ながら選べるSELECT部品を作ってみました!

昨日の「CSSで蛍光ペンでラインを引いたように見せる表現をするには?」を書くために色を選んだり太さをあれこれ試したり、その結果をspanやClassにしたりするのが結構面倒くさい作業でした。そのため、蛍光ラインマーカーメーカーのようなものを作ろうと思い立ったのですが、その前に色を選ぶ部品をどうやって作ろうか、というところでだいぶ時間がかかってしまいました。
今回はWebカラー一覧からSELECTで色名を選ぶことのできる部品を作る過程について書きたいと思います。

続きを読む

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

ブラウザにお知らせを表示して自動的に消えるトーストを作る WordPress編

「ブラウザにお知らせを表示して自動的に消えるトーストを作る HTML編」でブラウザにお知らせを表示するトーストの作り方(お料理みたいですが…)について書きました。
今回はblogでも使っているWordPressでトーストを表示する方法について書きます。

続きを読む

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

ブラウザにお知らせを表示して自動的に消えるトーストを作る HTML編

Webサイトを見ているときに右下のあたりに ポッ と四角いエリアが浮き上がってきてメッセージが表示されて、クリックしたり数秒経つと消えているようなものを時々みかけます。
この四角いエリアのことをトーストというようです。ちょっと面白そうだったので自分でこのトーストを作れるようにするにはどうすればいいのかな?と試してみました。

続きを読む

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

ブラウザ毎にHTML5、CSS3などの対応を確認できる caniuse.com

「カラーピッカーを自分の作るサイトに付けるためにJSColorを使う」という記事を書いてFacebookにシェアしたときにHTML5だったらjsなしでとても簡単に実現できる、と教えてもらいました。HTML5は今時点ではまだどのブラウザでも使えるということでもなさそうなのですが単純にHTML5は全部使える・全部使えないということではなく、部分的な対応のようです。
部分的な対応の情報を確認したくて調べていたら良いサイトがありましたので、それについて書きます。

続きを読む

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

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

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

続きを読む

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

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

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

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

Bootstrap3を自作のphpとかhtmlで使うための下準備をする

Image

Bootstrap3を使うと簡単にかっこいいフォームとかページができます。CMSではなくてちょっと自分用にphpで小さいプログラムを書いたり、あるいはちょっとしたhtmlを書いてみたいなと思ったときにBootstrap3を使うとよさそうです。

今まで何度か使ったことがあるのですが、しばらくすると忘れちゃうので(今がまさにその状態で(^_^;)、blogに書き留めるためにあらためてやりなおしてみます!
続きを読む

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

間違って公開を押してもすぐに公開されないようにする-ドジっこスペシャル付き

Image

最近blogは前日の夕方までに書くようにしています。書いているときは何度も「下書きとして保存」をクリックしています。ところが先日ついうっかり「公開」を間違って押してしましました。

パブリサイズ共有をしているので、「公開」を押したとたんにいくつものSNSに投稿が通知されてしまいます…超焦りました。その上、一度公開したものを再度パブリサイズ共有を有効にするには別の記事にコピーして元の記事はお蔵入りにしないと共有で通知してくれません(新規の時1回だけ行われる模様)。

なので、「誤って公開を押さないように」なにかしてみたいと思いました。 続きを読む

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

Contact Form 7で郵便番号を入れたら住所が入るようにする

Image

郵便番号を入れたら住所欄に住所が入ると入力すると楽ですよね。以前郵便番号から住所を入力するのに便利な、ajaxzip3というjavascriptを使ってフォームを作ったことがありました。

その経験を活かして、WordPressで定番のContact Form 7に郵便番号を入れたら住所が入る、というカスタマイズをしてみました。

この記事は古いのでぜひ新しい記事→【2016年版】Contact Form 7で郵便番号を入れたら住所が入るようにする の方をご覧くださいm(_ _)m

続きを読む

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

スグにできる。リンクをボタン風にして、マウスを乗っけたらちょっと押してる風にする

Image

毎日朝会をしているのですが、今朝の朝会の時に昨日作った 新blogへのリンクがわかりにくい、という意見が出ました。

「ブログを移行したということが分かってる人しか押さない」という、なるほど~ということでちょっと変更してみました。 続きを読む

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