WordPressのテーマTwenty Fourteenのカスタマイズ

2015年2月10日 2017年5月15日 WordPress

WordPressの公式テーマ「Twenty Fourteen」は3カラムデザインでレスポンシブレイアウトに対応したテーマで、PC、スマホ、タブレットなど様々な画面サイズに合わせて表示することができる。

初期のままだと左寄せに表示されたり、小文字が大文字で表示されたりするので自分用にカスタマイズ。。

テーマを修正するにあたって

Web上で編集するならサイト管理画面からログイン後、外観　→　テーマの編集で表示されるスタイルシート(style.css)画面で修正を行うことができる。

だが、ヘッダーやフッダーなども調整するならFTP接続でWordPressをインストールしたホストにアクセスして、wp-content/themes/twentyfourteenディレクトリ内にあるheader.php、footer.phpを修正する必要がある。

style.cssやheader.phpなどはテーマを更新（アップデート）すると上書きされるので直接修正するのではなく編集用の子テーマを作って、そちらでカスタマイズした方がいい。もし直接修正するならバックアップを忘れずに。
[ad#ads]

各ページのタイトルを修正

style.cssに記述

/* トップページとなる固定ページのタイトル */
.home .page .entry-title {
display: none;
}
/* 固定ページのタイトル */
.page .entry-title {
font-size: 1.5rem;
}
/* 投稿ページのタイトル */
.post .entry-title {
font-size: 1.5rem;
}

見出しを修正

style.cssに記述
.entry-content h2{
font-size: 1.5rem;
}
もしくは
.site-content h2{
font-size: 1.5rem;
}

左寄せにを中央揃えにしたい場合

スタイルシート（style.css）の末尾に
.site {
margin-left: auto;
margin-right: auto;
}
を追記する。

幅を変えたい場合（初期値は1260px）

スタイルシート（style.css）内記載の
.site {
max-width: 1260px;
}
と
.site-header {
max-width: 1260px;
}
の値を変更する。

タイトルやメニューなどで小文字が大文字になって表示されるのを修正する場合

スタイルシート（style.css）内記載の
text-transform: uppercase;
をすべて
text-transform: none;
に変更する。

投稿者名を非表示にしたい場合

スタイルシート（style.css）内記載の
.single .byline,
.group-blog .byline {
display: inline;
}
を
.single .byline,
.group-blog .byline {
display: none;
}
に変更する。

タグ: WordPress, カスタマイズ, テーマ

• WordPressのインストールから初期設定まで
• WordPressのカスタマイズ
• 使用中のテーマが壊れているため、デフォルトのテーマに戻します。のときの対処
• シンプルでプラグイン不要なWordPressテーマSimpler I
• WordPressのテーマTwenty Sixteenのカスタマイズ
• WordPressの子テーマの作り方