マネーの三毛猫からミケネコデザインへ。ブログリニューアルしました!

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

ひかり

こんにちは!ひかりです♪
ぷるにゃー。三毛猫のぷーこにゃん。

ぷーこちゃん

 

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

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

CMCJの記事はこちら♪

バズ部主催のCMCJ2019でわかったコンテンツマーケティングの未来と在り方

「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はこちらです。

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

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

 

ヘッダーのロゴを中央に

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

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

 

ヘッダーの斜線を消す

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

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

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

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

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

 

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

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

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

このサイトは色をピッカーで選べるので使いやすいと思います。
参考 カラーピッカーWEB色見本 原色大辞典 - HTMLカラーコード

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

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

 

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

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

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

 

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

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

参考 【賢威8】グローバルメニューの設置方法Decolabox

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

/*グローバルナビの背景色(サイド)*/
.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;
}

 

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

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

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

参考 賢威8のグローバルメニューの文字をカスタマイズAmehati
.keni-gnav_inner li a {
	font-weight: bold;	/* 文字を太字にする */
	font-size: 115%;		/* 文字を大きくする */
	color: #fff;		/* 文字色を変更する */
}

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

 

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

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

 

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

 

こちらがカスタマイズ前

 

こっちがカスタマイズ後

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

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

 

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

マネーの三毛猫

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

 

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

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

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

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

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

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

参考 賢威8のフォントをカスタマイズする方法B-side Journal

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

 

/* 本文のカスタマイズ */
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;
}

 

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

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

 

こちらがカスタム前

 

こちらがカスタム後

 

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

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

/*目次間隔狭める・太字*/
.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;
}

 

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

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

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

 

吹き出しの間隔を狭める

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

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

 

吹き出しの輪郭線を消す

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

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

 

吹き出し内の文字1.1倍(吹き出し内の文字を大きく)

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

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

 

吹き出しの位置を上げる

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

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

/*吹き出し位置上げる*/
@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;
}
}

 

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

お疲れさまでした!

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

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

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

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

お気軽に声かけてにゃん♪
ツイッターのDMやLINEでもOKにゃん!

ぷーこちゃん

 

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

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

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

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

 

ちなみに私はまだ質問したことがないですが、すでにいくつか聞いてみたいことができてきています(*´∀`*)

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

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



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

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

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

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

こういうところに松尾茂起氏のユーザーファーストが現れてるにゃん?

ぷーこちゃん

ひかり

SEOの観点でもユーザーファーストを訴えてるし、そこはほんとブレてないよね。
ひかりもユーザーファースト、ぷーこファースト頑張るにゃん!

ぷーこちゃん

ひかり

イエス、マム!
(ぷーこファースト?)

 

ここまで読んでくれてありがとうにゃん♪

ぷーこちゃん

 

デザインされたブログで収益ブログが運営できる手法を公開!8日間の無料メルマガ「デザインブログ講座」

ひかり、新しいメルマガ講座始めるにゃん?

ぷーこちゃん


ひかり

そうそう!デザインについて発信するからにはデザインを活かしたブログづくりについても語らねばなるまいと思って。
でも記事にするとめっちゃ長いし、濃い話もあるからメルマガで興味のある人にだけこっそりお伝えしようと思って今回メルマガなの。

クローズドな媒体だから言いたい放題にゃん!

ぷーこちゃん


ひかり

結構ぶっちゃけたお金の話もしてるよw

 

無料のメルマガ「デザインブログ講座」に今すぐプレゼント付きで登録する

このメルマガでは私がどうやってブログで1年で200万円以上稼げるようになったのか、どういう戦略や手法で収益化したか、デザインをブログにどう活かしていったかなども赤裸々に綴った、かなーり濃い無料メルマガ講座です。

今なら登録してくださった方には「プロのデザイナーが絶対押さえるデザインの極意」をプレゼント中!

  • ブログに興味があるけどどうやって始めたらいいかわからない
  • 独学でやっていける自信がない
  • ちゃんとデザインされたブログで収益ブログを作ってみたい

ブログのデザイン、収益化で悩んでいる方はぜひ♪

読むだけでも結構楽しめるように頑張ってつくったので、ちょっと興味あるなーという方も遠慮なく登録しちゃってください☆

無料のメルマガ「デザインブログ講座」に今すぐプレゼント付きで登録する

 

お役立ち情報を無料でゲット♪ひかりのメルマガ「パラレル☆マネーメール」

このメルマガは一体何にゃん?

ぷーこちゃん


ひかり

こいつぁアブない情報をアングラでお伝えするメルマガですよ・・・。
ウラのウラまでしっかり丸裸でさぁ。

ウラのウラはオモテにゃん。イキリすぎにゃん。

ぷーこちゃん


ひかり

手厳しい・・・!
でもウラもオモテもネットビジネス初心者の方にもわかりやすくいろいろお伝えしていくよ!

よくわからんけど登録しといたら損はないにゃん?

ぷーこちゃん


ひかり

えぇ、損はさせませんよ。

ふむ、励みたまえ。

ぷーこちゃん

 

実際に試して厳選した副業情報をお届けするメルマガに登録する

 

このメルマガでは、ブログには書けないウラ情報や稼げるイチオシ情報など、ネットビジネスや投資・アフィリエイトのことを初心者の方にもわかりやすくお伝えしていくのがこの「パラレル☆マネーメール」です♪

 

そして私がリアルビジネスでフリーランスとして10年生き残ってきたノウハウも、読者限定で「個で稼ぐチカラ」を得るための思考や手法、情報としてシェアしていきます!

なんだかんだでリアルビジネスでクライアント直取引のフリーランス10年以上やってきてるので、「個で稼ぐ」という点では年季入ってますよ!

実は会社員やってた期間よりフリーランスのほうが長くなりました(*´∀`*)

 

その他にも数々の失敗を経てやっとアブナイ商材と稼げる商材を見分けられるようになった私なりのコツや、いち早くおすすめ稼げる商材の情報もおとどけします♪( *´艸`)

たまに日常ネタもあったりなかったりw

「お前いっつも何考えてんの?」と気になる人もぜひ(笑)

メルマガ限定企画もあるのでどうぞお楽しみに☆

今すぐパラレル☆マネーメールに登録する

登録情報はメールアドレスとニックネームのみ♪
メルマガ解除もワンクリックでお手軽にできます。

 

突拍子もないプレゼントするにゃん!
まずはぷーこをお届けにゃん!

ぷーこちゃん


ひかり

マジか、お前どこ行くの?

メルマガ読者プレゼントも企画しているのはガチw
※ぷーこちゃんはお届けしません。

 

実際に購入して検証したオススメ教材をご紹介♪「ひかり&ぷーこのマネー談義」

しかし結局稼げる商材ってあるのかにゃん?
もう探すの大変にゃん。

ぷーこちゃん


ひかり

そういうと思って私が実際に身銭切って買って試したやつがあるよ!
皆様のために人柱やっときましたw

マジか。確かにひかり、削れてるにゃん・・・!

ぷーこちゃん


ひかり

精神がね!
体積そのままよ。

ひかりの犠牲、無駄にしないにゃん・・・!
ひかりの遺作はこちらにゃん。

ぷーこちゃん


ひかり

いや、死んでへんわい。

 

実際に買って厳しく検証した教材を今すぐチェック!

ひかりが代わりに試しておいたにゃん。
ちょいちょい失敗引いて血みどろなのは内緒にゃん。

ぷーこちゃん

 

無料メール相談受付中

ひかりに一体なにを相談するにゃん?

ぷーこちゃん


ひかり

ネットビジネスのお悩みをご相談いただければ。
いろいろやって挫折もして、やっとこさかせげるようになった私が懇切丁寧にアドバイス!

倍返しでアドバイスにゃん!

ぷーこちゃん


ひかり

そう、その勢い!

5通くらいお返事するにゃん!

ぷーこちゃん


ひかり

いや、それタダのスパムや。

ひかりに副業の相談をしてみる

 

「稼げるネットビジネスって一体どれ?」
「何から始めればいいの?」
と迷っている方も私に一度相談なさってみてください♪

酸いも甘いも噛み分けてきた私が優しく、時に厳しく(?)あなたに合ったネットビジネスをご提案します♪

相談してみて、モヤッとした流れがスルッと変わることもありますし、お気軽にどうぞ!

 

ただ、無責任なアドバイスはできないので

  • 今までしてきたネットビジネス
  • パソコンに向かえる時間
  • 興味のあるネットビジネス
  • 商材購入の予算

も合わせて教えてくださいね!

私は「お返事用テンプレ」は用意しておらず一通一通しっかり考えてお返事しています。

なので結構長文ですw

ひかりのねちっこさが垣間見えるにゃん。

ぷーこちゃん


ひかり

そこは丁寧って言っとくれよw

ひかりに副業の相談をしてみる

せっかく何かのご縁でこのブログに
辿り着いてくださったので、
「ちゃんとやれば稼げるんだ!」
と相談してくださった方には
実感していただきたいと思っています。

私があなたを稼げないノウハウコレクターから
卒業させちゃうのでお覚悟を。

気楽ーに相談してみてくださいね♪

ぷーこも精一杯アドバイスするにゃん!

ぷーこちゃん


ひかり

メールお返事してる時にゃんにゃんうるさいの、あれアドバイスなの!?

ぷーこの生きる知恵を伝授してるにゃん!

ぷーこちゃん


ひかり

え、思いのほか深いw

ぷーこちゃんの生きる知恵もありませんし、お返事は1通だけなのでご安心をw

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA