クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

jQuery

【はてなブログ】トップページやカテゴリーページにページャーを表示してトップへ戻るリンクを追加する方法!

こんにちはクリアメモリです! 先日、はてなブログの記事に「前の記事」がない時は、トップページへ戻るを表示させたのですが、実はちょっと書き方を変えるだけで「トップページ」や「カテゴリーページ」にも表示できるので紹介します。

【はてなブログ】背景をアイキャッチ画像にしたら記事全体がいい感じになった!

こんにちはクリアメモリです! 今回は、はてなブログで作成した記事の背景を「アイキャッチ画像」に変更する方法を紹介します。記事ごとに別の背景を自動で設定できて、デザイン性もアップするのでぜひ試してみてください。

【はてなブログ】ページャーにトップへ戻るを表示!前の記事が無い時に表示すれば直帰率が下がるかも!?

こんにちはクリアメモリです! はてなブログで先頭の記事を読むと、ページャーに「前の記事へ」だけが表示されず「次の記事へ」だけが表示されてしまいますよね。それだと見た目も崩れるので、前の記事がない場合は「トップへ戻る」を設置してみました。

【はてなブログ】SNSボタンを記事の横に追従させる方法!いつでもシェアできるようにするカスタマイズ

こんにちはクリアメモリです! 今回は、はてなブログに設置したシェアボタンを、記事の横に追従させてみようと思います。このカスタマイズによって、ユーザーが記事を読み終わったタイミングにシェアボタンが見えるようになりますね。

【はてなブログ】全記事の最初にアイキャッチ画像(サムネイル)を自動表示させる!実質1行&コピペOK

こんにちはクリアメモリです! はてなブログなどのブログサービスを使って記事を書く時、記事の一番最初にアイキャッチ画像(サムネイル)を表示していませんか?今回は、そんな時に使える便利なコードを紹介します。呼び出し部分などを除けば実質1行だけで…

【はてなブログ】読了時間(この記事は○分で読めます)を設置する方法!滞在時間がアップするらしい!

こんにちはクリアメモリです! 今回は、はてなブログのタイトル下に「この記事は約何分何秒で読む事ができます」というような読了時間を表示させる方法です。 記事のコンテンツの目安を設置できるので試してみてください。

【はてなブログ】開閉式コンテンツ(アコーディオンパネル)でネタバレとかの表示・非表示を切り替える!

こんにちはクリアメモリです! 今回は、はてなブログの記事内で「開閉式コンテンツ」を使う方法を紹介します。 開閉式コンテンツを使えば、ユーザーがクリックしなければ表示されないコンテンツを作成できるので、漫画のネタバレのような非表示と表示を切り…

【はてなブログ】記事下に関連記事を表示させる方法!サイドバーから移動させるだけの簡単なカスタマイズ

こんにちはクリアメモリです! はてなブログを使っていると、記事下に関連記事を表示する方法に悩みます。 デザインから設定する方法でも関連記事を表示できるのですが、設定後に公開した記事でしか表示されないんですよね。 そこで今回は、サイドバーに設定…

【はてなブログ】noindexを特定の記事に追加する方法!1クリックOK!

こんにちはクリアメモリです! 今回は、はてなブログの記事を検索結果から除外する【noindex】を、特定の記事だけ追加する方法を紹介します。 他のサイトを調べたところ、記事の最初にコードを記述するというような方法の紹介が結構あったのですがこれは微妙…

【はてなブログ】SNSシェアボタンをスマホの下に追従させるカスタマイズ

こんにちはクリアメモリです! 先日、はてなブログにシェアボタンを設置する方法を紹介しました。 その中では、シェアボタンを記事上や記事下に設置したのですが、今回はスマートフォンでアクセスした場合のみ、シェアボタンを画面の下に追従させる方法を紹…

【はてなブログ】トップページにアドセンス広告を設置するカスタマイズ

こんにちはクリアメモリです! 今回は、はてなブログのトップページにアドセンス広告を設置する方法を紹介します。 トップページの下(ページャーの上)にアドセンスを設置することで、トップページを訪れてくれた方の目に止まりやすくなると思いますので参…

【はてなブログ】目次を開閉式にカスタマイズしてみた

こんにちはクリアメモリです! 先日、はてなブログの記事中に目次を設置する方法を紹介しました。 もし、目次に表示する見出しの数が10以上あったりして、目次だけでページが埋まってしまうような場合、開閉式にすることでスペースを削減できます。 そこでは…

【jQuery】自動スクロールで任意の位置まで移動させるボタンの作り方

こんにちはクリアメモリです! WEBでサイトを見ていると、記事を読み終わったタイミングや読み始めのタイミングで、ページ上部や目的の項目が書かれた箇所まで自動スクロールしたい時がありますよね。 そのような動作もjQueryを使えば、簡単に実装できるので…

お絵描きツールをCanvasとjQueryでブラウザ上に作ってみた

こんにちはクリアメモリです! HTMLのCanvasというコードを使うことによって、WEB上にお絵かきできるサイトを作成することができます。 Canvasの使い方が分かれば、直線や図形を描けるようになるので紹介します。

【jQuery】ストップウォッチを作ってみた!

こんにちはクリアメモリです! javascriptやjQueryを使うことによって、様々なプログラムを組むことができます。 そこで今回は、jQueryを使って時間を計ることができるストップウォッチを作ってみようと思います。

【jQuery】クリックされたら回転し続ける要素の作り方

こんにちはクリアメモリです! jQueryでは、cssをいじることによって要素の値を変更することができます。 そこで今回は、jQueryを使って「要素がクリックされたら、その要素を回転させ続ける」方法を紹介します。

jQueryを使えるように準備しよう [Stingerは不要]

こんにちはクリアメモリです! javascriptで動きを付ける際に「jQuery」という機能を使う事によって、より理想的な動きができるようになります。 ですが、jQueryをコードから使うためには準備が必要になりますので、今回はjQueryを使うための準備を紹介しま…

【jQuery】複数の要素を順番にアニメーションする方法

こんにちはクリアメモリです! 先日は、同じ要素を順番にアニメーションする方法を紹介しました。 ですが、アニメーションのような動作をさせる場合、必ずしも同じ要素で実行させるとは限りませんよね。そこで今回は別の要素でアニメーションを順番に実行す…

【jQuery】アニメーションを順番に実行させる方法!

こんにちはクリアメモリです! 前回、アニメーションが完了した後に処理を呼び出す方法を紹介しました。 前回の記事では「complete」を使ったのですが、連想配列を使うことでアニメーションを順番に実行させることもできるので紹介します。

【jQuery】アニメーションが完了してから処理を実行させる方法

こんにちはクリアメモリです! 先日紹介したjQueryを使ったアニメーションですが、場合によってはアニメーションが終了してから次の処理を開始したいというようなときがありますよね。 そのようなときはanimateの「complete」というコードを追記してあげるこ…

【jQuery】アニメーション完了までの時間を指定する方法

こんにちはクリアメモリです! jQueryを使ってアニメーションを再生するときは、$(‘ ’).animate({})を使うのですが、animateのdurationというコードを指定してあげることでアニメーションが完了するまでの時間をカスタマイズすることができます。 今回はanim…

新着記事