【WordPress】【賢威7カスタマイズ】サイトの印象が変わりやすいカスタマイズ4つ

賢威6.1から賢威7への移行

もともと賢威6.1だったのですが、賢威7プリティー版が可愛いすぎて思わず載せ替えました。
賢威7WordPress版テンプレートプリティー版をダウンロードして、アップロードして、有効化。
プリティー版はそのままでも十分なのですが、印象が変わりやすいカスタマイズのみメモします。

カスタマイズ

  1. Webフォントの導入
  2. メインコピーを入れた時のメイン画像の縦幅を広くする
  3. 「TOPに戻る」の画像を変更
  4. 背景色を変える

1、Webフォントの導入

印象が全然変わってくるかわいいWebフォントは、どうしても使いたいです。
全部するとさすがに重くなるので、視覚効果の高い部分でだけ利用します。

  • サイトタイトル
  • グローバルメニュー
  • カテゴリの文字列
  • メインのコピーの文字列

準備

  1. Webフォントをダウンロードしてサイトのサーバーにアップする。
  2. アップしたWebフォントをCSSで指定する

ここでは「テーマフォルダ直下に」Webフォントのファイル群であるttf,eotファイルを配置しています。
ここではWebフォントの名前は「APJapanesefont」と指定します。名前は任意でよくて、ここでの設定名と、各セレクタでの指定名が同じであればいいんです。

base.css
@font-face {
font-family: 'APJapanesefont';
src: url(APJapanesefontT.eot);
}

@font-face {
font-family: 'APJapanesefont';
src: local('APJapanesefont'),
local('APJapanesefont'),
url('APJapanesefontT.ttf') format('truetype'); 
}

各セレクタでWebフォントを指定

サイトタイトル
.site-title{
	display: table-cell;
	margin: 0;
	font-size: 2.7em;
	font-family: APJapanesefont;

}
グローバルメニュー
.global-nav-in li a{
	display: block;
	min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/
	padding: 1.1em; /*画像をメニューにする場合は値を0に*/
	color: #fff;
	text-decoration: none;
        font-family: APJapanesefont;
        font-size: 1.2em
}
カテゴリ
.global-nav-in li a{
	display: block;
	min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/
	padding: 1.1em; /*画像をメニューにする場合は値を0に*/
	color: #fff;
	text-decoration: none;
        font-family: APJapanesefont;
        font-size: 1.2em
}
メインのコピー
.main-copy{
	margin-bottom: 20px;
	font-size: 1.8em;
	text-align: center;
	font-family: APJapanesefont;
}

2、メインコピーを入れた時のメイン画像の縦幅を広くする

横幅いっぱいのヘッダーが簡単に設定できるのも賢威7のいい所のひとつ。
メインコピーの文字列を設定し、かつ普通の横幅広の写真をメイン画像に設定すると画像の幅が狭くなったので、広げました。

設定前

スクリーンショット 2015-12-31 1.32.45

設定後

スクリーンショット 2015-12-31 1.33.08

base.css
.main-image-in-text-cont{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 3em;
        padding-top: 100px;
        padding-bottom: 100px;
}

しかし簡単にダッシュボードからフルワイドヘッダーの画像がぺっと設定できて、美しくレスポンシブになる賢威7。便利です。

3、「TOPに戻る」の画像を変更


ページの先頭へ

好きな画像をサーバーにアップして、 ハイライト行のところでその画像をアップロードした場所を設定します。

footer.php

私のサイトではTOPへ戻る画像はHTML5のCSSでくるっと回しています。
page-topのhoverとa、-webkit周りなどまるまる追記してます。

base.css
/*ページトップボタン*/
.page-top{
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99;
	line-height: 1.2;
	margin-bottom: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;

}
.page-top:hover{
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);}

.page-top a{
 	width: 80px;
    height: 80px;
    display: table-cell;
    vertical-align: middle;
    border-radius: 800px;
    -moz-border-radius: 800px;
    -webkit-border-radius: 800px;
}

4、背景色を変える

私の場合は色でなくテクスチャを変えることにしてbackground-imageを追記しました。
フリーのテクスチャ素材を拾ってきて、適当なところにアップします。
今回はテーマフォルダ/images/common/のなかに入れました。

base.css

まずはボディー部分だけ変える場合

.main-body{
	margin-top: 2em;
	padding-bottom: 30px;
	background-image: url(./images/common/ricepaper2.jpg) ;
}

ヘッダー部分も変える場合

body{
	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	background-color: #faf9f5;
	background-image: url(./images/common/ricepaper2.jpg) ;
}

おわりに

メイン画像はPAKUTASOからいただいて、少しごにょごにょしました。
好きな画像です。

賢威について知りたい方はこちら