palm84.com

革命的愛熊主義者同盟！

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

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

Firefox HTML CSS はてな Firefox拡張 AA

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','ＭＳ Ｐゴシック',sans-serif;
font-size:16px;
line-height:18px;
|<
<<
  • HTML表示
font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','ＭＳ Ｐゴシック',sans-serif;
font-size:16px;
line-height:18px;
アスキーアート - Wikipedia

strong などのhtmlタグの追加可

font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','ＭＳ Ｐゴシック',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','ＭＳ Ｐゴシック',sans-serif;
font-size:16px;
line-height:18px;
 ||<
<<
  • HTML表示
font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','ＭＳ Ｐゴシック',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','ＭＳ Ｐゴシック',sans-serif;
font-size:16px;
line-height:18px;
 ||<
<<
font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','ＭＳ Ｐゴシック',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">
　　　 　ｒu‐┐__ 　 ｒu‐┐
　　　　.} Ω_{' ⌒´ヾｰ､.{　
　　　　´ｒｰﾞｆ（ﾉﾉ）)））!i.｢
　 　 　 ﾉ乂k(lﾟ ヮﾟﾉ'ﾉ乂　　
　　　 ´ ' 　 と}i凹{つ 　 '　
　　　　 　　ｆく/{__}〉
　　　　　　 ´　し'ﾉ　 
</pre><
<<
  • HTML表示
　　　 　ｒu‐┐__ 　 ｒu‐┐
　　　　.} Ω_{' ⌒´ヾｰ､.{　
　　　　´ｒｰﾞｆ（ﾉﾉ）)））!i.｢
　 　 　 ﾉ乂k(lﾟ ヮﾟﾉ'ﾉ乂　　
　　　 ´ ' 　 と}i凹{つ 　 '　
　　　　 　　ｆく/{__}〉
　　　　　　 ´　し'ﾉ　
アスキーアート - Wikipedia
CSSで class="kuma" を作成

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

.kuma {
font-family: 'ＭＳ Ｐゴシック','MS PGothic',Monapo,'IPA モナー Pゴシック',IPAMonaPGothic,Mona,'梅Pゴシック',Textar,aahub_light,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版