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

おすすめの記事

Mac OS 9時代のIDE接続のHDDをMacDrive 10を利用してWindows 10で読み込む方法

Mac OS 9時代のIDE接続のHDDをMacDrive 10を利用してWindows 10…

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

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

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

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

「アマレコTV」でWindows 10のPC画面に表示されている動画を撮影する方法

「アマレコTV」でWindows 10のPC画面に表示されている動画を撮…

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

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

全く新しい決済サービスPayPal.Meの導入と使い方を解説

全く新しい決済サービスPayPal.Meの導入と使い方を解説

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ


いただいたコメントなど

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

コメントを残す

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

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