はてなブログの記法及びCSSに関する質問です。


たとえば
http://doyaling.hatenablog.com/entry/2015/02/22/010926
このエントリで、薄いグレーになっている引用部分は、

>|?|
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
||<

 という記号で挟んであります。
 プログラムのソースコードを書くときに使うものだと認識しているのですが、長い行について、
 ①一切折り返さないように(長い行のときは横スクロールするように)する
 ②上記のURLのようなやつは、単語の途中で折り返すようにする
 というのはそれぞれ、可能なのでしょうか?

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2015/02/28 16:13:31
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

ポイント100pt

①一切折り返さないように(長い行のときは横スクロールするように)する
②上記のURLのようなやつは、単語の途中で折り返すようにする

①は、できます。②は、ちょっと微妙な感じ。

id:doyaling さんが使っているテーマだと、PRE タグに white-space: pre-wrap というスタイルが指定されています。
この指定が、単語の切れ目で改行を入れています。

white-space: pre というスタイルを指定すると、CSS で行の折り返しをせず、表示領域を超えた場合にはスクロールバーが表示されます。

単語の途中での折り返しは、word-wrap: break-word で指定します。
ただ、この指定は「必要に応じて」ということらしく、単語の切れ目があると、そこを優先して改行をします。
# 昔の IE は、ちょっと挙動が違ったはず

自分のブログでの見た目を一括で変えたいのであれば、「デザイン」の「デザインCSS」で以下のように書けば良いと思います。

pre {
    white-space: pre;
}

記事毎に変えたいのであれば、スーパーPRE記法を、DIV などで括って、CSS を個別に設定します。

<style>
#div-1 pre {    /* id="div-1" の中の PRE */
    white-space: pre;
}
</style>
<div id="div-1">    <!-- これで括る -->
>|?|
var url1 = "http://localhost/oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
var url2 = "http://localhost/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/";
 ||<        ※行頭の空白は、本当は入れない
</div>

はてな記法モードだと、記事中の style の中も行単位で P でくくられちゃうので、本当はこう書きます。

<!-- style を、一行で書く -->
<style> #div-1 pre {    /* id="div-1" の中の PRE */ white-space: pre; } </style>
<div id="div-1">    <!-- これで括る -->
>|?|
var url1 = "http://localhost/oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
var url2 = "http://localhost/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/";
 ||<        ※行頭の空白は、本当は入れない
</div>

ぼくのはてなブログで試してみてるので、見た目の違いを確認してみてください。
http://a-kuma3.hatenablog.com/entry/2015/02/22/221453

id:doyaling

ありがとうございます.
大変助かりました.

2015/02/28 16:13:19

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません