[JavaScript]全選択で記事部分だけになるようにした

自分のサイト内の記事全体を選択しやすいように、スクリプトを作りました。

1. window.getSelection()

テーマのjavascript.jsに以下のコードを追加しました。

document.addEventListener('keydown', function(event) {
  if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
    event.preventDefault();
    const articleElement = document.querySelector('article');
    const range = document.createRange();
    range.selectNodeContents(articleElement);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }
});

ユーザーがCtrlキー（またはMacではCommandキー）を押しながら ‘a’ キーを押すと、<article> タグで囲まれた記事の内容全体が自動的に選択されます。

• document.querySelector を使って、<article> 要素を選択します。
• 新しい範囲オブジェクトを作成し selectNodeContents() で記事要素の内容を範囲として選択します。
• window.getSelection() で現在の選択オブジェクトを取得し、既存の選択範囲をすべて削除してから、先ほどの範囲を追加します。

これで記事をすばやく選択してコピーして、他の操作を行ったりすることができます。

2. user-select: none

これでも、記事内のウィジェット部分も含まれるので、style.cssに以下のコードを追加しました。

/** テキストウィジェットの文章をコピーの選択範囲から除外する 2024-05-24*/
.textwidget, .widget_text, .widget_toc, .blogcard-type, .entry-categories-tags, .sns-share{
   user-select: none;
}

CSSのプロパティuser-selectは noneにすると、ユーザーがその要素内のテキストを選択できなくなります。

こちらもどうぞ。

[PHP]ウェブページの内容を抽出するオンラインツールを作るには？

ウェブページから必要な記事を簡単に抽出するツールを作りました。使い方は、URLを入力して「Extract Article」ボタンを押すだけで、記事内容が表示されます。信頼できるソースのURLのみを使用し、個人利用や研究目的に限定してください。ツールの使い方インターネット上には膨大な情報があふれていて、必要な情報だけを見るのは大変な作業です。そこで、ウェブページから記事を簡単に抽出できるツールを作りました。（ツール）ツールの使い方を具体的に説明しましょう。まず、ウェブブラウザで...

chiilabo.com

[Cocoon] Amazonリンクに個別にPR表記をつける[CSS]

ちょっと商品紹介をしたいとき記事の中にちょっとAmazonの商品紹介を入れたいときがあります。記事全体がPRでもないので、記事先頭にPR表記を入れるのにも抵抗があります。そういうときのために、Amazonリンクに個別にPR表記をつけるようにCSSを変更しました。テーマのstyle.cssに以下のコードを追加しました。/** Amazonリンクに個別にPR表記をつける 2024-05-01*/.product-item-title::before { content: "[PR...

chiilabo.com

[WordPress] ブロックエディタで下線のショートカットキー（⌘U）が反応しなかった（プラグインの再有効化）

WordPressのブロックエディタで、下線のショートカットキー（⌘U）が反応しない不具合がありました。いったんWordPressプラグインをすべて無効化して有効化し直すと、⌘Uがちゃんと動作するように戻りました。WordPressプラグインも、一時的な不調でリセットが有効なことがあるんですね。下線のショートカットキーが使えない？ブログ記事の装飾の仕方で、「主張を太字し、根拠に下線をつけると見やすい」という意見を見つけました。これまでは強調のための太字しか使っていなかったので...

chiilabo.com

[CSS] ブログの文字詰めを微調整した【letter-spacing と font-feature-settings】

ちいラボでは、なるべく「文字が見やすい大きさ」に設定しています。しかし、自分のスマートフォンで閲覧すると、一行の文字数が少ないために、改行が多すぎる気もしています。そこで、文字の大きさをそのままに、「文字詰め」を狭めてみることにしました。letter-spacing全体的な字間をそのまま減らすには、letter-spacing に負の値を設定します（規定は0）。letter-spacing: -0.05em;font-feature-settings に "palt" を設定...

chiilabo.com

[Cocoon] ソースコードハイライトが反映されない？【CSSセレクタ】

なぜか、Cocoonのテーマ設定のソースコードが反映されませんでした。CSSセレクタを設定し直したら、うまく動きました。highlight.jsが動作しないCocoonテーマには、ソースコード ハイライト機能があります。これは、highlight.jsを利用しています。しかし、Cocoon設定では、ちゃんとハイライト表示にチェックがつけたのですが、記事内のソースコードがそのままでした。これまで うまくコードハイライトが表示されない原因は、「スクリプトの遅延処理などのほかのプラ...

chiilabo.com

[JavaScript]下にスクロールするとヘッダーメニューを半透明にするようにした

Xのタイムラインを見ていたら、画面のメニューバーの透過度が上下のスクロールに応じて変化していることに気づきました。少し下にスクロールすると半透明になり、少し上にスクロールすると元に戻っています。自分のサイトのヘッダーメニュー（mobile-header-menu-buttons）でも、このような処理をするように、JavaScriptを作りたいと思います。画面内の情報の表示範囲が増えるからです。javascript.jsとstyle.css機能ユーザーがページを下にスクロールす...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。