MENU
　無料！収益メディアのつくりかた講座　
  1. ホーム
  2. デザイン
  3. WEBデザイン・ブログデザイン
  4. 【賢威8】CSSコピペでできるブログカスタマイズ11選！目を引くデザインに変えちゃおう♪

【賢威8】CSSコピペでできるブログカスタマイズ11選！目を引くデザインに変えちゃおう♪

WEBデザイン・ブログデザイン
当ページのリンクには広告が含まれています。

[say name=”ひかり” img=”https://money-mikeneko.com/wp-content/uploads/2019/10/hikari.png”]こんにちは！ひかりです♪[/say] [say name=”ぷーこちゃん” img=”https://money-mikeneko.com/wp-content/uploads/2019/10/puko.png” from=”right”]ぷるにゃー。三毛猫のぷーこにゃん。[/say]

 

今回は超頑張った賢威8のカスタマイズについて語っていきます♪

賢威とは、CMCJにも登壇していた松尾茂起氏率いる株式会社ウェブライダー監修のWordPressテーマです。

CMCJの記事はこちら♪

[kanren id=”6776″ target=”_blank”]

「SEOに強い！」ということで長くアフィリエイターに愛されてきたWordPressテーマですね。

私も前から別ブログでは賢威7を使っていたんですが、賢威8に 面倒くさくて タイミングを逸してなかなかバージョンアップできてなかったんですよね。

でももう賢威8が正式にリリースされてだいぶ経ってるし、ブログの名前とか位置づけもちょっと整理しないと、ということで満を持して7から8に変えて、ついでにブログデザインもゴリゴリいじってみたわけです。

やってみたら
賢威8、子テーマがあるから賢威7よりカスタマイズがラク！

賢威7は直にテーマのCSSいじってましたが、賢威8ではテーマのカスタマイズメニューの中の「追加CSS」ってとこで全部解決します。

ミスったらとりあえず消したらいいし、致命的にデータが損なわれることもないし、安全かつ安心にカスタマイズできます♪

カスタマイズのハードルはむしろ7より下がったのでオススメ♪

私がゴリゴリにカスタマイズしたブログがこちらです☆

マネーの三毛猫

 

カスタマイズのビフォーアフターがこちら。

ということで私がしたカスタマイズを紹介していきます！
（念の為、カスタマイズは自己責任でお願いいたします）

賢威8をすでにお持ちの方は私が実際にした賢威8 CSSカスタマイズ【トップページ編】からどうぞ♪

ではいってみましょー♪

 

目次

ウェブライダー社の松尾茂起氏監修【賢威】ってどんなWordPressテーマ？

松尾茂起@seokyoto（まつおしげおき）氏とは株式会社ウェブライダーの代表で、日本でも有数のSEOの権威です。

Webマーケティングの世界では「沈黙のWebマーケティング」「沈黙のWebライティング」の著作でも有名な方ですね！

この2冊は私も持っています！

内容はWebでビジネスをする方ならゴリゴリに役に立つ骨太なもので、ストーリー形式で【ボーン・片桐】というサイヤ人じみたパワー系マッチョの主人公が説明する形で進んでいきます。

あのハードボイルドなのかなんなのか、シュールな世界観も癖になりますねw

沈黙のWebマーケティング

引用：https://www.cpi.ad.jp/bourne/

ちなみにこのボーンが持ってるPC、
40kgあるそうですよ。

こんなSEOの猛者が魂を込めてリリースしたWordPressテーマが「賢威」です。

 

賢威は2007年に発売された超ロングセラーWordPressテーマ

賢威はバージョンアップを続けて12年間売れ続けてきた、かなり古参のテーマです。（WordPressのリリースが2003年）

2016年に賢威7がリリースされ、今回約3年ぶりのバージョンアップされたのが賢威8です。

賢威8

引用：https://rider-store.jp/keni/

過去最大のバージョンアップということですが、実際に使ったベテランブロガーに聞いた感想としては「賢威6になんとなく似てる」とのことでした。

ディスクリプションをヘッダーに表示したりとか。確かにそこは7とは明確に違いますね。

個人的に一番違うのは「ビジュアルエディターが見やすくなった！」です。

賢威7の時は自分でCSS入れた装飾とかは反映されなかったので、プレビューを何回もしないといけなかったですが、賢威8では装飾もビジュアルエディターで反映されるので、サクサク記事がかけるようになりました。

あとはソーシャルボタンがデフォルトでつきましたね！

賢威7の時はよくコピペしてつぶやいてたものです・・・笑

 

私が実際にした賢威8 CSSカスタマイズ【トップページ編】

ではではこの辺から実際にしたCSSカスタマイズを紹介していきます！

数値や色はお好きなようにカスタマイズしてくださいね！

まず上から順番に。

ディスクリプション（キャッチコピー・ヘッダーのコピー）を消す

ディスクリプション（賢威8のカスタマイズではキャッチフレーズとされています）とはブログの説明文のようなものです。

賢威8サブスクリプション

これをカスタマイズの項目で入力しなければ出現しないのですが、それだと内容も消えてしまう（Googleに通知されない）のでオススメしません。

単純にディスクリプション表示させないCSSはこちらです。

[codebox title=””]

/* 説明文消す */
.site-description {
display:none;
}

[/codebox]

他にもphpで消す方法もあります。
phpでディスクリプションを消したい方は、賢威サポートフォーラムのWordPressフォーラム9948のトピックを見てみてくださいね。

 

ヘッダーのロゴを中央に

ロゴが左寄せのままならそのままでもいいのですが、ロゴを中央にしたい場合はこちらを追加CSSに記述してください。

[codebox title=””]

/* ロゴを中央 */
.keni-header .site-title, .keni-header_col1 .site-title {
   float: none;
   max-width: 100%;
   text-align: center;
}

[/codebox]

 

ヘッダーの斜線を消す

賢威8の特徴とも言える画面上部の斜線のライン。

今回のカスタマイズでは、
ヘッダーに色を入れるにはこの斜線を消さないとヘッダーの背景色が設定できません。

ヘッダーに背景色を入れたい方は必ずこのCSSを入れてください。

「斜線を入れたままヘッダーの色を変えたい」方はフォーラムで聞いてみてくださいね。

[codebox title=””]

/* 斜線の装飾 削除 */
.keni-container .keni-header_wrap,
.keni-section_wrap .keni-section .entry_title,
.keni-main .archive_title{
  background-image: none;
}

[/codebox]

 

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

賢威8のヘッダーは何もしないと白色ですが、色をつけたい方はこちら。
前述の斜線を消さないと反映されないので注意してください。

わかりやすく最初は黒色にしているので、お好きなカラーコードをいれてください。

このサイトは色をピッカーで選べるので使いやすいと思います。
[sanko href=”https://www.colordic.org/picker” title=”カラーピッカー” site=”WEB色見本 原色大辞典 – HTMLカラーコード” target=”_blank”]

またはGoogleで「カラーピッカー」と検索すればカラーピッカーそのものが出てきます。

[codebox title=””]

/* ヘッダー背景色 */
.keni-header_wrap {
	background: #000;
}

[/codebox]

 

グローバルメニューを中央に

グローバルメニューは初期は左寄せですが、中央配置したい時はこちら。

[codebox title=””]

/* グローバルメニューの位置を中央 */
.keni-gnav_inner ul {
	margin: auto;
}

[/codebox]

 

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

賢威8のフォーラムでは、グローバルメニューのサイドまで色が変わらなかったので、こちらの記事を参考にさせていただきました！

[sanko href=”https://yuki-to.info/keni8globalcolor/” title=”【賢威８】グローバルメニューの設置方法” site=”Decolabox” target=”_blank”]

※こちらのブログも賢威8でつくられていて、すごくカスタマイズされていますね！

[codebox title=””]

/*グローバルナビの背景色（サイド）*/
.keni-gnav_wrap {
background-color: #000;
}

/*グローバルナビの背景色指定（メニュー部分）*/
.keni-gnav_inner li a {
background:#000;
border-bottom-color: #fff;
}

/*ホバーエフェクトの色指定*/
.keni-gnav_inner li a:hover {
border-bottom-color: #ccc;
}

[/codebox]

 

グローバルメニューの文字の色や大きさを変える

グローバルメニューの文字が小さい、もっと太くしたいときはこちらのCSSを追加してください。

これもフォーラムで見当たらなかったので、こちらのブログを参考にさせていただきました！

[sanko href=”https://amehati.net/keni8/gnavi-font/” title=”賢威8のグローバルメニューの文字をカスタマイズ” site=”Amehati” target=”_blank”]

[codebox title=””]

.keni-gnav_inner li a {
	font-weight: bold;	/* 文字を太字にする */
	font-size: 115%;		/* 文字を大きくする */
	color: #fff;		/* 文字色を変更する */
}

[/codebox]

ここまででだいぶ見かけが変わってきたと思います！

 

私が実際にした賢威8 CSSカスタマイズ【本文・吹き出し・目次編】

トップページが終わったら、いよいよ記事に関わるところをカスタマイズしていきます♪

私は本文と目次、吹き出しが気になっていたので手を入れました。

こちらがカスタマイズ前

 

こっちがカスタマイズ後

間延びした感じと、吹き出しのズレがなくなりました♪

（吹き出しのズレは起こらない場合もありますが、原因はよくわかりません。）

 

実際のブログはこちらです♪

マネーの三毛猫

では具体的なカスタマイズをお伝えしますね！

 

賢威8のフォントを変えて行間を狭くする

かなり気になっていたのが本文。

どうも賢威やSANGOでもデフォルトの游ゴシック体が個人的にそんなに好きでなくて・・・。

しかしウェブライダー監修のWebサイトを見てみたらヒラギノを使っていたことが多かったので、思い切って変えちゃいました！

そして行間が空きすぎなのも気になっていたのですが、このCSSでいい感じに整えられます♪

このCSSはこちらの記事を参考にさせていただきました！

[sanko href=”https://bsj-k.com/keni8-font-customize/” title=”賢威8のフォントをカスタマイズする方法” site=”B-side Journal” target=”_blank”]

こちらではそれぞれのカスタマイズの解説もしているので、見てみてください。

[codebox title=””]

/* 本文のカスタマイズ */
body {
    color: #444444;
}
body, input, textarea {
    font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
}

/*行間*/
.keni-main {
    letter-spacing: .05em;
    font-size: 1.7rem;
    line-height: 2.0em;
}

/*改行したときの行間*/
.article-body p {
    margin-bottom: 0.3em;
}

[/codebox]

 

目次の文字を大きくし、間隔を狭める

目次の文字が小さすぎて間が空きすぎて気になる方はこちらのカスタマイズを。

こちらがカスタム前

 

こちらがカスタム後

これは賢威のフォーラムに質問があったので、そちらを参考にしています。

h2を太字にしていますが、太字にしたくない方はその部分を消してお使いください。

[codebox title=””]

/*目次間隔狭める・太字*/
.toc-area_inner .toc-area_list li {
    font-size: 0.95em;
    font-weight: bold;　/*←太字にしないならこの一文を消す*/
    margin-bottom: 5px;
}
.toc-area_inner ol ol {
    margin-top: 5px;
}

.toc-area_inner .toc-area_list ol li {
		font-weight: normal;
}

[/codebox]

 

目次の四角と数字をなくす

目次の文頭をスッキリさせたかったのでとっちゃいました！

[codebox title=””]

/*目次の数字なくす*/
.toc-area_inner .toc-area_list ol li:before {display: none;}
.toc-area_inner .toc-area_list li:before {display: none;}

[/codebox]

 

吹き出しの間隔を狭める

吹き出しと吹き出しの間の空きすぎ感が気になる方はこちら。

[codebox title=””]

/*吹き出し間隔狭める*/
.chat_l,
.chat_r{
	position: relative;
	margin: 0;
	overflow: hidden;
}

[/codebox]

 

吹き出しの輪郭線を消す

吹き出しの輪郭線が気になる方はこのCSSで消してください。

[codebox title=””]

/*吹き出し輪郭線消す*/
.bubble,.chat_l .bubble .bubble_in::before,.chat_r .bubble .bubble_in::before,.chat_l .bubble  {
   border: none;
}

[/codebox]

 

吹き出し内の文字1.1倍（吹き出し内の文字を大きく）

吹き出しの中の文字をもっと大きくしたい方はこちら。

[codebox title=””]

/*吹き出し文字1.1倍*/
.bubble_in p {
  font-size:1.1em;
}

[/codebox]

 

吹き出しの位置を上げる

これは吹き出し部分がズレてる方のみへおすすめします。

現状ズレていない場合は逆にズレる場合があるのでしないほうがいいです。

[codebox title=””]

/*吹き出し位置上げる*/
@media only screen and (min-width : 736px){
.chat_l .bubble .bubble_in:before,.chat_r .bubble .bubble_in:before {
    margin-top: -30px;
}

.chat_l .bubble .bubble_in:after,.chat_r .bubble .bubble_in:after {
    margin-top: -25px;
}
}

[/codebox]

 

これで私がしたカスタマイズは全部ですね！

お疲れさまでした！

[box class=”box4″]もしひかりに「ブログデザインで相談してみたい」「ブログデザインをしてほしい」と思われた方は、以下のリンクからお問い合わせをお願いいたします♪

ロゴやヘッダーの制作も承っています！

もちろん、ブログデザインは賢威以外のWordPressテーマでもOKです♪

ブログデザインお問合せフォームはこちら

[/box]

[say name=”ぷーこちゃん” img=”https://money-mikeneko.com/wp-content/uploads/2019/10/puko.png” from=”right”]お気軽に声かけてにゃん♪
ツイッターのDMやLINEでもOKにゃん！[/say]

 

賢威8カスタマイズ　まとめ

さて、私がほどこしてきたカスタマイズを紹介しましたが、カスタマイズ例としてはほんの一例です。

「もっとこうしたい！」ということも出てくると思うので、そういう時は賢威フォーラムを積極的に活用しましょう！

コメントなどをいただければ私の分かる範囲でお答えしますが、賢威のフォーラムで聞かれる方が確実です。

また役に立ちそうなカスタマイズがあれば、この記事でシェアしていきますね♪

そしてこの記事やCMSJの記事を見て「賢威8を使ってみたい！」と思われた方はこちらのページから購入が可能です♪



12年間売れ続けている実績は確かなので、ぜひチェックしてみてくださいね♪

ちなみに同じユーザーであれば、1度買えば複数サイトつくれるのでそこも嬉しいポイントです☆

さらに数年後出てくる賢威9にも無料でバージョンアップできますし、旧バージョンである賢威7と賢威6も無料で使える太っ腹っぷり。

会員サイトのフォーラムでも無期限で質問できるサポートの厚さもあってずっと支持されつづけています。

[say name=”ぷーこちゃん” img=”https://money-mikeneko.com/wp-content/uploads/2019/10/puko.png” from=”right”]こういうところに松尾茂起氏のユーザーファーストが現れてるにゃん？[/say]
[say name=”ひかり” img=”https://money-mikeneko.com/wp-content/uploads/2019/10/hikari.png”]SEOの観点でもユーザーファーストを訴えてるし、そこはほんとブレてないよね。[/say]
[say name=”ぷーこちゃん” img=”https://money-mikeneko.com/wp-content/uploads/2019/10/puko.png” from=”right”]ひかりもユーザーファースト、ぷーこファースト頑張るにゃん！[/say]
[say name=”ひかり” img=”https://money-mikeneko.com/wp-content/uploads/2019/10/hikari.png”]イエス、マム！
（ぷーこファースト？）[/say]

 

[template id=”246″]

WEBデザイン・ブログデザイン
ブログカスタマイズ 松尾茂起 賢威8
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメント一覧 （2件）

コメントする

CAPTCHA


目次