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でテーブルの回り込み

おすすめの記事

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャッシュの仕組み

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャ…

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

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

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…

Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法

Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する…

自前の国別IPv6、IPv4アドレス割当リストを作成しよう

自前の国別IPv6、IPv4アドレス割当リストを作成しよう

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

GMO系列のホスティングサービスでGmailへメールが送信できない不具合が発生中

GMO系列のホスティングサービスでGmailへメールが送信できない…

作業効率を飛躍的に向上させる!実務で使うIllustratorのショートカット一覧

作業効率を飛躍的に向上させる!実務で使うIllustratorのショー…


いただいたコメントなど

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

コメントを残す

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

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