賢威8カスタマイズ覚書

バラ

賢威8が正式リリースされました。

その賢威8をサクッとカスタマイズしてみたので、どんな変更を加えたのかについて覚書を残しておきます。

 

賢威8に加えたおもなカスタマイズ

  1. スマホのタイトル表示を追尾させないようにした
  2. タイトルロゴのピクセルを指定した
  3. ヘッダーと記事タイトル上のボーダーを消した
  4. 記事下に表示されるページナビゲーション(ページ送り)を非表示にした
  5. 賢威8に用意されているデフォルトのボタンの影を消した
  6. イントロのCSSを追加した

 

※ 上記のカスタマイズはCSSを直接編集することはせず、テンプレートの「追加CSS」にCSSを追記しました。

そうすることにより、おこなったカスタマイズを一覧で確認することができ、管理のしやすさが向上しました。

今まではCSSを直接編集していましたが、それだとどこを編集したかわからなくなることもあり、管理の面でも問題がありました。

今後はこのやり方に変えようと思います。

 

「追加CSS」に記述したCSSの一覧は下記のとおり。

/*スマホタイトル追尾を停止*/
@media only screen and (max-width : 736px){
.keni-header_wrap {
   position: static!important;
   }
.keni-container.fn-keni-container {
   padding-top: 0!important;
   }
}


/*ロゴのピクセル指定*/
.keni-header .site-title,
.keni-header_col1 .site-title{
	max-width: 280px;
}


/*1カラムの横幅調整*/
.col1 .keni-section_wrap{
 max-width: 800px;
	}


/* h3上部のボーダーを非表示 */
h3 {
     border-top: none;
}


/*ページ送りを非表示*/
.nav-links{display:none}


/*ページ上部のボーダーを非表示*/
.keni-header_wrap{
	padding-top: 0px;
	background-size: 0px 0px;
}


/*記事タイトル上のボーダーを非表示*/
.keni-section h1{
	background-size: 0px 0px;
}


/*リンク色・アンダーライン*/
a {
    color: #27B1DB;
}

a:-webkit-any-link {
    text-decoration: none;
}

.keni-section h1 a, .keni-section h3 a, .keni-section h4 a, .keni-section h5 a, .keni-section h6 a {
    color: #4F81BD;
	  text-decoration: underline;
}


/*ボタンの影を非表示*/
.btn {
    box-shadow: none;
}


/*イントロを表示*/
.intro {
    color: #888;
    font-size: 125%;
}


/* Q&Aのカラー変更 */
.qa-list dt::before{
	background: #63D8EB;
	content: 'Q';
}
 
.qa-list dd::before{
	background: #FDA5B7;
	content: 'A';
}

 

カスタマイズ1:スマホのタイトル追尾

賢威8はスマホでスクロールするとタイトルが追尾する機能があります。

見る人によっては本文が見にくくなると感じたのでカスタマイズで追尾を停止しました。

サイトタイトルと同様にハンバーガーメニューも追尾させたくない場合は、下記の記述を追加すればOK。

@media only screen and (max-width : 736px){
.keni-gnav_btn {
   position: absolute;
}
}

 

カスタマイズ2:タイトルロゴのピクセル指定

賢威8ではロゴ画像のピクセル指定がデフォルトの状態でできないので、ピクセル数が小さめの画像をアップするしかありません。

ところが、小さなロゴ画像はぼやけてきれいに見えません。

ロゴがきれいに見えるようにするには、かなり大きめの画像をアップし、それにたいしてピクセルを指定あげればよいということになります。

このやり方は賢威以外のテンプレートでも応用できますね。

 

カスタマイズ3:ボーダー

いまはシンプルなWebデザインが主流なので、トップページと投稿ページのボーダーは必要ないと考えました。

アーカイブページなどのボーダーはアクセントとしてそのままにしてあります。

 

カスタマイズ4:ページナビゲーション

記事下に表示されるページナビゲーション(ページ送り)は「次のページ」と「前のページ」のリンクです。

賢威8は記事ごとにで関連記事を設定できるので、ページナビゲーションは必要ないと考えました。

 

カスタマイズ5:ボタン

ボタンの影を消して見た目がすっきりとしたマテリアルデザインにしました。

 

カスタマイズ6:イントロ

イントロというのは、ページの冒頭部分ですこし大きめに、本文とはちがった色で表示される文字のことです。

このページの冒頭でもイントロを使っています。

「賢威8が正式リリースされました」という部分ですね。

ワードプレスがGutenbergであれば、エディターの「高度な設定」に「intro」と記述するだけで、そのブロックにイントロの装飾が加わります。

(※ イントロを使用するには、上記の「イントロを表示」という部分のCSSを追記する必要がります)

その他の変更

スマホフッターパネルを非表示

「賢威の設定」からスマホフッターパネルを非表示にすることが可能。

コピーライトの表示

コピーライトの西暦を自動取得に。テーマフッター (footer.php)の52行目をつぎのとおり変更。

<small>© <?php echo date('Y'); ?> サイトタイトル</small>