WPテーマ「Twenty Fourteen」の微調整:サイト幅、中央揃え、投稿者名の削除

2014年03月12日

2019年04月12日

こんにちは!
ASUEのカズです!

突然ですが、今年のさくらの開花っていつか知っています?

情報元:Weather Map

情報元:Weather Map

信じられます?来週には九州でさくらが咲いてるらしいです。
あまりの寒さに春が来ていることを忘れそうですが、やっぱり春は近づいてるんですね!

さて、春から新しいワードプレスを使ってみようかな?という方のために、ちょっとしたTIPをご紹介です。
(導入が強引過ぎる?(笑))

Twentyfourteenって?

2014年には、私たちのデフォルトテーマでなめらかでモダンなデザインのレスポンシブなマガジンサイトを創ることができます。Twenty Fourteenのホームページより(訳:ASUEカズ)

テーマのプレビュー

ワードプレス使っている方は基本的になにかしらのテーマを使っていると思うのですが、Twenty Fourteenは最初から入っている基本のテーマになります。
今、最新のワードプレスをインストールするとこれが選択されています。

特徴は、レスポンシブ(デバイスによって配置や画像の大きさが変わる)であるところと、そのデザインです。

そんなTwenty Fouteenを基にいろいろ変更するためのTIPを紹介します。
今回はCSSのみを使った方法の紹介ですので、phpに関する知識は必要ありません!

カスタマイズする前には、まず子テーマの作成が必要ですので、こちらのサイトなどを参考に、子テーマを作成してくださいね。

サイトの幅決め

このテーマは最大1260pxで作られていますが、「そんなに大きくなくていいよ!」という方は最大幅を変えましょう!

.site {
	max-width: 1260px;
}

数値を変更して追加。

左寄せじゃなくて中央揃えにしたい

ある意味一番の特徴で、一番解消したいことかもしれませんが……サイト全体が左に寄ってるんですよね(^^;
特に、上記の方法で幅を狭めると気になります……

.site {
	margin-left: auto;
	margin-right: auto;
}

を追加。

投稿者名とかもろもろ隠したい

 

このように表示される情報を隠したい場合は、CSSで表示させないようにしてしまいます。
※あくまでCSSで「表に出ない」だけですので、HTMLに情報は残ります。
重要な情報は掲載せず、phpの編集をお勧めします。

シンプルに消したい項目に対してdisplay:noneを追加するだけです。

時間
.entry-date {
	display: none;
}
投稿者
.author-description {
	display: none;
}
コメントをどうぞ
.comment-link {
	display: none;
}

「コメントをどうぞ」はいらないけど、コメントは欲しい場合です。
コメント自体を許可しない場合は、各投稿での設定してください。

全部まとめて
.entry-meta {
	display: none;
}

最後にまとめ

いろいろ変えられるのがワードプレスの魅力♪
春までに新しいサイトを用意してみましょう!

今後も役に立ちそうな情報がありましたら、発信していきます^^