TOP賢威カスタマイズ賢威カスタマイズひつじくんこの記事では賢威7のカスタマイズを徹底解説するよ!!当サイトの採用している「賢威7」は、アフィリエイト初心者でも扱えるように最初から見た目が完成されたテンプレートに仕上がっています。いった意味で賢威7は初心者にも優しいテンプレートなのですね。見た目が完成されているからカスタマイズが不要...というわけではありません。カスタマイズをしないとライバルサイトに差をつけられませんからね。サイトのカスタマイズにはある程度HTML/CSSの知識が必要になってきます。ここが初心者にとっては厄介な部分ですね。おおかみくん俺が1からカスタマイズしていくなんてできるのかなぁ...ひつじくん大丈夫!誰にでもわかるように詳しく説明させてもらうから!初心者が1からカスタマイズするのはハードルが高いかもしれません。そこで当サイトではHTML/CSS初心者でもカスタマイズできるよう、ほぼコピペだけで済むカスタマイズを仕上げさせてもらいました。このカスタマイズ法を使えば、当サイトのような見た目のサイトを簡単に作ることができますよ!おおかみくんおおお!!ワクワクしてきた!なお、記事でカスタマイズするのは「賢威7クール版のNAVY」という種類のテンプレートです。クール版以外のテンプレートでは少しだけカスタマイズが変わってきますのでご注意ください。【賢威7】ヘッダーカスタマイズひつじくんまずはヘッダーデザインを綺麗にして、オリジナリティを持たせていこうか!僕がサイトをデザインする時は、まずはヘッダーからカスタマイズしていきます。「ヘッダー」はサイトの顔とも言える部分です。ユーザーに第一印象を与える非常に重要な部分ですので、ここを綺麗に使いやすくデザインしておくのは必須です。オリジナリティを持たせてサイトを覚えてもらおうとする努力をすれば尚良しかと思いますね!ではどうやって賢威7のヘッダー部分をカスタマイズしていくのかをこれからお話ししましょう。言っても、賢威は最初から見た目がかなり完成されているのでほんの少しのカスタマイズでオッケーですよ!メニューを追加ひつじくん最初にメニューを配置してみようか!まずは賢威7にメニューを追加してあげましょう。メニューに追加したい記事を用意した後に、「カスタマイズ」>「メニュー」と進めば簡単にメニュー作成できますよ!詳しいメニュー作成方法については以下の記事に記載しておきますので、参考にしてみてください。賢威7のメニュー作成方法メイン画像を削除/変更するひつじくん次はメイン画像の削除/変更をしてみようか!次にメイン画像を削除(追加)します。デフォルトでは地球儀の画像が貼られていますが、僕のカスタマイズではこれを削除させていただきました。管理画面の「賢威の設定」<「トップページ」の順に進むと「メイン画像」という項目が見つかるので、ここのURLを削除すればオッケーです。画像を変更したい場合は「画像を設定する」のボタンから設定してください。ヘッダー背景色を変えるひつじくん次はヘッダーの背景色を変えてみようか!ヘッダー背景を変えてみます。これも変更は簡単なので、当サイトのカスタマイズコードをここに載せさせていただきましょう。solid;/*影をつける*/}これを賢威7のスタイルシート(base.css)に追記するだけでオッケーです。管理画面から「外観」<「テーマ編集」<「base.css」と進んで、その最下部にこのコードを追記してください。ヘッダー背景色は黒(#181944)、文字色はオレンジ(#E5A800)となっていますが、これはお好きにカスタマイズしちゃってくださいね。カラーコードを参考に好きな色を選んできて、そのコードに書き換えるだけでオッケーなので!おおかみくんたったこれだけでいいのか!!【応用】ヘッダーロゴを配置するおおかみくんでももっとオリジナルなヘッダーに仕上げたいなぁ〜。ひつじくんそれならヘッダーロゴを作って配置するようにするといいよ〜!「もっと綺麗なヘッダーに仕上げたい!」というならヘッダーロゴを配置するようにしましょう。ヘッダーロゴを入れるとサイトの印象はかなり変わりますし、オリジナリティがグッと高まります。このように背景色に合わせてヘッダーロゴ画像を用意し、それを「賢威の設定」から配置するだけでオッケーなので割と簡単ですよ!ロゴ画像は自分で作っても良いですし、それが難しいならココナラなどで外注しても良いですね!詳しい方法に関してはここでは書ききれないので、以下の記事を参考にしてみてください。【賢威7】記事のカスタマイズ次は賢威7の記事(メイン)部分のカスタマイズに移ります。記事はサイトの命です。読者に分かりやすく伝えるための工夫を必死に凝らす必要があるので、カスタマイズする上で最もこだわるべき部分かもしれません。そこで、ここでは賢威7を利用する上で取り入れたい記事カスタマイズをまとめてみました!記事に背景色をつけるひつじくん最初は記事に背景をつけることから始めようか!まずカスタマイズしたいのは記事の背景ですね。賢威7のデフォルトでは背景色が設定されていませんので、白の背景を設定して記事っぽくしたいと思います。#fff;}おおかみくんおお!!確かに記事っぽく見た目が変わったぞ!!もともとの賢威7デフォルトでもオシャレではあるんですけれど、やはり記事は背景が白い方が見やすい傾向がありますので、この設定はしておくことをおすすめします。見出しをカスタマイズするひつじくん背景ができたし、次は見出しをカスタマイズしてみよっか!次にカスタマイズしたいのは賢威7の見出し部分です。テンプレートのままでも十分綺麗な見出しにはなっていますが、これをもう少しだけカスタマイズしてみたいと思います。コピペで使える賢威7の見出しを8つ用意しておきましたので、こちらを参考にして見出しをカスタマイズしてみてくださいませ!見出しカスタマイズへ!SNSを設置するおおかみくんやだ、私のSNSボタンダサすぎ!?賢威7テンプレでは既存のSNSボタンが小さく、ソーシャルメディアでの拡散が少なくなりそうなのが問題です。そこで今回はコピペでできるSNSボタンを用意しておきました。これは当サイトで使っているものと全く同様のものですね。これも是非利用するようにしてみてくださいませ!SNSを設置させる【賢威7】サイドバーのカスタマイズ次は賢威7のサイドバーをカスタマイズしていきましょう。サイドバーはメインを補助する名脇役です。メインで紹介している商品の販売ページへと誘ったり、ユーザーを興味のある記事へと導いてくれたりするのが主な役割ですね。そんな脇役のサイドバーも綺麗に整えておくとユーザーにとっても利用しやすいサイトになり、売り上げアップが見込めます。そのための賢威7カスタマイズもガッツリまとめさせてもらいましたよ!PV数ランキングの設置方法まず絶対設置しておきたいのがPV数ランキングです。管理画面の「カスタマイズ」>「ウィジェット」と進めば、サイドバーにPV数ランキングを簡単に設置できるようになっています。PV数ランキングがあればサイトの回遊率は上がりますし、ユーザーにとってもわかりやすいですからね。これは他のテンプレートにはない賢威7の独自機能ですので必ず設定しておきたいです。最近の投稿の設置方法また、もうひとつ便利なのが「最近の投稿」です。これもPV数ランキングと同様に「カスタマイズ」>「ウィジェット」から追加することができます。好みに合わせて色の調整をあとは好みに合わせてサイドバーウィジェットの背景色を調整してください!ウィジェット背景を白くするメリハリを持たせるために背景を白くするのもアリでしょう。!important;}これを賢威7のスタイルシート(base.css)の好きな場所に追記するだけで背景を白くすることができます。サイト背景と同色にするまた、サイト背景と同色にしてサイドバーを溶け込ませるように仕上げるのもアリですよ!これによりメイン記事が目立つというメリットもあります。}backgraundの「#edf3fb」のカラーコードはテーマによっては調整が必要です。賢威クール版NAVYを使っている人ならこのまま貼り付けて大丈夫ですけど、他の人は背景色と同色のカラーコードを設定するようにしましょう。背景のカラーコードはChromeの「ディベロッパーツール」を使えば簡単に調べることができますよ。難しいかもしれませんが、興味のある人はチャレンジしてみてください。【賢威7】フッターカスタマイズ最後に賢威7のフッターカスタマイズをしましょう。フッターカスタマイズは任意ではありますが、カスタマイズをしておくとサイトの回遊率は間違いなく上がるでしょう。サイト下部まで降りた時に何も記事がなかったら離脱をされてしまう可能性が高くなるんですけれど、フッターを開発していれば他の記事に飛んでくれるカモしれませんから、離脱リスクを軽減できるというわけですね!フッター開発の方法ではそのための賢威7カスタマイズを見ていきましょう。言ってもフッター開発は僕の差別化要素の1つなので大っぴらに晒す気はありません。そのため、賢威7購入者の限定特典としてフッター開発の記事を付けさせていただきます。僕のサイトを介して購入いただければ記事を読めるようになっていますので、購入者の方はどうぞご利用くださいませ。【購入者限定】フッター開発へ!【賢威7】カスタマイズまとめAFFINGER4の全カスタマイズでした。HTML/CSSの初心者でも苦戦しないように、ほとんどコピペでサイトを仕上げられるように設計をしておきました。