賢威7のカスタマイズ

ひつじくん
この記事では賢威7のカスタマイズを徹底解説するよ!!

当ページでは、「賢威7」のカスタマイズ方法についてお話しをさせていただこうと思います。

初心者が1からカスタマイズするのはハードルが高いかもしれません。そこで当サイトではHTML/CSS初心者でもカスタマイズできるよう、ほぼコピペだけで済むカスタマイズを仕上げさせてもらいました。

このカスタマイズ法を使えば、当サイトのような見た目のサイトを簡単に作ることができますよ!

おおかみくん
おおお!!ワクワクしてきた!

なお、もし賢威の詳しい機能等が気になる場合はこちら賢威7の機能&当サイト限定特典をご覧ください。それではカスタマイズを始めていきましょう!

注意事項

記事でカスタマイズするのは「賢威7クール版のNAVY」という種類のテンプレートです。クール版以外のテンプレートでは少しだけカスタマイズが変わってきますのでご注意ください。

【賢威7】ヘッダーカスタマイズ

ヘッダーの役割

ひつじくん
まずはヘッダーデザインを綺麗にして、オリジナリティを持たせていこうか!

僕がサイトをデザインする時は、まずはヘッダーからカスタマイズしていきます。

「ヘッダー」はサイトの顔とも言える部分です。ユーザーに第一印象を与える非常に重要な部分ですので、ここを綺麗に使いやすくデザインしておくのは必須です。また、オリジナリティを持たせてサイトを覚えてもらおうとする努力をすれば尚良しかと思いますね!

ではどうやって賢威7のヘッダー部分をカスタマイズしていくのかをこれからお話ししましょう。とは言っても、賢威は最初から見た目がかなり完成されているのでほんの少しのカスタマイズでオッケーですよ!

メニューを追加

メニューを追加する

ひつじくん
最初にメニューを配置してみようか!

まずは賢威7にメニューを追加してあげましょう。メニューに追加したい記事を用意した後に、「カスタマイズ」>「メニュー」と進めば簡単にメニュー作成できますよ!

詳しいメニュー作成方法については以下の記事に記載しておきますので、参考にしてみてください。

メイン画像を削除/変更する

賢威7 ヘッダー削除

ひつじくん
次はメイン画像の削除/変更をしてみようか!

次にメイン画像を削除(追加)します。デフォルトでは地球儀の画像が貼られていますが、僕のカスタマイズではこれを削除させていただきました。

管理画面の「賢威の設定」<「トップページ」の順に進むと「メイン画像」という項目が見つかるので、ここのURLを削除すればオッケーです。画像を変更したい場合は「画像を設定する」のボタンから設定してください。 メイン画像削除

おおかみくん
俺はメイン画像いらないから空白にしとこ!

ヘッダー背景色を変える

ヘッダー背景色を変える

ひつじくん
次はヘッダーの背景色を変えてみようか!

ヘッダー背景を変えてみます。これも変更は簡単なのでここにコードを載せさせていただきましょう。

.site-title a{
color: #fff !important;/*文字色を白く*/
}
.site-header{
background: #181944 !important;/*背景色を変更*/
}
.global-nav{
border-top:3px #ddd solid;/*影をつける*/
}

これを賢威7のスタイルシートに追記するだけでオッケーです。管理画面から「外観」<「テーマ編集」<「base.css」と進んで、その最下部にこのコードを追記してください。

なおヘッダー背景色は#181944となっていますが、これはお好きにカスタマイズしちゃってくださいね。カラーコードを参考に好きな色を選んできて、そのコードに書き換えるだけでオッケーなので!

おおかみくん
たったこれだけでいいのか!!

【応用】ヘッダーロゴを配置する

ヘッダーロゴを配置

おおかみくん
でももっとオリジナルなヘッダーに仕上げたいなぁ〜。
ひつじくん
それならヘッダーロゴを作って配置するようにするといいよ〜!

「もっと綺麗なヘッダーに仕上げたい!」というならヘッダーロゴを配置するようにしましょう。ヘッダーロゴを入れるとサイトの印象はかなり変わりますし、オリジナリティがグッと高まります。

ロゴサンプル

このように背景色に合わせてヘッダーロゴ画像を用意し、それを「賢威の設定」から配置するだけでオッケーなので割と簡単ですよ!

ロゴ画像は自分で作っても良いですし、それが難しいならココナラなどで外注しても良いですね!

詳しい方法に関してはここでは書ききれないので、以下の記事を参考にしてみてください。

【賢威7】記事のカスタマイズ

メインの役割

次は賢威7の記事(メイン)部分のカスタマイズに移ります。

記事はサイトの命です。読者に分かりやすく伝えるための工夫を必死に凝らす必要があるので、カスタマイズする上で最もこだわるべき部分かもしれません。

そこで、ここでは賢威7を利用する上で取り入れたい記事カスタマイズをまとめてみました!

記事に背景色をつける

記事背景 カスタマイズ

ひつじくん
最初は記事に背景をつけることから始めようか!

まずカスタマイズしたいのは記事の背景ですね。

賢威7のデフォルトでは背景色が設定されていませんので、白の背景を設定して記事っぽくしたいと思います。方法は簡単で、以下のコードを「base.css」の最下部にコピペするだけです!

.section-wrap{
padding: 30px;
}
.col2 .main-conts{
background-color: #fff;
}
おおかみくん
おお!!確かに記事っぽく見た目が変わったぞ!!

もともとの賢威7デフォルトでもオシャレではあるんですけれど、やはり記事は背景が白い方が見やすい傾向がありますので、この設定はしておくことをおすすめします。

記事に影をつける

記事に影をつける

記事に影をつけてあげると記事にメリハリが生まれます。なので僕はこれを採用することが多いですね!

影をつけるのはとても簡単で、以下のコードを賢威のスタイルシート(base.css)の最下部に貼り付けていただければオッケーです!

.section-wrap{
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}

見出しをカスタマイズする

ひつじくん
背景ができたし、次は見出しをカスタマイズしてみよっか!

次にカスタマイズしたいのは賢威7の見出し部分です。

テンプレートのままでも十分綺麗な見出しにはなっていますが、これをもう少しだけカスタマイズしてみたいと思います。

コピペで使える賢威7の見出しを8つ用意しておきましたので、こちらを参考にして見出しをカスタマイズしてみてくださいませ!

SNSを設置する

SNSボタン
おおかみくん
やだ、私のSNSボタンダサすぎ!?

賢威7テンプレでは既存のSNSボタンが小さく、ソーシャルメディアでの拡散が少なくなりそうなのが問題です。

そこで今回はコピペでできるSNSボタンを用意しておきました。これは当サイトで使っているものと全く同様のものですね。これも是非利用するようにしてみてくださいませ!

【賢威7】サイドバーのカスタマイズ

サイドバーの役割

次は賢威7のサイドバーをカスタマイズしていきましょう。

サイドバーはメインを補助する名脇役です。メインで紹介している商品の販売ページへと誘ったり、ユーザーを興味のある記事へと導いてくれたりするのが主な役割ですね。

そんな脇役のサイドバーも綺麗に整えておくとユーザーにとっても利用しやすいサイトになり、売り上げアップが見込めます。そのための賢威7カスタマイズもガッツリまとめさせてもらいましたよ!

PV数ランキングの設置方法

PV数ランキング

まず絶対設置しておきたいのがPV数ランキングです。管理画面の「カスタマイズ」>「ウィジェット」と進んで、「ウィジェット追加」>「【賢威】PV数ランキング表示」を選択すれば、サイドバーにPV数ランキングを簡単に設置できるようになっています。

PV数ランキングがあればどの記事が重要なのかがユーザーにとってもわかりやすいですから便利ですよね。詳しい設定方法については以下の記事に詳しく記載していますので、わからなければこちらを参考にしてみてください。

最近の投稿の設置方法

最近の投稿

また、もうひとつ便利なのが「最近の投稿」です。これもPV数ランキングと同様に「カスタマイズ」>「ウィジェット」と進み、「ウィジェット追加」>「【賢威】サムネイル付き最近の投稿」を選択すれば、追加することができます。

背景色を白にする

好みに合わせて調整

メリハリを持たせるために背景を白くしてみましょう。

.sub-conts .section-wrap .section-in{
background: #fff !important;
}

これを賢威7のスタイルシート(base.css)の好きな場所に追記するだけで背景を白くすることができます。

サイドバーメニューのカスタマイズ

サイドバーメニュー
サイドバーのメニューは「カスタマイズ」>「ウィジェット」と開いていき、「ウィジェット追加」>「カスタムメニュー」を選択すれば追加することができます。(サイドバーに設置するメニューはWordPress管理画面の「外観」>「メニュー」からあらかじめ用意するようにしておきましょう。)

見てもらうとわかるように、僕のサイトのサイドバーはほとんどがこのカスタムメニューで埋まっていますね。

ちなみに僕が採用しているデザイン方法は以下のとおりです。これをスタイルシート(base.css)の一番下にコピペしていただくだけで、僕のサイトと同様のデザインになります。背景色はあなたのサイトのデザインに合わせてもらえれば良いでしょう。

ul.sub-menu{
background-color: #EBEDFF;/*背景色をつける*/
padding-left: 20px !important;
}

【賢威7】フッターカスタマイズ

フッターの役割
最後に賢威7のフッターカスタマイズをしましょう。

フッターカスタマイズは任意ではありますが、カスタマイズをしておくとサイトの回遊率は間違いなく上がるでしょう。

サイト下部まで降りた時に何も記事がなかったら離脱をされてしまう可能性が高くなるんですけれど、フッターを開発していれば他の記事に飛んでくれるカモしれませんから、離脱リスクを軽減できるというわけですね!

フッター開発の方法

フッター開発

ではそのための賢威7カスタマイズを見ていきましょう。

とは言ってもフッター開発は僕の差別化要素の1つなので大っぴらに晒す気はありません。そのため、賢威7購入者の限定特典としてフッター開発の記事を付けさせていただきます。

僕のサイトを介して購入いただければ記事を読めるようになっていますので、購入者の方はどうぞご利用くださいませ。

【賢威7】カスタマイズまとめ

賢威7のカスタマイズ

賢威7の全カスタマイズでした。

賢威はカスタマイズしなくても使っていけるテンプレートですが、これらを知っておけばより便利にサイトを仕上げられると思いますので是非活用してみてください!

\簡単に美しいブログが作れるテンプレート/

atlasバナー

この記事が気に入ったら
いいね ! しよう

Twitter で