JavaScript から CSS のルールを管理する
忘却録。 <style> を追加する addLocalStyle.js // CSSを追加する var addLocalStyle = function(text) { var style = document.createElement('style&...
Bloggerの表示速度を高速化する
忘却録です。Bloggerの高速化です。 結果 次の結果になりました。画像が古いため、現在は更に高速化しているはずです。 PageSpeed Insights GTmetrix Lighthouse （Audits） ウェブページ共通の高速化 長くなったため、記事を分割しました。...
JavaScript 無効限定の CSS を適用する
JavaScript を使用する方法 <html class="nojs"> <head> <script> document.documentElement.classList.replace('nojs...
ウェブページのページ表示速度を高速化する
Bloggerの表示速度を高速化する からウェブページ共通の部分を分離しました。 ウェブページが早くなる（遅くなる）要素 HTML解析 HTMLファイルを解析して表示するページを作成します これが終わらないとページは表示されません これを最速で行うことが一番重要です レイアウト時...
FontAwesome を SVG で使用する【JavaScript なし】
はじめに 「FontAwesome を JavaScript なしで使用する方法」または、「FontAwesome の一部のアイコンを使用する方法」です。 JavaScript 無効環境で FontAwesome を使用したページを閲覧すると文字化けしたような表示になるのを目にし...
Bloggerにあるページ一覧
目次 まとめ 基本 投稿 ページ エラーページ 検索・ラベル アーカイブ フィード 備考 参考 なくて困ったのでまとめた。 まとめ # トップページ / #...
Bloggerの空テンプレートを作成する
Bloggerの自作テンプレート作成に向けての第一歩です。 空テンプレート Bloggerテンプレートの最小構成です。 空テンプレートの基準は以下の通りです。詳しくは参考の資料を参照してください。 <b:skin> を含む <b:section> を含む ...
右クリックを禁止・禁止解除する
JavaScriptで右クリックを禁止する ページ全体で右クリックを禁止する window.addEventListener('contextmenu', function(e) { e.preventDefault(); }); //window.onconte...
すべてのページで標準のスクロールバーを表示する
はじめに 様々なウェブページがあります。この頃、モバイル対応やレスポンシブ対応の結果、デスクトップ環境のサイトでもスクロールバーを非表示にするサイトが出始めました。 モバイル環境であれば、スクロールバーを非表示にして表示領域を確保するのは良い方法です。ですが、デスクトップ環境では...
SyntaxHighlighterの読込みを最適化する
SyntaxHighlighterの読込みを最小限にします。概要は次の通りです。 <pre> なしならば読み込まない 必要なブラシは、最低限読み込む 遅延読込みも合わせて更に高速化する 元ネタは、下記の記事です。不必要な強い同期処理を簡易なものに置き換えてます。その他...
Element から CSS Selector を取得する
コード getCSSSelector.js /** * Element から CSS Selector を取得する * @author toshi (https://github.com/k08045kk) * @license MIT License |...
SyntaxHighlighter.jsからhighlight.jsへ移行しました
はじめに 当ブログでは、ブログ上のソースコードをハイライト表示するライブラリを利用しています。ソースコードには、予約後や文字列、数値など予め予測できる書式が多数存在します。それらを指定の色や書体によりハイライト表示することで、ソースコードを読みやす表示しています。 これまで CD...
Chrome、Firefoxの拡張機能を判定する
Chrome、Firefoxの拡張機能は、WebExtensionsで共通化しました。ですが、細かい部分が異なるため、コードを共通化する必要があります。拡張機能でブラウザを判定する方法のまとめです。 JavaScript ブラウザ判定 // ブラウザ判定 function isF...
Bloggerのコメント欄を改善する
この記事は、既に最新ではありません。最新の関連記事は、「 Blogger用の関連記事表示機能：FeedRelatedPosts.js 」を使用しています。 「 Bloggerに関連記事を表示する 」の続きです。 「A Simple Related Posts Widget For...
ブラウザを判定する（ブラウザスニッフィング）
目次 はじめに ブラウザを判定する IE を判定する Trident を判定する Gecko 判定について WebKit を判定する Blink を判定する Presto を判定する 備考：スマホ・タブレット・デスクトップを判定する 備考：機能毎に判定する 参考 はじめに ブラウ...