palm84.com

革命的愛熊主義者同盟!

【Firefox拡張】Format Linkではてなブログでの引用[blockquote]コピーいろいろ【めちゃ私的】

f:id:palm84:20181231140212p:plain

はいはい、どもども。省力化ってやつですな(笑)。めっちゃ小ネタみたいなかんじですけど... ( ´艸`)

まだまだ稚拙な出来なのでちょこちょこ修正すると思います。ご容赦をば...

INDEX

文章(段落)の引用

ごく普通に(?)文章(段落)等を引用する場合...

  • スクリーンショット

f:id:palm84:20181231140212p:plain

  • Format Link
>{{url}}:title:bookmark>\n<p>{{text}}</p>\n<<\n
  • コピー内容
>https://diary.palm84.com/entry/20180802/1533213675:title:bookmark>
<p>新規ウィンドウではなく新規タブで開かせる設定について。これはオプションにある「新しいウィンドウではなく新しいタブに開く」設定と連動してます。</p>
<<
  • HTML表示

新規ウィンドウではなく新規タブで開かせる設定について。これはオプションにある「新しいウィンドウではなく新しいタブに開く」設定と連動してます。

Firefox61で新規タブを開く設定【user.js , about:config】 - Palm84 某所の日記

2ch(5ch) レスを引用

注意点
  • p 要素で引用
  • CSSで white-space:pre-wrap を指定し、表示状態をを2chスレと同じにする
  • 行頭の一部の記号に対する処置が必要になることがある
  • スクリーンショット

f:id:palm84:20181231140215p:plain

  • Format Link
>{{url}}:title:bookmark>\n><p style=\"white-space:pre-wrap!important;line-height:1.5!important;\">[]\n{{text}}\n[]</p><\n<<\n
  • コピー内容
>https://egg.5ch.net/test/read.cgi/software/1516822406/:title:bookmark>
><p style="white-space:pre-wrap!important;line-height:1.5!important;">[]
24名無しさん@お腹いっぱい。 (アウーイモ MM77-BFHE)2018/01/25(木) 13:21:28.04ID:zlIQs6G1M>>139
Firefox 57になってからMacとLinuxでマウスジェスチャー系の拡張が
右クリックするとすぐにコンテキストメニューが出てきて使えなくなってたようだけど
Firefox 58に更新したら、Linuxでは不具合無く使えるようになってるな。
Macは家に無いから知らんが。

Google Chromeのマウスジェスチャー系の拡張でも同じ不具合が出てたからOSが問題だったのかな?
とりあえずFirefoxではブラウザ側で対策したようだ。
[]</p><
<<
  • HTML表示

24名無しさん@お腹いっぱい。 (アウーイモ MM77-BFHE)2018/01/25(木) 13:21:28.04ID:zlIQs6G1M>>139 Firefox 57になってからMacとLinuxでマウスジェスチャー系の拡張が 右クリックするとすぐにコンテキストメニューが出てきて使えなくなってたようだけど Firefox 58に更新したら、Linuxでは不具合無く使えるようになってるな。 Macは家に無いから知らんが。 Google Chromeのマウスジェスチャー系の拡張でも同じ不具合が出てたからOSが問題だったのかな? とりあえずFirefoxではブラウザ側で対策したようだ。

Mozilla Firefox Part335

pre 要素を引用

注意点
  • 元ソースが pre、または br タグで改行
  • pre 要素全体をドラッグで選択する、直前直後の改行も含めるかんじで
  • pre 内で strong, span など htmlタグ使用可
  • シンタックスハイライトは使用不可
  • 行頭の一部の記号に対する処置が必要になることがある
  • スクリーンショット

f:id:palm84:20181231140218p:plain

  • Format Link
>{{url}}:title:bookmark>\n>|\n{{text}}\n|<\n<<\n
  • コピー内容
>https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%B9%E3%82%AD%E3%83%BC%E3%82%A2%E3%83%BC%E3%83%88:title:bookmark>
>|
font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','MS Pゴシック',sans-serif;
font-size:16px;
line-height:18px;
|<
<<
  • HTML表示
font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','MS Pゴシック',sans-serif;
font-size:16px;
line-height:18px;
アスキーアート - Wikipedia

strong などのhtmlタグの追加可

font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','MS Pゴシック',sans-serif;
font-size:16px;
line-height:18px;
アスキーアート - Wikipedia

pre 要素を引用 - スーパーpre

注意点
  • 特殊記号なども全くそのまま表示
  • 元ソースが pre、または br タグで改行
  • pre 要素全体をドラッグで選択する、直前直後の改行も含めるかんじで
  • pre 内でhtmlタグ使用不可
  • シンタックスハイライト使用可
  • スクリーンショット

f:id:palm84:20181231140221p:plain

  • Format Link
>{{url}}:title:bookmark>\n>||\n{{text}}\n||<\n<<\n
  • コピー内容
>https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%B9%E3%82%AD%E3%83%BC%E3%82%A2%E3%83%BC%E3%83%88:title:bookmark>
>||
font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','MS Pゴシック',sans-serif;
font-size:16px;
line-height:18px;
 ||<
<<
  • HTML表示
font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','MS Pゴシック',sans-serif;
font-size:16px;
line-height:18px;
アスキーアート - Wikipedia

シンタックスハイライトcss を指定

>https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%B9%E3%82%AD%E3%83%BC%E3%82%A2%E3%83%BC%E3%83%88:title:bookmark>
>|css|
font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','MS Pゴシック',sans-serif;
font-size:16px;
line-height:18px;
 ||<
<<
font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','MS Pゴシック',sans-serif;
font-size:16px;
line-height:18px;
アスキーアート - Wikipedia

AA(アスキーアート)を引用

注意点
  • 元ソースが pre、または br タグで改行
  • CSS でAA用フォントを指定する、長くなるので class 属性指定がいいかと
  • pre 要素全体をドラッグで選択する、直前直後の改行も含めるかんじで
  • pre 内で strong, span など htmlタグ使用可
  • シンタックスハイライトは使用不可
  • 行頭の一部の記号に対する処置が必要になることがある
  • スクリーンショット

f:id:palm84:20181231141336p:plain

  • Format Link(※ class="kuma" を指定)
>{{url}}:title:bookmark>\n><pre class=\"kuma\">{{text}}\n</pre><\n<<\n
  • コピー内容
>https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%B9%E3%82%AD%E3%83%BC%E3%82%A2%E3%83%BC%E3%83%88:title:bookmark>
><pre class="kuma">
     ru‐┐__   ru‐┐
    .} Ω_{' ⌒´ヾー、.{ 
    ´rー゙f(ノノ))))!i.「
      ノ乂k(l゚ ヮ゚ノ'ノ乂  
    ´ '   と}i凹{つ   ' 
       fく/{__}〉
       ´ し'ノ  
</pre><
<<
  • HTML表示
     ru‐┐__   ru‐┐
    .} Ω_{' ⌒´ヾー、.{ 
    ´rー゙f(ノノ))))!i.「
      ノ乂k(l゚ ヮ゚ノ'ノ乂  
    ´ '   と}i凹{つ   ' 
       fく/{__}〉
       ´ し'ノ  
アスキーアート - Wikipedia
CSSで class="kuma" を作成

ウチではこんなかんじ...

.kuma {
font-family: 'MS Pゴシック','MS PGothic',Monapo,'IPA モナー Pゴシック',IPAMonaPGothic,Mona,'梅Pゴシック',Textar,sans-serif;
overflow: auto;
margin: 1em;
padding: 0.5em;
_padding-bottom: 1em;
background-color: #fff0f0 !important;
line-height: 1.1;
font-size: 1em;
border-style: solid;
border-width: 1px;
border-color: #ccc #fff #fff #ccc;
}

記号の編集

行頭の下記の記号があると「はてな記法」と認識されて処置が必要になることがあります。対処法は2通りでしょうか...

  1. 行頭に半角スペースを挿入
  2. 行頭の記号を数値文字参照で置換

はてな記法は使ってなくよく知らないでのまだあるかも... すみません・・・

数値文字参照
記号数値文字参照
*&#42;
+&#43;
-&#45;
=&#61;
\&#092;
|&#124;

行頭に | があるので table 要素表示?

 ____ ∧ ∧
\ /(´~`)\<発展段階
   ̄ ̄ ̄ ̄ ̄
  =みかん=
\|_____|
アスキーアート - Wikipedia

行頭の | を数値文字参照に置換

 ____ ∧ ∧
|\ /(´~`)\<発展段階
| | ̄ ̄ ̄ ̄ ̄|
| |=みかん=|
\|_____|
アスキーアート - Wikipedia

行頭に半角スペース

  ____ ∧ ∧
 |\ /(´~`)\<発展段階
 | | ̄ ̄ ̄ ̄ ̄|
 | |=みかん=|
 \|_____|
アスキーアート - Wikipedia

AAの場合は全角スペースの方がいいかも?

  ____ ∧ ∧
 |\ /(´~`)\<発展段階
 | | ̄ ̄ ̄ ̄ ̄|
 | |=みかん=|
 \|_____|
アスキーアート - Wikipedia

ほなでした。


HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

スラスラわかるHTML&CSSのきほん 第2版

スラスラわかるHTML&CSSのきほん 第2版