WordPressの整形済みテキストがはみ出す


投稿日:2011年9月24日
  • 0
  • 0



WordPressではhtmlなどを表示するにあたり整形済みテキストを選択する。

整形済みテキストを投稿するには

<pre></pre>

で囲む文章を打ちますが、長いスクリプトの場合は改行がされず右に永遠はみ出し続ける。今まではテーブルで編集してましたが、どうにもスクリプトを書き出すことが多いので面倒になりました。
WordPressの編集画面でメニュにある「外観」から「テーマ編集」を選んで以下のようにpreの部分を編集。

pre {
	background-color: #f0f0f0;
	border: 1px solid gray;
	color: #222;
	line-height: 18px;
	margin-bottom: 18px;
	padding: 1.5em;
	/* 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;  
}

するとメインページのサイズ内で改行されます。

現在は「SyntaxHighlighter」を使っているのでこの設定も使ってません。


現在のページを共有する



現在のページに関連する記事

WordPressにSyntaxHighlighterを導入しよう WordPressにSyntaxHighlighterを導入しよう
WordPressで表(テーブル)を簡単に追加したい WordPressで表(テーブル)を簡単に追加したい
WordPressの整形済みテキストがはみ出す これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方
WordPressのデザインを更新 WordPressのデザインを更新
WordPressの整形済みテキストがはみ出す SyntaxHighlighterでConsolasを使うと日本語が文字化けする際の対処法
ロリポップで404.htmlを変える ロリポップで404.htmlを変える
PukiWikiでテーブルの回り込み PukiWikiでテーブルの回り込み

おすすめの記事

「このアプリがシャットダウンを妨げています」と表示されるがアプリがわからない場合の対処法

「このアプリがシャットダウンを妨げています」と表示されるが…

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…

FuckAdBlockを利用して自由自在にAdblock対策をする方法

FuckAdBlockを利用して自由自在にAdblock対策をする方法

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集できる投稿画面を作る方法

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集…

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

UWSCでEXCELの作業を自動化する方法

UWSCでEXCELの作業を自動化する方法

公式ドキュメントよりも詳しいTinyMCEの使い方(基本編)

公式ドキュメントよりも詳しいTinyMCEの使い方(基本編)


いただいたコメントなど

  1. ピンバック: 長い文章の記事を書いていてはみ出るのを防ぐ方法。 | もんき〜の日記

コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。