カテゴリー: Web
調和数列の文字サイズをCSS変数で再現
過去の記事で少し触れていたが、このブログの文字サイズはすべて調和数列に基づいて設定している。これについては↓のサイトで提言されているものを参考にした。 文...
Twitterでユーザーのツイートを検索しやくするブックマークレット
Twitterの検索はfrom:ユーザー名とすれば特定のユーザーのツイートに限定したり、until:YYYY-MM-DDとすれば期間を指定したりできる。こ...
ユーザーCSSで特定のページを擬似的にアクセス禁止にする
ユーザーCSSで特定のページへアクセスできないようにして、見たくないページを見ない方法。 ページの表示 CSSを当てたページにアクセスしようとすると、下の...
リセットCSSで消え去ったselectのスタイルを元に戻す
リセットCSSといえば、destyle.cssとかnormalize.cssとかress.cssなどいろいろあります。 当ブログではressを使っているの...
Hexoで記事本文を抜粋表示する
トップページなどで、記事タイトルの下に本文冒頭の数十文字が抜粋表示されているアレをHexoでも表示させる方法。 実装方法 あらじめHelperとして用意さ...
Hexoのカテゴリーページで親カテゴリーを配列で取得する
Hexoにはpage.categoryという変数が用意されていて、カテゴリーページでカテゴリーの名前を出せるのですが、カテゴリーを階層化させているときに、...
Hexoで記事を早く書き始められるPowershellのスクリプトを書いた
このブログは、URLにSEO効果があるというのはオカルトだと思っているのと、単純に英語のスラッグを考えるのがめんどくさいというのがあって、記事のパーマリン...
Hexoにテキストリンクのシェアボタンを設置する
Hexoのブログの記事下にシェアボタンを設置する方法。現在このブログには、思想信条上の理由でシェアボタンは設置していないのですが…。 昔このブログに使って...
PC版YouTubeのコメント欄・チャット欄を非表示にするCSS
YouTubeには質の高いコンテンツがたくさんありますが、コメント欄の民度は低いですよね。個人的にはコメント欄は全て廃止でいい（過激派）と思っているくらい...
Hexoで記事の属するカテゴリー名を表示する
Hexoでは記事の属するカテゴリー情報がpage.categoriesに格納されています。この変数からカテゴリー名とURLを取り出しリンクを表示させる方法...
PC版Twitterの右カラム(トレンド、おすすめユーザー)を消すCSS
Twitterは公式アカウントを情報収集目的で見るくらいで、他人の反応とかトレンドとか1ミリも興味ねえよ！って方向けの、PC版Twitterをカスタマイズ...
pointer-events:noneするとcursorプロパティが効かないのを回避する
このブログのトップページのページャーで、disabledになっているボタンにhoverしたとき、cursorをnot-allowedにしようとしたら効かな...
Hexoのtitleタグを最適化する
ブログのtitleタグをどのページとも被らないように設定するのは、カテゴリー・タグページやそれぞれの2ページ目などを加味していくと、意外に大変だったりしま...
JavaScriptでCSSを動的にセットする方法2種 (styleタグ、style属性)
CSSを動的にセットしたいときに便利なJavaScriptの関数の雛形です。 動的にセットしたいという際には、<style>タグの中に書いたC...
Hexoの月別アーカイブをプルダウン式(select要素)にする
Hexoでプルダウン式の月別アーカイブをサイドバーに置く方法。 Hexoでサイドバーに月別アーカイブを設置する際は、あらかじめ用意されているHelperを...
highlight.jsのスタイルをダークモードに応じて切り替える
ページ上のコードにシンタックスハイライトを適用するのに、highlight.jsというプラグインがあります。 ハイライトのスタイルもたくさんの種類が用意さ...
Hexoのmarkdon-itが脚注で出力するHTMLを整える
Hexoのプラグイン、hexo-renderer-markdown-itでMarkdownをレンダリングした際、脚注の部分に下のようなHTMLがはき出され...
Hexoでmarkdown-itを導入して記事内に脚注を書く
HexoでMarkdownについていろいろ調べてみると、デフォルトで入っているhexo-renderer-markedの代わりにhexo-renderer...
Hexoでパンくずリストの構造化マークアップをする
(2020-07-30) コードを書き直しました。こちらをご覧ください。 前回はページにパンくずリストを表示させましたが、今回は構造化マークアップ...
Hexoでプラグインを使わずパンくずリストを表示する
(2020-07-30) コードを書き直しました。こちらをご覧ください。 このブログはHexoで構築しており、全ページにパンくずリストを設置してい...