2019年版【賢威8】カスタマイズ＆Tips【最新】

賢威8の各種設定

「賢威8」になって、カスタマイズする場所や関数の名称、さらには使用法が「賢威7」とは大きく変わりました。

しかしまだ紹介されているサイトも少なく、ソースコードの解析や試行錯誤が必要になりました。

その結果をHowTo & Tipsとして更新していきます。 備忘録および、同じように悩まれている方へのヘルプになれば幸いです。

※「賢威8」最新バージョン：2018年12月リリース版（Ver 8.0.0.0b5）






ヘッダーの背景色を変える

/keni8-child/base.cssに以下の記述を追加します。

/* ヘッダーの背景色を変更する */
.keni-header_wrap{
	background-color: #B57C51;
}

スポンサーリンク


グローバルメニューの背景色を変える

上に合わせて、グローバルメニューの背景色も変えます。

/keni8-child/base.cssに以下の記述を追加します。


/* グローバルメニューの背景色を変更する */
.keni-gnav_wrap{
	background-color: #B57C51;
}

グローバルメニュー（タブ部分）の背景色を変える

上に合わせて、タブの背景色も変えます。

/keni8-child/base.cssに以下の記述を追加します。


/* グローバルメニュー（タブ）の背景色を変更する */
.keni-gnav_cont{
	margin: 0;
	background: #B57C51;
}

スポンサーリンク


グローバルメニュー（タブ）の下の白い線を消す

/keni8-child/base.cssに以下の記述を追加します。

タブの下に表示される、この白い線の事です。


/* グローバルメニュー（タブ）の下の白い線を消す */
.keni-gnav_inner li a{
	color: #fff; /* グローバルメニューの文字色 */
	border-bottom: 3px solid #B57C51;
}

ヘッダーのロゴ画像を中央に表示する

/keni8-child/base.cssに以下の記述を追加します。

.keni-header .site-title, .keni-header_col1 .site-title {
	float: none;
	max-width: 100%;
	text-align: center;
}

スポンサーリンク


グローバルメニューとトップ画像の間にスペースを入れる

/keni8-child/base.cssに以下の記述を追加します。

これにより、ヘッダー部分と写真の下に空白を作ります。

.keni-mv_wrap{
	padding-top: 1em;
}

サイトの背景色を変更する

/keni8-child/base.cssに以下の記述を追加します。

全体的に「白以外」の基調のデザインになります。

body{
	background-color: #e4dccc; /* サイトの背景色 */
}
.keni-footer_wrap{
	background: #e4dccc; /* フッターの背景色 */
}

スポンサーリンク


他記事のリンクカードを貼る

賢威8になって、特別なプラグインをインストールする必要なく、リンクカードが表示できるようになりました。

［keni-linkcard url="https://xxxx.com/xxx"]

こんな具合です。

2019年【WORDPRESS】Crayon Syntax Highlighterのエラーを解消する
https://empoh.com/2019/03/06/623/
致命的バグ発生 2019年3月現在、「Crayon Syntax Highlighter」に深刻なエラーが発生しています。 その原因と解決方法をお知らせします。 Crayon Syntax Highlighterとは 「 …

また、新しいタブでウィンドウが開かれるように「target=”_blank”」をパラメータとして指定できます。

［keni-linkcard url="https://xxxx.com/xxx" target="_blank"]






h2（見出し２）、h3（見出し３）の上の余白

h2、h3の見出しの上に出来る空白の高さを調整します。

/keni8-child/base.cssに以下の記述を追加します。


/* h2（見出し２）上の余白 */
.keni-section h2{
	margin-top: 40px; /* オリジナルは60px */
}
/* h3（見出し３）上の余白 */
.keni-section h3{
	margin-top: 40px; /* オリジナルは60px */
}

スポンサーリンク


表示が変わらない場合

※ソースを修正したり、画像ファイルを更新しても、自分のPCの表示ではすぐに反映されないことがあります。その場合は次の方法でブラウザのキャッシュ削除を試してみてください。

・Google Chromeの場合、Chrome右上メニューの「…」を押して、「その他のツール」-「閲覧履歴を消去」-「キャッシュされた画像とファイル」を選び「データを消去」を押す。

・Microsoft Edgeの場合、Edge右上のメニューの「…」を押して、「設定」-「閲覧データのクリア」-「クリアするデータの選択」-「キャッシュされたデータとファイル」を選び「クリア」を押す。

※「…」は賢威のボタンではありません。ブラウザの「…」のものです。

スポンサーリンク


「最新の投稿」のサムネイルのサイズを変更する

「【賢威】サムネイル付き最近の投稿：最新の記事」ウィジェットを使用したときの、サムネイル画像のサイズを変更します。

この例では、JETPACKプラグインの「Jetpack（人気の投稿とページ）」の表示に合わせました。

/keni8-child/base.cssに以下の記述を追加します。


/* 最新の投稿 サムネイルのサイズを変更 */
.widget_recent_entries_img .list_widget_recent_entries_img .widget_recent_entries_thumb{
    width: 70px;
    height: 70px;
    margin-top: 10px;
    margin-left: 20px;
}

スポンサーリンク


「最新の投稿」のフォントサイズを変更する

「【賢威】サムネイル付き最近の投稿：最新の記事」ウィジェットを使用したときの、フォントサイズを変更します。

この例では、JETPACKプラグインの「Jetpack（人気の投稿とページ）」の表示に合わせました。

/keni8-child/base.cssに以下の記述を追加します。


/* 最新の投稿 フォントサイズを変更 */
.widget_recent_entries_img .list_widget_recent_entries_img .widget_recent_entries_img_entry_title{
    font-size: 1.4rem;
}

ぐぐたす（google+）ボタンを消す

google+は2019年8月に終了します。

今のうちにSNS（ソーシャル）ボタンを消しておきます。

※2019年4月2日追記
予定が早まり、もう終了してしまいました。


（親テーマ）index.phpの35行目
「sns-btn_gplus」の行をコメントアウトする。

＜!– ＜div class=”sns-btn_gplus” data-url=”＜?php get_page_link(get_the_ID()); ?＞” data-title=”＜?php single_post_title(); ?＞”＞＜/div＞ －－＞

（親テーマ）archive.phpの34行目
「sns-btn_gplus」の行をコメントアウトする。

＜!– ＜div class=”sns-btn_gplus” data-url=”＜?php echo esc_attr( get_term_link( $term_id ) ); ?＞” data-title=”＜?php the_archive_title(); ?＞”＞＜/div＞ －－＞

（親テーマ）template-parts/part-sns.phpの5行目
「sns-btn_gplus」の行をコメントアウトする。

＜!– ＜div class=”sns-btn_gplus” data-url=”＜?php the_permalink(); ?＞” data-title=”＜?php the_title(); ?＞”＞＜/div＞ －－＞

スポンサーリンク


文章を枠で囲む

賢威8で文章を枠で囲むには、base.cssに次のコードを追加します。

/* テキスト枠 */
 .textInFrame {
 font-size: 0.9em;
 border: solid 2px #5bc2d9;
 box-shadow: 0 0 3px 3px #ccc;
 margin:30px 30px;
 padding:20px 15px;
 }
このように表示されます。
SNSボタンのカスタマイズはこちら
賢威8のSNSアイコンのカスタマイズや、ソーシャルボタンの追加方法はこちらにまとめましたので、ご覧ください。
2019年版【賢威8】SNSボタンのカスタマイズ
https://empoh.com/2019/04/01/1974/
プラグインを使わないでソーシャルボタンを表示する。 賢威8になってから、SNSボタンの表示が簡単になりました。 それでも、デフォルトの状態だと、表示されないSNSがあったり、見栄えが良くなかったりします。 プラグインを使 …


 私は賢威を使っています。