THOR」へ変更しました。腎威7カスタマイズ腎威7ここあです。あなたは「腎威」というワードプレスのテンプレートをご存知ですか?このテンプレートは2007年1月に発売されて以来24,800円という価格でありながら...すでに24,000人を超えるユーザーに利用されている大ベストセラーテーマです。腎威は京都にあるSEO専門会社によって作られたテーマなのでSEOに強いのはもちろんのこと今なお時代に合わせ進化し続けている優良テーマ。今回はアフィリエイターなら誰もが知っている超有名なテーマ「腎威7」のデザインカスタマイズ(初期設定)の方法を余すところなくご紹介したいと思います。これからブログやアフィリエイトを始める場合、腎威7を購入したらどれぐらいのスピードでサイトの立ち上げができるのかぜひ参考にしてください^^ちなみに腎威7のテンプレートは5種類6色の計30種類の中から好きなテーマを選べるのですが...今回はその中の1つであるコーポレート版のカスタマイズについてご紹介致したいと思います。腎威7のカスタマイズにこだわりたい方へ腎威7をカスタマイズする場所まずは、腎威7をカスタマイズする場所を簡単にご紹介。Webデザインの知識が全くない人がいきなりヘッダーやフッターとか言われても何のことかサッパリ分かりませんよね...^^;なので、それらの用語がどこを指すのかも実際のサイトイメージと合わせてご確認ください。おおむねあなたがよく目にする用語というのは左の画像の位置を指します。使い出すと次第に慣れてくるのでまずはヘッダーやフッターがどこを指すのか分かってもらえればOKです。腎威7のコーポレート版をワードプレスにインストールしたてというのは以下の状態になります。?初期状態でもすぐに記事が書けそうなぐらいサイトは整っていますよね^^だから、腎威7を使えば...それほど手を加えなくともすぐに記事を書き始めることができるので初心者のあなたでも全然大丈夫です。腎威7の初期設定(デザイン)で主にカスタマイズしなければならないのはヘッダー画像の差し替え/削除、もしくはロゴ画像を挿入メニューの作成サイドバーウィジェットの変更とりあえずここだけカスタマイズすればすぐに記事を書き始めることができます。あとはどこまでこだわるかで時間のかかり方が変わってきます。サイト立ち上げ当初というのは記事が少ないので初めからデザインにこだわり過ぎないようにしてください。言うと、記事を書いていくうちに少しずつサイトのイメージが固まってきます。※もちろん、ヘッダー画像などは最初にサイトの方向性を決めて確実に設定してください。それ以外の細かい部分は後回しでOK最初からデザインにこだわっていても記事が増えていくにつれて「あれ?なんか最近方向性変わってきてる?」なんて思うことも出てくるからです^^;なので、最初はできるだけ簡単にデザインの体裁を整え、記事が充実してきたら記事の内容とサイトイメージがマッチするように改めてデザインをカスタマイズする方が確実に時間の無駄がなくなります^^ということで、上から順番にカスタマイズしていきましょう!腎威7のヘッダーをカスタマイズまずはヘッダー部分をカスタマイズしましょう。ヘッダーはサイトの顔とも言える部分になります。サイト訪問者がまず目にするのはこのヘッダー部分。ここの第一印象が悪いと記事も読まれずサイトを閉じられる可能性すら起こり得ます^^;なので...ヘッダーの印象メニューの分かりやすさタイトル(覚えてもらいやすいもの)はかなり大事。「デザインが苦手」というあなたであっても最低限ヘッダー部分だけは力を入れるようにしてください。ブログで収益化したいなら必須ですよ。メニューを追加する腎威7に関わらず...ワードプレスにテーマをインストールした直後というのはヘッダー部分にメニューバーがありません。いうことで、まずはメニューから作成しましょう。固定ページのどちらでも構いません。メニューを決める時にはあらかじめどういったサイト構造にしたいのかしっかりと考えた上で作るようにしてくださいね。メニューの考え方としては2つあります。1つ目はメニューを全て固定ページで設定し固定ページの記事から投稿ページに誘導する方法。図で説明するとこうなります。2つ目はメニューを投稿ページのカテゴリで設定しカテゴリーの中から個別に投稿ページへと誘導する方法。こちらも図で説明するとこうなります。これら2つの大きな違いは...固定記事から各投稿記事へ誘導するか投稿記事から投稿記事へと誘導するかです。どちらもユーザビリティは高いのであなたがやりやすい方で構いませんがSEO的に強くなるのは1つ目、網羅系のやり方です。網羅系の記事を書く場合は...読者に関心を持ってもらいたい軸となる記事を固定ページとして書いてまとめさらに、詳しく踏み込んだ内容を投稿ページの記事として作成し読者に深く知ってもらうという感じです。私の記事を例に挙げると...こちらの記事がいわゆる網羅系の記事になります。【STORK】カスタマイズ!コピペだけでオシャレにする方法まとめ私の場合、なぜこの記事が投稿ページの1つになっているかと言うと...STORKのカスタマイズを始めた頃にいろんなサイトを見て回ったんですが非常に分かりにくい記事が多かったです。自分でカスタマイズを検証しつつ「もっと分かりやすい記事を書こう!」と少しずつSTORKのカスタマイズ記事を書き始めたんですね。しているうちにカスタマイズ系の記事が増えてきて最終的には「まとめページがある方が親切!」と落ち着いたワケなんです。私の場合は全てのカテゴリーにおいてSTORKだけに特化したサイトを作っているわけではありません。メニューとして固定ページを作るのではなくトップページやサイドバーに画像リンクを作ることでサイト訪問者をまとめページに誘導しユーザビリティを上げているというワケなんですね。やり方はいろいろあるということです...(笑)腎威7もこのサイトのように固定ページをトップページとして設定することもできますしサイドバーに画像リンクを作ることもできますのであまり考えることだけに時間をかけ過ぎずまずは手を動かしてみるということを優先してみてくださいね^^ということで、メニューの下準備をしましょう。メニュー用の固定ページを作成する方法まずは固定ページの作り方から...。再度、更新ボタンを押して保存の順番に固定ページを作成します。固定ページの中身(記事)は後から書けばいいので今は空白で大丈夫です^^※固定ページは、公開ボタンを押して、公開状態にしておかないとメニューに表示されないのでご注意ください。続いてメニュー用、投稿ページのカテゴリーを作成する方法を説明します。カテゴリーをクリック。カテゴリーページを開いたら以下、必要項目を入力の上、設定を保存しましょう。固定ページもしくは投稿ページのカテゴリーが設定できたら、いよいよメニューの作成です。メニューをクリックしましょう。メニュー作成画面を開いたらメニュー名を入力し、メニュー作成ボタンをクリックしてください。続いて、すべて表示をクリックすると先ほど追加した固定ページの項目が全て表示されるので、追加したい項目にチェックを入れます。カテゴリーをメニューに追加したい場合も...カテゴリーの部分から固定ページ追加と同様の手順でメニューに追加しましょう。メニューに追加ボタンをクリックすると右側に追加したメニューが全て表示されるので最後にメニューの順番をドラッグして入れ替えてメニューを表示させたい場所にチェックを入れてメニューを保存をクリックしてください。すると...サイトタイトル下にメニューが新たに追加されます。メニューの作成は初めのうちは少し戸惑うかもしれませんがすぐに慣れてくるので、いろいろ試してみてください^^ヘッダー画像を削除または変更する続いて、ヘッダー画像の調整をします。腎威7のコーポレート版はデフォルトで事務所の写真がメイン画像として設定されています。トップページをクリックし以下の設定画面を開きます。メイン画像を削除したい場合は...以下、画像のURLを削除して空白にし設定を保存すれば表示されなくなります。メイン画像を変更したい場合は...画像を設定するをクリックしファイルを選択をクリックして任意の場所から画像を選ぶか登録したい画像を点線の中にドロップしてライブラリに画像を追加します。画像を追加すると新たに以下の画面になりますので代替テキストを入力し、画像サイズを選んでから最後に投稿に挿入をクリックしましょう。今回はヘッダー用のメイン画像なのでサイズはフルサイズでOKです。代替テキストはSEO効果もありますので画像をライブラリに登録する際には必ず入力するよう心がけてください^^こうして画像の登録ができると...最初にあった事務所の写真が新たに設定した画像に変更されます。実際にサイト表示で見てみると...トップページの画像が変更されています。トップページの画像はメニューと同じ幅に設定する場合と以下、メイン画像をウインドウ(ブラウザ)幅で表示にチェックを入れることでブラウザの画面幅いっぱいに設定することもできます。その辺はあなたのお好みで設定してくださいね^^ヘッダーロゴを登録する続いて、ヘッダーロゴの登録です。こちらの設定は任意となりますが...先ほどのヘッダー画像を登録しない場合はヘッダーロゴで他のサイトと差別化する方が望ましいです。いずれにしても、サイトのヘッダー部分にはオリジナリティがある方が断然良いです。ヘッダーロゴを自分で作れるなら作れば良しそれが難しいという場合はココナラなどで外注しても良いですね!!もちろん、私は自分で作ってますよ...^^ヘッダーロゴを外注さんに頼む場合は背景色のないPNG画像で仕上げてもらうといろいろと使い勝手がいいのでおすすめです。背景があると、ヘッダーの背景色も限定されるし後から背景色を変えたくなっても変更できないというデメリットがありますので気を付けてくださいね^^;私は簡単にこんなヘッダーロゴを作ってみました。背景色のないPNG画像で作成しています。※上記サンプルは背景白のjpg画像です。ICON画像編集ソフトさえあればあなたでも簡単に作れますのでぜひチャレンジしてみてください。あとはあなたのセンス次第!←ここ重要(笑)ということで、ヘッダーロゴの設定方法です。ヘッダーロゴの設定先はダッシュボードメニューから腎威の設定をクリック以下の場所から登録できます。画像を設定するをクリックし、あとは先ほどと同じヘッダー画像を登録したのと同じ流れで設定してください。ロゴ画像を登録し、サイト表示で見てみると...だいぶ、小洒落た感じになってきましたね(笑)私は少し小さめのロゴ画像を設定しましたがロゴ画像を大きくして登録すれば...ヘッダー画像のごとく、メニューの上に大きくインパクトのあるロゴを設定できます。縦300pxぐらいを目安に組んでみてください。バランス良く見えますよ^^ヘッダーメニューの色を変更するヘッダー画像もしくはロゴ画像が登録できました。ロゴや画像のイメージによってはヘッダーメニューとのバランスが非常に悪く見える場合がありますよね...。先ほどの私のサンプルを例に挙げても違和感バリバリです^^;ということで、メニューの色も変更しちゃいましょう!ヘッダーメニューの色はCSSコードで変更します。「CSSコード?何それ?」と思ったあなたでも大丈夫。あなたはカラーコードを打ち変えるだけ...^^カラーコードとは、#で始まる6ケタの色を表すコードです。通常は#f05689など#を除く6ケタになりますが、黒のコード#000000のように同じ数字や、同じアルファベットが並ぶ場合は#000と3ケタにしてもOKです。腎威7のCSSコードの記述先はbase.cssの一番下に記述しましょうという人がもの凄く多いですが、私はおすすめしません。いうのも、コードを入力してからその都度、表示結果を見るのは非常に手間だからです。追加CSSに記述することをおすすめしますこちらの追加CSSであれば、ライブプレビューで表示結果を確認しながら調整できるので作業に無駄がなく、非常にやりやすいです。カスタマイズの際は追加CSSに記述しましょう。※カスタマイズは必ず子テーマでお願いします。←ここかなり重要!!追加CSSコードは以下になります。以下の画像のごとく、メニューの色が変更されます^^CSSコードのカスタマイズ方法もご説明しますのであなたのサイトイメージに合わせて色を変更してくださいね。以下、2つのサイトを立ち上げながら作業するとカラーイメージが作りやすいです。Huntメニューバーの背景色を変更する場合メニューバーの背景色(黒の部分)を変更する場合は以下のカラーコードで調整してください。変更箇所は2カ所になります。#fff;background:#000;←メニュー部分の背景色が変わります。#000;←メニュー両端の背景色が変わります。}メニューの文字色を変更する場合メニューの背景色に合わせて文字の色を変更する場合は以下のコードで調整できます。#fff;←ここで文字の色が変わります。background:#000;}さらに、サブカテゴリーを作りプルダウンで表示される文字の色を変更する場合は以下のコードで調整できます。#fea34e;←ここで文字の色が変わります。}メニューにマウスの色を乗せた時の色を変更する場合メニューにマウスを乗せた時の色は以下のコードで調整できます。#fea34e;←ここでホバー時の背景色が変わります。}メニューのアンダーラインの色を変更する場合メニュー下にあるオレンジの線の色を変更する場合は以下のコードで調整できます。#f7840f;の3pxの数字を変えれば線の太さが変更できます。none;としてください。消えます(笑)スマホのメニュー背景色を変更する場合ついでに、画面を縮小し、スマホ時に見えるメニューの背景色を変えるCSSコードもご紹介します。950px){.global-nav-panel{background-color:#000;}}ご紹介したCSSコードをコピーするとメニュー背景色が黒に変わりますのでbackground-color:#000;のカラーコードをあなたの好きな色に変更してくださいね。このCSSコードで「PC版とスマホ版の色のバランス」もしっかりと取ることができます^^以上がメニューカラーの調整方法です。触って試してみてくださいね^^腎威7の背景色をカスタマイズそれでは次に、背景色のカスタマイズについてご説明します。記事エリアの背景色ウィジェットの背景色フッターの背景色など、いろいろあります。背景色はサイト全体の色を占める割合が非常に多いので、背景色を変えるだけでかなり印象が変わります。これらの色を調整していきましょう。追加CSSに記述してくださいね。サイト全体の背景色を変えるCSSコードまずは、サイト全体の背景色から変更していきます。以下のCSSコードをコピペするだけサイト全体の背景色を変更できます。クリックでCSSコードを表示body{background:#f2f2ea;}CSSコードにあるbackground:#f2f2ea;のカラーコードで背景色を調整してください。ヘッダーの背景色を変えるCSSコードヘッダーロゴの画像を挿入した時に背景色と違和感が出るのを防ぐためヘッダーの背景色も変更しましょう。ヘッダーの背景色を変更する場合は2通りのパターンがあります。こんなパターン上記条件に当てはまる場合は以下のCSSコードを使用してください。#fff;}次にヘッダー画像をメニュー幅ピッタリで設定している場合。こんなパターンこちらの条件に当てはまる場合は以下のCSSコードを使用してください。#f2f2ea;}こちらのCSSコードを使用する場合はヘッダーロゴの背景ヘッダー画像の左右の背景それぞれ2箇所の色指定が必要です。CSSコードの部分にそれぞれどちらの背景色を変更するコードか書いているので確認しながら、カラーコードを変更してみてくださいね。記事の背景色を変えるCSSコード記事の背景色を変更するCSSコードはこちらです。記事の背景色は白い方が良いですよね^^クリックでCSSコードを表示.section-wrap{background:#fff;}上記コードは記事エリアの背景色が白になるCSSコードなので、コピペだけでOKです。サイドバーウィジェットの背景色を変えるCSSコードサイドバーウィジェットの背景色を変更するCSSコードはこちらです。サイドバーウィジェットの背景色も白がキレイだと思います。#fff;のカラーコードを変更してください。フッターの背景色を変えるCSSコードフッターエリアの背景色を変えるCSSコードはこちら。#000;}フッターエリアの背景色はあなたのお好みの色に変更してくださいね。copyrightの背景色を変えるCSSコードサイトの最下部にあるcopyrightの背景色も変更しましょう。CSSコードはこちらです。#f7840f;}ちなみに、以下のCSSコードを追加すればcopyrightの文字の色も変更できます。{color:#fff;←ここで文字色を変更できます。}こちらの色もお好みでどうそ...^^記事エリア・ウィジェットエリアに影を付けるCSSコードサイト全体の背景色はこれで全て設定できましたが色の設定の仕方によっては少しメリハリがなくなる場合があります。そんな時は、以下のコードを追加して記事エリアとウィジェットエリアに影を付けましょう。することで、同じ薄い色同士でもしっかりとメリハリがつきます。影をつけるためのCSSコードはこちらです。0.2);このコードの0.2の部分が影の濃度になりますので、うまく調整してくださいね。これだけでだいぶ見た目の印象が変わりましたね^^Before)After)腎威7の記事エリアをカスタマイズヘッダーエリア、背景色が設定できたところで次は記事エリアに関する装飾をそれぞれカスタマイズしていきましょう^^腎威7の見出しをカスタマイズこのブログテーマSTORKもそうでしたがどのテーマも今一つ記事の見出しがシンプルすぎるという印象を受けます。ブログの場合は記事と記事の見出しがシンプルでも読者に分かりやすく伝わればそれでいいのですがせっかくなら、もう少しだけカスタマイズしてオシャレにしてもいいと思います^^;ということで、コピペで使える腎威7の記事の見出しに関しては以下の記事にまとめました。こちらの記事を参考にカスタマイズしてみてください。初期設定はこれ^^;しかも、初期設定では...SNSボタンが表示されなくなっており「何でやねん!」とツッコミどころ満載!(笑)正直、謙虚すぎるというか...もう少し堂々と「シェアしてください!」と主張したボタンでいいですよね^^ということで、私もSNSボタンをカスタマイズしました。検索すれば以下のSNSボタンのカスタマイズ記事は見つかります。こんなボタンで、もう少しスッキリと、さらにLINEも追加しました。こちらのカスタマイズ記事は現在準備中です。お待ちください^^;腎威7のサイドバーをカスタマイズサイドバーの基本的な設定についても簡単に説明しておきますね。(よく読まれている記事)カテゴリーアフィリエイト広告など読者にブログの筆者であるあなたのことを知ってもらったり人気記事や最新記事一覧を表示させておくことで訪問者の滞在時間を伸ばし、いろんな記事を読んでもらうための大事な導線となります。アフィリエイトをする場合はアフィリエイト広告などを貼り収益化に繋げることも大事です。腎威7には...最新記事PV数ランキングを表示させるためのウィジェットが標準装備されています。これらを使うことで、訪問者の利便性が上がりあなたの記事をたくさん読んでもらうことで収益化、売り上げアップが見込めます。あなたのサイトが収益化できるようにサイドバーウィジェットもしっかりと整えていきましょう^^最新記事の表示方法まずは、最新記事の表示方法です。このウィジェットは記事を書くまで何も表示されませんがひとまずはしっかりと設置しておきましょう^^腎威7では...【腎威】サムネイル付き最近の投稿というウィジェットを使って最新記事を表示させます。ウィジェットをクリック続いて、ウィジェットを追加をクリックします。ウィジェットの追加画面に切り替わったら【腎威】サムネイル付き最近の投稿をクリックしましょう。あとはタイトル、表示件数を入力し表示方法をライブプレビューで確認しながらあなたのお好みで決定してください。※アイキャッチ画像のある記事がない場合サムネイルは表示されませんのでご注意ください^^;この設定だけ出来ていれば、記事を書き公開するだけで最新記事が画像付きで表示されます。続いて、PV数ランキングの表示方法です。PV数とは閲覧数のことです。PV数ランキングとは...訪問者にどれだけその記事が読まれたかというある種の人気記事ランキングになります。腎威7はこの人気記事ランキングも設定できるようにデフォルトで装備されています。PV数ランキングも先程の【腎威】サムネイル付き最近の投稿と同じくウィジェットの追加画面から設定します。ウィジェットをクリックし【腎威】PV数ランキング表示をクリックすれば追加できます。あとは、PV数ランキングを表示させるための設定を行います。10件だと分かりにくい。基本的にはPV数でOK。背景画像+テキストリスト、もしくはシンプルなリストまた、腎威7のPV数ランキングはランキングに含ませたくない記事も設定できます。記事投稿画面の右下の方に、以下の設定項目がありますのでPV数ランキングから除外にチェック入れておけばランキング表示されなくなります。訪問者に記事を読んでもらうならアフィリエイトの収益化に繋がる記事を読んでもらいたいですよね?なので、あまり収益と関係ないと思うような記事に人気が集まっている場合はランキング表示も上手くコントロールしながら収益化を考えるのも1つの手です^^また、PV数ランキングを分析することで人気記事から収益化したい記事に誘導すれば売り上げアップが期待できるかもしれません...。その辺は要領よくやりましょうね(笑)腎威7のフッターをカスタマイズ最後に、フッターのカスタマイズです。最近ではスマホからの検索流入も増えてきたのでフッターエリアのユーザビリティを上げておくとサイトの回遊率が上がり、SEO効果も高くなります。このサイトのテーマであるSTORKの場合はモバイルファーストをコンセプトに作られているのでしっかりとフッターエリアがカスタマイズしやすくなっています。腎威7もそういうことを見越してかフッターエリアを自由にカスタマイズするための機能は備えていますが、HTMLコードでフッターを組む必要があるのでWeb制作の知識がない人には非常にカスタマイズしにくい仕様となっているのが残念なポイントです。毎回フッターをHTMLコードでカスタマイズするのも非常に面倒だしフッターの使い勝手を良くするため私は新たにフッターウィジェットを追加しいつでも自由に気軽にカスタマイズできるよう手を加えました。カスタマイズ後は...サブコンテンツと同様フッターを3列で表示できるウィジェットを設定できるようにしました。腎威7でも以下のようにこのサイトとほぼ同じようなことができるようになっています。こちらのフッターを3列ウィジェットで表示するための方法は現在記事の準備中です^^;しばらくお待ちください。腎威7カスタマイズまとめ一部、当サイトの限定特典のカスタマイズもありましたが基本的に、今回紹介した記事通りに進めればある程度、誰が見ても恥ずかしくないそれなりに整って見えるサイトに仕上がります。腎威7は設定箇所も少なく初心者のあなたでも、ある程度基本的な部分を少し触るだけですぐに記事を書き始められるというメリットがあります。腎威7はSEOにも強くしっかりと読者の役に立つ記事さえ書き溜めていけばブログの有益化も全然夢ではありません。今回は特に初心者のあなたにとっては...たったこれだけカスタマイズすれば、だいぶサイトの印象が違って見えるということはお分かりいただけたかと思います。これから腎威7を購入しようか悩んでいるあなたにも腎威7を手に入れてからサイトを立ち上げるまでのイメージが掴めたのではないでしょうか?腎威は最初にお伝えした通り24,000人に利用されている信頼度の高いテーマです。この記事を役立ててあなたのサイトを見栄えのする信頼度の高いサイトに仕上げてみてくださいね^^腎威7のカスタマイズにこだわりたい方へこれから先、ブログアフィリエイトで稼ぐためにはブログの差別化は必須となってきます。いうのも、現在のアフィリエイター人口は約400万人。副業が解禁されたらネットビジネスの参入者つまり、アフィリエイター人口はさらに増加することになります。他のアフィリエイターに埋もれないようあらゆる策を講じる必要が出てきます。今後のブログアフィリエイトに必要なことデザインの重要性についてまとめた記事も書いてありますのでぜひ目を通してみてください。一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。腎威7カスタマイズ!記事の見出しをオシャレにする方法!この記事を書いた人ここあデザイン制作プロダクションを転々としながら、20年間勤務して2017年に独立。現在はネットとグラフィックデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。詳しいプロフィールはこちら人脈が成功への最短ルート!私がMonologueを勧める理由WordPress設置代行始めました!※設置代行はメルマガ読者限定です。THORSTORKここあデザイン制作プロダクションを転々としながら、20年間勤務して2017年に独立。現在はネットとグラフィックデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?●安定を求めれば求めるほど不安定になる理由とは?●いくら知識があっても、あなたが絶対に成功できない理由など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。印刷会社と取引がある制作プロダクションで様々な経験や実績を積み、2017年に独立。現在は、グラフィックデザインを生かしたWebデザインのビジネスを展開しながら、ネットを生かした情婦発信を行い、新しい働き方や楽しい人生の過ごし方についてもお伝えしています。