はてなブログ

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

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

独自ドメインでブログ運用の場合のお名前メール

この記事は、独自ドメインでブログを運用する場合に、お名前.comのお名前メールを使う事例です。もう少し詳しく書きますと今回は次のケースです。 お名前.comでドメインを取り、レンタルサーバーでウェブ、メールを運用していた ウェブをブログ(はてなブロ…

はてなブログのお問い合わせフォームに hidden 型追加

当サイトのお問い合わせフォームは Google Forms を利用していますが、全くそのようには見えないはずです。その方法については、下記記事で公開しています。 www.imuza.com ポイントは、Forms で作成したフォームの action属性と input要素の name属性を持っ…

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

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

はてなブログの特定のカテゴリーをエクスポートする

現在、ブログの整理をしており、あるカテゴリーだけ(カテゴリーがない記事だけ)別のブログに移そうと思うのですが、はてなブログのエクスポート機能はブログまるごとしかできなく不便ですね。 そこで、エクスポートした記事から、あるカテゴリーだけ取り出…

はてなブログのカテゴリーを階層化し別ブログに統合した

ブログはワンテーマワンブログのほうがいいとは思いますが、更新もままならず休止中にしておくのもどうかと思い、別ブログに統合して書く意欲を奮い起こそうと思います(笑)。 この件、すでに「はてなブログ間の記事移動はJavascriptとcanonicalでリダイレ…

はてなブログのカテゴリーを階層化する(jQueryなし)

前記事で、運用しているブログを統合しようとして、その際、移動する方のブログのカテゴリーをひとつにまとめたほうが煩雑にならずにすむだろうと考えたのですが、ふとカテゴリーを階層化すればと気づきググってみれば、ああ、もうやっている人がいるではあ…

はてなブログ間の記事移動はJavascriptとcanonicalでリダイレクト

現在、はてなブログで4つのブログを運用しているのですが、そのうちのひとつを別のブログに統合しようと思います。 で、どうやってリダイレクトするかですが、もちろん .htaccess は使えませんので Javascript を使うしかありません。 今回の条件 はてなブ…

はてなブログ用 Javascriptモジュール imzModules ver.2.0

imzModules とは? 使用方法 オプション linkBlank / 外部リンクを別タブでひらく mvBgImg /タイトル画像移動 chgFeturedImg, pageArchive /トップページやアーカイブページのサムネールをオリジナル画像に変更 mvCategory /サイドバーのカテゴリーをタ…

非同期処理を Promise と then で書き直す

下記前記事を Promise と then を使って書き直しました。 www.imuza.com Promise Promise - JavaScript | MDN とりあえずは非同期処理のコールバック関数に変わるものという理解でいいかと思いますが、promise の意味からしますと、今はまだ結果を返せないけ…

はてなブログカードの iframe を div に差し替える(自サイトのみ)

長々とこだわっている「自サイトブログカードのリンクターゲット」の件、そろそろ実装できるものに仕上げないといけません(笑)。 これまでこんなことをやってきました。 はてなブログカードを DIV要素で自作する(自サイトのみ) Node.js でブログカードを…

はてなブログカードを DIV要素で自作する(自サイトのみ)

相変わらずブログカードにこだわっています。 といってもこのところなかなか時間が取れず、10日ぶりくらいにこだわってみました(笑)。 何をやろうとしているかといいますと、自サイトの記事をブログカードにした場合に別ウィンドウ(タブ)ではなく、つま…

はてなブログカードと oEmbed API

はてなブログの記事作成で、リンクボタンからリンクを挿入したり、サイドバーの「過去記事貼り付け」で記事を貼り付けたりしますとブログカードが作成されます。 www.imuza.com これですね。このブログカード内のリンクが自サイトであっても別ウィンドウ(タ…

はてなブログ「Archiveページ」の画像もオリジナルのものに変える

はてなブログのトップページの表示形式を一覧形式にした場合にアイキャッチ画像が 500px四方にトリミングされる件で、その画像をオリジナル画像に変更して自由にサイズを決められるようにする Javascriptを以下のページで公開しています。 www.imuza.com 参…

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

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

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

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

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

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

はてなブログ 当サイトのデザインテーマを変更しました。

当サイトのデザインテーマを2019年バージョンに変更しました。 白ベースの割とミニマムなデザインにしてみました。 これまでは下のテーマでした。

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

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

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

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

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

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

CSS Grid Layout の auto-fit を @mixin で実現

CSS Grid Layout の auto-fit を @mixin で実現 「CSS Grid Layout の auto-fit を擬似的に IE11 で実現させる」の続きです。 IE11 では対応していいない Grid Layout の auto-fit を擬似的に対応させます。擬似的というのは、auto-fit を使えばメディアクエ…

CSS Grid Layout の auto-fit を擬似的に IE11 で実現させる

CSS Grid Layout の auto-fit を擬似的に IE11 で実現させる CSS Grid Layout を使いますとウェブの表現力があがりますね。「グリッドレイアウト」などでググってみてください。おしゃれなサイトがいっぱい紹介されています。このブログもそろそろグリッドレ…

はてなブログに CSS グリッドレイアウトを導入してみる

はてなブログに CSS グリッドレイアウトを導入してみる はてなブログのテーマを display: grid を使って作ってみようと思います。ブラウザの対応状況は Can I use... Support tables for HTML5, CSS3, etc です。IE にベンダープレフィックスを付けても機能…

Google Web Fonts の subset=japanese の意味がわからない

Google Web Fonts の subset=japanese の意味がわからない 前記事 で書きましたように別ブログ「@半径とことこ60分」に Google の Web フォントを導入しましたので、デベロッパー・ツールで読み込み速度がどんなものか調べてみました。 なお、標題の件、こ…

はてなブログで Google Web Fonts を使ってみる

はてなブログで Google Web Fonts を使ってみる 日本語早期アクセスとして公開されていた日本語 Google Web Fonts が正式版になっていますので使ってみましょう。 ウェブフォントとは? 日本語 Google Fonts の導入 はてなブログに設定する ウェブフォントと…

はてなブログテーマ開発(8)スマホ用 offcanvasmenu の作り方

はてなブログテーマ開発(8)スマホ用 offcanvasmenu の作り方 別ブログ「@半径とことこ60分」のテーマ変更を機に、はてなブログのテーマ開発について書いています。今回はスマホ用のナビゲーションメニューを作ります。 はてなブログテーマ開発(1) はて…

はてなブログテーマ開発(0)とりあえず完成させた

はてなブログテーマ開発(0)とりあえず完成させた 別ブログ「@半径とことこ60分」のテーマ変更を機に、はてなブログのテーマ開発について書いています。まだいろいろ書くことはあるのですが、テーマ変更とともに独自ドメイン化と HTTPS 化をやろうというこ…

gulp で sass コンパイル環境を構築 + autoprefixer + browser-sync

gulp で sass コンパイル環境を構築 + autoprefixer + browser-sync はてなブログのテーマの作り方(それほどでもないけど)を7回ほど書いていまして、前回、display: grid を使ってみようと思いましたが、Hatena-Blog-Theme-Boilerplate ではベンダープレ…

はてなブログテーマ開発(番外)グリッドレイアウトを使ってみる

はてなブログテーマ開発(番外)グリッドレイアウトを使ってみる 記事ページの基本構造がほぼ出来ましたので、トップページに移り、ブログタイトルなど共通部分がこのままでいけるかどうか確認します。 トップページのレイアウトは、1カラムでグリッドレイ…