javascript

Javascript:カスタムデータ属性で配列(実は文字列)の受け渡し

Javascript の小ネタです。 HTML から Javascript へのデータの受け渡しに複数のデータを渡すことは出来ないかという話です。 カスタムデータ属性の値はひとつ 値を配列で渡す match() メソッドで配列化する 配列形式にする必要ないんじゃない? カスタムデ…

Javascript:1行挿入でスムーススクロール imzSmoothScroll

「CSS:scroll-behavior:smooth を使わないわけ」で紹介した自作のスムーススクロールを公開します。 特徴 Javascript imzSmoothcroll の使い方 個別にスムーススクロールを呼び出す場合 ライセンス等 特徴 jQuery などのライブラリーを必要としない素の Jav…

Javascript:ページ最下部までスクロールするための最上部は?

Javascript で単純にページの最下部まで移動するには、window.scrollTo(0,document.documentElement.scrollHeight); で一瞬に移動します。ただ、スムーススクロールで最下部まで移動するためにはページの最下部に移動した時のスクロールトップ(ブラウザの左…

CSS:scroll-behavior:smooth を使わないわけ

ページ内のリンクをスムーズに移動するには、CSSのみ、jQuery、素の Javascript といろいろ方法があり、とにかく一番簡単なのは一行ですむ CSS による方法ですが、残念ながらイージングが指定できません。 比較用デモサイト CSS によるスムーススクロール 問…

CSS:fixedの要素をスクロールバーなしでスクロールさせる

サイトのメニューをオーバーレイで出す場合には、その要素に position:fixed を指定する場合が多いと思いますが、要素の長さがデバイスの表示高よりも長い場合にスクロールさせ、かつ非タッチデバイスの場合にスクロールバーを非表示にし、背景を固定しスク…

はてなブログ:【決定版】記事一覧に「前のページ」ボタンを実装

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス(7)。 はてなブログではトップページから「次のページ」をクリックして進みますと、「前のページ」に戻るためのリンクがありません。この「前のページ」のリンクを作ろうという話で…

はてなブログ:トップページに「前に戻る」を実装する(やや失敗)

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス(6)。 ブログのトップページは一般的に新着記事を何件か表示するようになっています。はてなブログも、表示形式は一覧と全文形式がありますがどちらも最大15件まで表示できます。 で…

はてなブログ用ボトムナビゲーション Bottom Navigation V2

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス(5)。今回はチップスというよりも機能追加のプラグイン的なボトムナビゲーションです。 カテゴリー、検索、トップへ、ページャーへ、ホームへの5つのナビゲーションをひとつにまとめ…

【改訂版】はてなブログの画像ポップアップをオリジナル画像に変える

前記事で、はてなブログの画像ポップアップ機能を表示画像そのものではなくオリジナル画像に変更する Javascript を公開したのですが、画像のファイル容量が大きい場合にダウンロードの待ち時間中の画面に変化がなく停止と勘違いしてしまいますのでローディ…

はてなブログの画像ポップアップをオリジナル画像に変える

はてなブログでは画像をクリックしますとポップアップでその画像が表示されます。ただ、特にスマホですと画像自体が横幅いっぱいに表示される場合が多いですのでほとんどポップアップの意味がなく、CSSでクリックイベントをオフにしている人も多いかと思いま…

Javascript, jQuery のイベントを削除する

はてなブログでは記事に画像を挿入しますと自動的にリンクが貼られ、クリックしますとポップアップで画像が表示されます。ただ、ポップアップで表示される画像は元画像と同じものですので、記事そのものを1カラムで表示するスマートフォンでは意味がないです…

ウェブからスマホアプリを起動 URLスキーム、ユニバーサルリンク

Glitsh で Node.js アプリを立ち上げ、映画レビューサイト「そんなには褒めないよ。映画評」に Filmarks 疑似ソーシャルボタンをつくったのですが、この Filmarks はスマホアプリがあり、またサイト自体もスマホアクセスのほうが多いですので、ボタンをクリ…

無料サービス Glitch で Node.js アプリを立ち上げる

映画のレビューを書いている別サイト「そんなには褒めないよ。映画評」用に Filmarks 疑似ソーシャルボタンをつくりましたので Glitch で立ち上げてみます。無茶苦茶簡単です。 前記事:Filmarks の自分の投稿へ飛ぶ疑似ソーシャルボタン Glitch とは サイン…

Filmarks の自分の投稿へ飛ぶ疑似ソーシャルボタン

映画のレビューを書いている別サイト「そんなには褒めないよ。映画評」の各記事から Filmarks の自分の投稿ページに飛ぶリンク、疑似ソーシャルボタンをつくります。 前記事:Node.js でスクレイピングしてクライアントに返す クリックからページ表示までの…

Node.js でスクレイピングしてクライアントに返す

映画のレビューを書いている別サイト「そんなには褒めないよ。映画評」に映画レビューサイト「Filmarks」の自分の投稿へ飛ぶ疑似ソーシャルボタン(リンクボタン)をつくってみようと思います。 Filmarks Filmarks 疑似ソーシャルボタン 作成の構想 Filmarks…

Google フォームを reCaptcha 付でブログに埋め込む

当サイトでは Googleフォームを使ってお問い合わせ用のフォームメールを導入しています。iframe で埋め込むのではなく、form 内の要素だけを取り出し完全にブログのスタイルにカスタマイズできるようにしています。 お問い合わせ - IMUZA.com その Googleフ…

Web フォント NotoSans のサブセット化

Google の Webフォントはフォントファイルを 20KB~50KB程度に分割してダウンロードするなど軽量化が図られていますのでこのサイトでも使っているのですが、やはりパフォーマンスを考えますと厳しいものがあります。 でも、 NotoSans はきれいですし読みやす…

サムネイル画像を遅延読み込みでオリジナルに変更

この1,2ヶ月、モバイルユーザビリティのエラー対策に悩まされているのですが、そうした作業の中からもいろいろ学ぶことが多く、そう悪いものではありません(笑涙)。 www.imuza.com イメージの遅延読み込み Google 推奨の遅延読み込み HTML サンプルコー…

はてなブログテーマ imz-listing を公開します

はてなブログ用のテーマ「imz-listing」を公開します。 運用サイト 概要 デモサイト&キャプチャ デモサイト キャプチャ 必須事項 トップページの項目、画像の指定方法 指定しない場合 項目、画像を指定する場合 カスタマイズ ライセンス等 運用サイト すで…

YouTubeで動画の指定範囲を繰り返す方法

YouTubeの動画をページの背景にしようかと企み(笑)、IFrame Player API をいろいろ試しているのですが、組み込みプレーヤーで指定範囲をリピートする方法を発見しました。発見ではなく既出かもしれません。 YouTube IFrame Player API 繰り返し再生 loop=1…

はてなブログの ヘッダ>タイトル下 を有効に使う

はてなブログのテーマ「imz Pickup」をテーマストアに上げているのですが、このテーマについて、こんな大層なものはいらないけれど、トップページだけにピックアップ記事のようなものを表示する方法を教えてほしいというリクエストをいただきました。 はてな…

はてなブログのサイドバーをウィンドウ下に粘着

ページをスクロールしていきますと、メニューやサイドバーが、あるところでぴたっとページのトップに固定され、今度は逆にスクロールしますと再び追従し始めるサイトを見ることがあります。それをはてなブログでやってみます。 position:sticky サイドバーを…

AdSense 記事内広告が表示されないので自前で表示

はてなブログに Google AdSense の自動広告を入れてみたのですが、記事内広告だけが表示されません。 いろいろググってみても解決策は見つからず、結局、本文の内容(文字数?)なのかなとあきらめ、自前で入れることにしました。 記事内広告のコードを取得…

(improvement)はてなブログのカテゴリー階層化

はてなブログのカテゴリーを階層化する Javascript を一部修正しました。元記事はこちらです。 www.imuza.com 改善点 使用条件 Javascript お願い 改善点 画像の赤丸部分です。 パンくずリストを表示する場合で、2階層目のカテゴリーがパンくずに表示される…

はてなブログテーマ imz-pickup をバージョンアップしました

imz Pickup Ver.2 運用サイト はてなテーマストアでも公開しています「imz Pickup」をバージョンアップしました。 大きな変更ではありませんので上書き更新すればいいかとも思いましたが、使ってみえる方がいらっしゃいますと、気になる部分でもありますので…

オシャレな?はてなブログテーマ imz-pickup を公開します

はてなブログ用のオシャレなテーマ「imz-pickup」を公開します。このテーマは、imz-basic をベースにし、特別にアピールしたい記事、カテゴリー、固定ページなどを、トップページではタイトル下に、記事ページではサイドバーのトップ(位置は設定による)に…

はてなブログ用テーマチェンジャー(デモサイト公開用)

あまり(ほとんど)役に立たないものを作りました(笑)。 はてなブログのテーマを公開する際にはデモサイトがあったほうがわかりやすいのですが、たくさんテーマを公開しますとサイトが足りなくなります。そんな時にテーマチェンジャーがあるといいなあと思…

はてなブログ多機能テーマ imz-basic を公開します

はてなブログ用の多機能なテーマ「imz-basic」を公開します。このテーマは、Javascript で機能を追加することが主であり、記事内のスタイルはほぼ サンプルテーマ「Boilerplate」 のままです。これをもとにいろいろ作ってみようかと思っています。また、テー…

imzModules バージョンアップ(カテゴリー階層化の追加) ver.2.1.0

imzModules に「カテゴリー階層化」を追加しました。 imzModules とは? 使用方法 追加オプション treeCategory / カテゴリーを階層化する サンプル画像 サンプルCSS ライセンス等 imzModules とは? はてなブログをカスタマイズする場合、css だけでは思う…

はてなブログの特定のカテゴリーだけをリダイレクトする

はてなブログ同士の記事移転やリダイレクトをここ2,3記事で試みています。 概要 HTMLソースでカテゴリー表示を探す 特定カテゴリーをリダイレクトする Javascript 概要 ブログを統合する場合は、 はてなブログ間の記事移動はJavascriptとcanonicalでリダ…