javascript

Windows に Node.js をインストールする

Windows に Node.js 環境を構築しようと思います。 思い立った理由は、しばらく前から cssのコーディングを less から sass に変えたのですが、lessで作ったものを見直す機会があり、この際、sassに書き換えようと調べたところ、node.js上で動く less2sass …

はてなブログ用カルーセル imzCarousel Ver.1.1.0 旧バージョン iPhone対応&バグフィックス版

はてなブログ用カルーセル imzCarousel Ver.1.1.0 旧バージョン iPhone対応&バグフィックス版 障害発生の経緯 旧バージョン iPhone対応&バグフィックス版 ダウンロード 障害発生の経緯 先日、「はてなブログ用カルーセル仕様スライダー「imzCarousel」jQuery…

はてなブログ用カルーセル仕様スライダー「imzCarousel」jQueryなし

あまり需要はなさそうですが、「はてなブログ用スライダー」をもう一歩進化させて、最後の画像までいったら最初に戻るいわゆるカルーセル(回転木馬)仕様にしたものを作ってみました。レスポンシブデザイン対応、同一ページに複数個使用可、jQueryは必要あ…

バグ修正:はてなブログ用スライダー改訂版

前記事で公開した「はてなブログ用スライダー改訂版」にバグがあります。 バグと言いますか、私の知識不足ではあるのですが(ペコリ)、本体の Javascriptではなく、記事内に書くスライダーの呼び出しスクリプトに問題があります。 <div id="myslider"> [f:id:ausnichts:201711</div>…

はてなブログ用スライダー改訂版

11/15日の記事「バグ修正」にもとづき修正済みです。 少し前に作ったβ版程度の「はてなブログ用簡易スライダー」を、カルーセルにしたり、オートスタートなどのオプション指定できるようにしようと改良しようとしたのですが、ふと気づいてみれば、「はてなフ…

はてなブログ用簡易スライダーを作ってみた

別ブログで縦長の新聞記事を引用しようとして、これ、幾つかに分けてスライダーにできないかなと思い立ち、簡易スライダーを作ってみました。 @半径とことこ60分 どういうものかは上の記事をご覧いただければわかると思いますが、6段の記事があり、そのま…

はてなブログ「続きを読む」クリックで記事ページ「続き」位置に飛ばす

当サイトはトップページに記事を表示していませんので問題ないのですが、別グログの「そんなにも褒めないよ。映画評」では、トップページに最新の1記事とその下に最新記事一覧を表示しています。 その際、記事の途中に「続きを読む」を挿入しています。 で…

はてなブログに Google Form を iframe で埋め込む

当サイトの 「 お問い合わせフォーム 」の実装方法です。 次の記事も参考にしてください。 iPhone で iframe を fixed にする場合の問題 iPhoneでは、フォーム入力のあるiframeをposition:fixedで使ってはいけない 仕様は次の記事を参考にしてください。 は…

はてなブログ/検索モジュールをどこに配置しよう? cms-style(6)

はてなブログを Wordpress 風に! > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 ブログというのは思いついたら書くというパターンが多いですので、なかなかサイト全体の構造をわかりやすく表示することが…

はてなブログのカテゴリーをタグクラウドにしてトップページに表示する cms-style(番外)

当サイトは、はてなブログに Wordpress風の自作テーマをあてていますが、トップページをどうしようかと悩んだ末、タグクラウドを表示することにしました。 すでに完成していますのでトップページを見ていただければどういうものかわかると思いますが、Javasc…

デスクトップはメニューバー、スマホはオフキャンバスメニュー cms-style(2)

はてなブログを Wordpress 風に! > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。 まずは全体の構想と「タイトルとメニュー」の解説です。 全体の構想 スマホ用のオフキャンバスメニューを準備する Javascri…

はてなブログのスクロールを戻すとすぐに表示されるタイトル&メニュー

あまり役に立たないかもしれないものを作ってみました(笑)。 はてなブログのタイトル(#blog-title)にカテゴリー(.hatena-module-category)を移動してメニュー化し、スクロールを進めた場合は通常通りタイトル&メニューは消えてゆきますが、逆にスクロ…

はてなブログのトップページを固定して企業サイト風にする方法

はてなブログはブログなんですから、トップページは記事を複数個掲載する仕様になっています。ただ、いろいろカスタマイズに手を出しますと、固定ページに出来ないかと思い始めます。その方法です。 予約投稿でトップページをつくる 日付など不要なものを消…

はてなブログ/軽量・高速ソーシャルボタン・シェアボタン(LINE付き、選択可能版)

はてなブログ用の軽量・高速自作ソーシャルボタンの LINE付き、各ソーシャルボタン選択可能版です。 概要 ボタンの見た目 スマートフォンの場合 利用方法 事前準備(Facebook、Twitter 使用の場合は必須) カスタマイズ > フッタ への挿入コード カスタマイ…

はてなブログ/軽量・高速ソーシャルボタン・シェアボタン改訂版(各記事に複数表示が可能)

下記記事にて、はてなブログ用の軽量・高速自作ソーシャルボタンを公開していますが、公式ボタンのように記事の上下に入れられないかとのリクエストをいただきましたので改訂版を公開します。 www.imuza.com 改訂版では、デザイン > カスタマイズ > 記事 > …

はてなブログテーマ/Cherry Blossom

はてなブログテーマストアに投稿した「Cherry Blossom」の解説記事です。 スクリーンショット 概要 テーマカラーの変更 ブログタイトルバックのイメージ変更 タブ表示仕様に必要なこと タイトル下(ヘッダ) フッタ デザインCSS チューニング スクリーンショ…

はてなブログ/jQuery なしで動く【ボトムナビゲーション】(かなり)汎用版

はてなブログをスマホで表示した場合のナビゲーションとして、「戻る、進む、ホーム、最新記事、カテゴリー、トップへ移動」をボトムに表示するプラグイン的なものを作りました。かなり汎用的に使えると思います。jQuery を入れる必要はありません。 見た目 …

はてなブログ/ボトムナビゲーション改訂版

(2016/10/19)以下に汎用版があります。 www.imuza.com jQuery なしで、はてなブログにボトムナビゲーションを作った前回の記事「はてなブログ=スマホ用カスタマイズ、最新記事、カテゴリーのナビゲーションをボトムに表示する(jQueryなし) - IMUZA.com」…

はてなブログ=スマホ用カスタマイズ、最新記事、カテゴリーのナビゲーションをボトムに表示する(jQueryなし)

(2016/10/14)改訂版があります。 はてなブログ/ボトムナビゲーション改訂版 - IMUZA.com 「はてなブログ=レスポンシブデザインの場合のスマホ UI を考えてみる - IMUZA.com」で記事にしたスマホ用ボトムナビゲーションは、オール Javascript で作り込ん…

【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成)

(2016/9/6)プロフィールページ(/about)のエラー修正(可読版参照) (2016/12/4)記事の上下に表示可能な改訂版があります はてなブログの読み込みが重い理由のひとつは、ソーシャルボタンがiframeで読み込まれているからです。以下5回の記事で、hatena…

【はてなブログ高速化5】 Google+のシェアボタンをカウント付きで自作する

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 はてなブログのソーシャルボタン軽量化、最後の Google+ です。 これも他のボタンと同じように、Java…

【はてなブログ高速化4】ツイート数付きツイートボタンをオリジナルでつくる(素の javascript 付き)

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 【はてなブログ高速化3】Facebookシェアダイアログでシェアする/Facebook SDK for JavaScript - IMU…

【はてなブログ高速化3】Facebookシェアダイアログでシェアする/Facebook SDK for JavaScript

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 「【はてなブログ高速化2】Facebookシェアボタン/シェアカウントを素の Javascript で取得する」の…

【はてなブログ高速化2】Facebookシェアボタン/シェアカウントを素の Javascript で取得する

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 前記事の「【はてなブログ高速化】シェアボタン(ソーシャルボタン)を改良して読み込みを速くする」…

【はてなブログ高速化】シェアボタン(ソーシャルボタン)を改良して読み込みを速くする

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 はてなブログの読み込みが重い(遅い)のは、ソーシャルボタン群やブログカードに iframe を使ってい…

はてなブログ爆速計画=ソーシャルボタンをスクロールタイミングで遅延ロードする

はてなブログのソーシャルボタンが重いということで、5秒後に読み込む方法を下記記事にしたのですが、もうひとつでしたので、今度は記事ブロックがウィンドウの上に到達した時に読み込む方法を考えてみました。 www.imuza.com 考え方は、social-buttons を…

はてなブログのソーシャルボタンを5秒後に遅延ロードする

はてなブログのソーシャルボタンはとても重いです。 記事ページはまあなんとか許容範囲かと思いますが、トップページに5記事を表示したりしますと、ボタンの表示だけに3,4秒かかっています。 で、何とかならないかといろいろ考えてみました。 「続きを読…

はてなブログのリンクを素の Javascript で別ウィンドウに開く(jQuery なし)

はてなブログのリンクは、標準ですと、外部リンクでも同じウィンドウで開きます。設定で変更することもできませんので、ググりますと、別ウィンドウで開くスクリプトがたくさんヒットします。 数ページ見ただけですが、素の Javascript で書かれたものがあり…

はてなブログテーマ Hyperspace Javascript 版 公開!

はてなブログ テーマストアに投稿した Hyperspace の Javascript 版(以下、JS 版)の解説記事です。当サイトがそのテーマの導入サイトです。(当サイトはすでに他のテーマに変わっています) なお、以下、テーマストア投稿のテーマは、CSS 版と表記します。…

はてなブログテーマ hyperspace=クロスブラウザチェック

今回、クロスブラウザという点で決定的な問題となるのは、CSS では、 viewport calc flexbox transition transform Javascript では、 LocalStrage, SessionStorage あたりです。 Chrome, Opera, Edge(Windows)は問題なし Firefox では、line-height に ca…