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

おすすめの記事

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

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

fluentdと連動して集計処理を行うNorikraの導入方法

fluentdと連動して集計処理を行うNorikraの導入方法

サーバで管理していたWordPressをローカル環境に移行する方法

サーバで管理していたWordPressをローカル環境に移行する方法

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決まり!

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決…

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組み…

最新のXAMPPをインストールし、安全・高速に運用する方法

最新のXAMPPをインストールし、安全・高速に運用する方法

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集…

SNSのカウントをキャッシュするWordPressのプラグインを作成しました

SNSのカウントをキャッシュするWordPressのプラグインを作成し…


いただいたコメントなど

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

コメントを残す

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

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