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

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

公開日 2016年10月24日更新日 2019年9月22日カテゴリー WordPress

Twenty Sixteen

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

好みの問題ではあるが少し気になる箇所があったため、自分用にカスタマイズ。

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

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

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

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

サイトの外枠をなくす

/* 左右 */
.site {
margin: 0;
}
/* 上下 */
body:not(.custom-background-image):before,
body:not(.custom-background-image):after {
height: 0;
}

背景色を変える

サイト外枠は
body {background-color: #ffffff;}

サイト背景は
.site {background-color: #ffffff;}

サイトページは
.site-inner {background-color: #ffffff;}

サイトページの幅を変える

.site-inner {max-width: 1280px;}

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

style.cssに記述

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

「投稿者」を非表示

style.cssに記述
.vcard {
display: none;
}
もしくは
.author {
display: none;
}

メインエリアのテキストリンクの影(下線)を消す

style.cssに記述
#primary a {
box-shadow: none;
}

メインエリア上部のボーダー線を消す

style.cssに記述
.page-header {
border-style: none;
}

見出しを修正

style.cssに記述
.entry-content h2 {
font-size: 1.5rem;
}

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

TOPへ
戻る