リスティング広告運用代行正規代理店のASUE

2014年03月12日 Web制作

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

こんにちは!
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;
}

最後にまとめ

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

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

ASUE通信編集部

ASUE通信編集部

ASUE通信の編集部です。みなさんのお役に立てるような情報を更新していきます!

RELATED POST

関連記事

ASUEの最新情報を
お届けします。

お電話でのお問い合わせ

ASUE株式会社へのお電話でのお問い合わせは0120-212-183まで! ASUE株式会社へのお電話でのお問い合わせは0120-212-183まで!

※本ダイヤルはリスティング広告認定資格者が対応いたします。

[営業時間]9:00~18:30 [定休日]土・日・祝

メールでのお問い合わせメールでのお問い合わせ

ページ上部へ戻る