１．使用テーマ
wordpressではデザインを変えるのに「テーマ」というのを使っていて、「テーマ」は多数公開されていて簡単に切り替えできます。現在、当ブログのテーマはwordpress同梱の「TwentyFourteen」というのを使ってます。公開されているテーマを20個くらい試してみて、とりあえずこれにしました。
このテーマはブラウザの表示幅によって表示の仕方が異なり、(1)広い状態では記事とサイドバー、(2)中間の状態では記事の下に(1)のサイドバーが表示され、(3)狭い状態では記事タイトル一覧の下に(1)のサイドバーが表示されます。(1)と(2)の切り替わる幅も広過ぎるような気もするのだけど、より気になったのは、記事本体の表示幅が狭すぎるという事。
２．記事本体幅の拡張
記事本体の幅を広げました。調べてみるとTwentyFourteenのスタイルシート内で max-width:474px となっている。wordpressでは、このような変更を行う方法として、バージョンアップの影響を受けにくい「子テーマ」の作成を推奨している。
「TwentyForteen-child]というのを作成。この中のスタイルシートに変更する部分のみを記述。
３．表(table)表示時の空白行削除
ブラウザに表示するものは、htmlを使って色々なタグをつけて記述する事になっている。ブログは、単に普通のテキストとして書いた文章に、適切にタグを挿入してブラウザに送っています。表を書くにはtableというタグを使って記述するのだが、wordpressはこれらにも余分な改行タグを追加してしまうので、複雑な表ほど、表の前に空白行がたくさん入ってしまう。
これはwp-includes/formatting.phpの中にある、wpautopというfunctionが行っている。このfunctionをコピー＆修正したwpautop2というのを子テーマに書いて、オリジナルのwpautopの代わりにwpautop2を使うように設定して解決した。
４．子テーマの内容
子テーマは２ファイルからなる
＜wp-content/themes/twentyforuteen-child/style.css＞
/*
Theme Name: Twenty Fourteen Child
（途中省略）
*/
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 640px; /* original - 474px; */
}
<?php
function wpautop2( $pee, $br = true ) {
（途中省略：オリジナルと同じ）
// table関係のtag後にある<br />を削除する inserted 2016-5-25 清水
$pee = preg_replace( "/(<table[^<>]*>|<\/table>|<\/?tbody>|<\/?tr>|<\/?td>)\s*
return $pee;
}
remove_filter('the_content', 'wpautop');
add_filter('the_content', 'wpautop2');
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); // 親テーマの指定
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>