「pre」タグで改行のないソースコード・ブックマークレットを紹介しよう!

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。部長ナビ(@nabi_1080)です

紹介したTweetbot 4の「Safariで見ているページをTweetbot 4でツイートする」という神がかったブックマークレットですが、Tweetbot 3のモノはあったんですけど、それをそのまま使うとダメだったので、調べて、いじって、Tweetbot 4用にして紹介しました

Tweetbot 4で「Safari」から直接そのページをツイートするためのブックマークレットを紹介!
Tweetbot 4で「Safari」から直接そのページをツイートするためのブックマークレットを紹介!
すっかりTweetbot 4野郎の部長ナビ(@nabi_1080)です。ハマっております。Twitter。面白いね〜 で、gori.m...

すると、多くの方から「iPhoneで見ているけど、コードが右にはみ出て、コピーがうまくできない」というご指摘が・・・

え?と思って自分でiPhone 6s Plusで見てみたら、本当だ・・・。これ、改行されないんだ・・・。

っつー事で調べました

preタグというモノを使うために、CSSにコードをブチ込む

調べるとたくさん出て来るので、私ごときが紹介するまでもないですが、一応、紹介させていただきます

WordPressの「外観」「テーマの編集」で、style.cssに、コードをブチ込みます

pre {
    /* Mozilla */
    white-space: -moz-pre-wrap;
    /* Opera 4-6 */
    white-space: -pre-wrap;
    /* Opera 7 */
    white-space: -o-pre-wrap;
    /* CSS3 */
    white-space: pre-wrap;
    /* IE 5.5+ */
    word-wrap: break-word;
    }

preタグで、改行のないソースコードを囲むとあら不思議

不思議なんですけど、勝手に改行されます。実際にお見せしましょう

Tweetbot 4のブックマークレットです

ほら、改行されて、枠まで付くでしょ?コピーし放題ですよ、これ

マジでスゴいので、使ってみて下さいね〜

スポンサーリンク

この記事をシェアする!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索