AndroidやiOS、PCやネットのちょっとした情報めも

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

公開日 2015年2月10日更新日 2017年5月15日カテゴリー WordPress

Twenty Fourteen

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;
}
に変更する。

タグ: , ,
こちらの記事もオススメです
« 前の記事
次の記事 »

TOPへ
戻る