javascript

AmebaOwnd に完全カスタマイズお問い合わせフォームを導入

Ameba Ownd(アメーバオウンド)に GoogleForm を自サイト内のページとして完全カスタマイズできるように埋め込む方法です。この方法はすでに以下の記事にあるように「はてなブログ」で運用している当サイトで実現させている方法でもあります。今回、相談を…

Node.js で作ったブログカードアプリを Heroku にデプロイしてみる

前記事で、ブログカードにしたいサイトアドレスを投げればブログカードにして返してくれるアプリを作ってみたのですが、実際に使おうと思いますと、当然公開サーバーで立ち上げないと使えません。 www.imuza.com Heroku の無料サービスで試してみようと思い…

Node.js でブログカードを返すアプリを作ってみた

はてなのブログカードは自サイトでも別ウィンドウで開きます。別に気にしなくてもいいんじゃないのと思いながらもついつい深入りしてしまい、node.js でサーバーを立ち上げてブログカードを返すことはできないかとやってみましたらできました。 関連記事と考…

node.js で URLパースすると favicon.ico が返る

はてなのブログカードはたとえ自サイトであっても別ウィンドウ(タブ)で開いてしまいますので、それを同じウィンドウで開くようにしようと思っているのですが、DOM操作ではうまくいかず、じゃあ、サーバーを立ち上げて、呼ばれたら指定のサイトから OGPデー…

iframe内の読み込みタイミングがわからない

「はてなブログカードの iframe 内を弄る(自サイトのみ)」に書いた自サイトのブログカードを別ウィンドウで開かないように iframeの中の aタグの target要素を変更しようとした件、わけがわからなくなっています。 自サイト名/embed でもブログカードはで…

はてなブログカードの iframe 内を弄る(自サイトのみ)

外部リンクを別ウィンドウで開く方法 ブログカードはすべてのリンクが別ウィンドウで開く クロスドメインで iframe内を弄れない 自サイト名/embed でもブログカードはできる iframe内の aタグを target=_parent に変更する javascript iframeの src属性を自…

はてなブログ簡単カスタマイズ imzModules バージョンアップ

これまでの経緯 バージョンアップ 使い方 追加オプション linkBlank 見出しのリンクをスムーズスクロール化 はてなブログをカスタマイズする場合、css だけでは思うようにならないことがあります。その場合は Javascript を使い、DOM 操作をおこなって要素を…

オフキャンバスメニュー付 はてなブログテーマ(開発環境)

オフキャンバスメニュー付 はてなブログテーマ(開発環境) 前記事「はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ」で予告しておきました「はてなブログDOM操作モジュール imzModules」にオフキャンバスメニューを付けました。 スク…

はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ

はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ このブログのテーマを作り変えようと思います。 まずは、ベースとなるグリッドレイアウトのSASS開発環境とユニークなテーマづくりに必須のDOM操作をモジュール化してまとめてみました。 …

はてなブログでページ読み込み時のDOM操作をモジュール化する

はてなブログでページ読み込み時のDOM操作をモジュール化する はてなブログで自分の思うようにカスタマイズしようとしますとDOM操作が避けられなくなります。そのコードを毎回コピペするのではなく、モジュール化して github.io などに上げておき、オプショ…

はてなブログに AdSense インフィード広告を貼る

はてなブログにインフィード広告を貼る さほどアクセスもないブログしか書いていませんが、せめてはてなブログの利用料くらいは広告でまかなえないかと Google AdSense を利用しています。その程度の意識ですので、つい最近まで1ページに3つまでとの制約が…

タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある

タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある 別ブログ「そんなには褒めないよ。映画評」のトップページのデザインで、マウスオーバーのイベントをタッチデバイスの場合にどうするかを下記のページで記事にしましたが…

(bug fix)はてなブログ「一覧形式」の画像をオリジナルのものに変える

(bug fix)はてなブログ「一覧形式」の画像をオリジナルのものに変える はてなブログのトップページを「一覧形式」にした場合の画像をサムネールではなく元画像に差し替える下記記事のスクリプトは、画像が png や gif の場合にエラーとなります。 元記事:…

iPhoneでモーダルの背景のスクロールを止める

iPhoneでモーダルの背景のスクロールを止める 以前の記事「モーダルの背景のスクロールを止める」 上の記事で、メニューなどをモーダルで出す場合に背景のスクロールを止める方法を書いたのですが、やはり、iPhone 実機ではうまくいきません。再度挑戦です。…

Google Form ブログ実装のためのバリデーションを考える

Google Form ブログ実装のためのバリデーションを考える 前記事の「Google Form を自前のフォームで実装」の記事で、フォームデータを Javascript から送信する際、送信ボタンのタイプを button にしたのですが、これですとブラウザ実装のバリデーションが効…

Google Form を自前のフォームで実装(はてなブログで完全カスタマイズ可)

Google Form を自前のフォームで実装(はてなブログで完全カスタマイズ可) 以前、というよりも、このサイトがそうなんですが(変更済になっているかも知れません)、はてなブログにお問い合わせフォームを実装しようとして Google Form を完全カスタマイズ…

はてなブログ/touch, mouse を振り分け、hover イベントを統一する

はてなブログ/touch, mouse を振り分け、hover イベントを統一する :hover のないタッチデバイスで同等のイベントをどう実装するかの記事です。 タッチデバイスでの実装については、すでに「はてなブログ/スマホなどタッチデバイスの :hover イベント対応…

はてなブログ/スマホなどタッチデバイスの :hover イベント対応

はてなブログ/スマホなどタッチデバイスの :hover イベント対応 映画のレビューを書いている別ブログ「そんなには褒めないよ。映画評」のデザインを変更しようとしているのですが、スマホの UI で停滞しています。 トップページは、「一覧形式」を利用して…

はてなブログのトップページに「前のページ」を実装する

はてなブログのトップページに「前のページ」を実装する はてなブログのトップページって、「全文形式」にしろ「一覧形式」にしろ、次のページへ飛びますと「前のページ」のリンクがなく、ブラウザの戻るで戻るしかないですよね。 なぜなんですかね? 必要な…

はてなブログ「一覧形式」の画像をオリジナルのものに変える

トップページの「一覧形式」の画像をオリジナルのものに変える サイトのデザインって、あれこれ手を加えてこれで良し!と思ったものでも、飽きてくるのか、しばらくすると変更したくなってきます。 このサイトはもう少し持ちそうなんですが(笑)、映画のレ…

ページトップへ戻るスムーズスクロール(jQueryなし)

ページトップへ戻るスムーズスクロール(jQueryなし) HTML Javascript CSS はてなブログ用 お問い合わせ等 当サイトの右下に表示している「 」は、クリックしますとスクロールしてページトップに戻ります。こうした「ページトップに戻る」リンクは最近では…

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