ワードプレスカスタマイズ|賢威6.2と7比較実践記

賢威カスタマイズを6.2と7で比較アフィリエイト実践記

賢威カスタマイズに興味がある。

こんなアフィリエイトを実践しているパソコン初心者の方にカスタマイズについてご紹介していきます。

サイト管理人錦織大輝と申します。

この記事では、賢威6.2と7をカスタマイズという比較した内容として、

賢威カスタマイズ6.2と7の違い1.テーマの編集比較

賢威カスタマイズ6.2と7の違い2.見出し編集の違い

賢威カスタマイズ6.2と7の違い3.サイドバーの違い

賢威カスタマイズ6.2と7の違い5.文字装飾の違い

以上の内容についてご紹介していきますので、ぜひ作業しやすい環境を選ぶ参考にお役立て下さい。

賢威カスタマイズ6.2と7の違い1.テーマ編集比較

賢威カスタマイズ比較

賢威7と6.2を比較する上で、まずは決定的な違いをご紹介していきます。

まずは、賢威6.2の単一記事の編集画面をご覧下さい。

賢威6.2カスタマイズテーマの編集

続いて、賢威7での単一記事の投稿編集画面

賢威7カスタマイズ単一記事の編集画面

分かりますか?

初心者がパッと見た印象で考えると賢威7では、かなり違いが出ている雰囲気になってきました。

やはり、賢威はワードプレステーマという商品。

ですから、カスタマイズというキーワードの検索需要増加に伴い、徐々に公開内容の制限をかけている面が顕著に出てきていると私は感じました。

まるで、Windowsが徐々にカスタマイズしにくい構成になった日のような変化です。

この点から、確実に賢威は6.2の方がテーマの編集を行いやすい事が明確になったのです。

では続いて、賢威カスタマイズでも人気がある見出しの編集について比較してみました。

 

賢威カスタマイズ6.2と7の違い2.見出し編集の違い

賢威カスタマイズ6.2と7違い|見出し

賢威でもテンプレートに標準で搭載されている以外の見出し(H2,H3,H4)タグを使いたい方も多いです。

では見出しは、賢威6.2と7はどう違うのか?をご紹介していきます。

賢威6.2の見出しカスタマイズ例

実際にカスタマイズ出来る賢威6.2の見出しパターン

をいくつかご紹介していきます。

見出しデザイン黄色帯+黒文字

賢威見出しカスタマイズ6.2

#main-contents h3 {
position:relative;
margin:0 -1px;
font:bold 30px/1.6 Arial, Helvetica, sans-serif;
text-align:center;
color:#333;
background:#f0e800;
-webkit-transform: rotate(-3deg) skew(-3deg);
-moz-transform: rotate(-3deg) skew(-3deg);
-o-transform: rotate(-3deg) skew(-3deg);
-ms-transform: rotate(-3deg) skew(-3deg);
transform: rotate(-3deg) skew(-3deg);
text-shadow:1px 1px 0 rgba(255,255,255,1);
box-shadow:	0 1px 2px 0 rgba(0,0,0,0.2),
30px 0 0 0 #f0e800,
-30px 0 0 0 #f0e800;
}

このような見出しを使いたいと思うなら、

賢威6.2では、「外観」→「テーマの編集」→「design.cs」へ進みます。

そして、以下のコードを見つけ出します。

/*--------------------------------------------------------
メインコンテンツ(本文)
--------------------------------------------------------*/
#main-contents{ font-size: 1.4em; }
#main-contents .contents{
margin-bottom: 3.5em;
padding: 0 10px;
}
/*●H2タグ*/
#main-contents h2{
margin: 0 0 1.5em;
padding: 0.9em;
border-top: 3px solid #000;
background: url(./images/title/bg-conts-h2.gif) left top repeat-x #eaeaea;
font-size: 1.286em;
font-weight: bold;
}
#main-contents h2 a:link,
#main-contents h2 a:visited{ color: #333; }
#main-contents h2 a:hover,
#main-contents h2 a:active{ color: #f60; }
#main-contents h2.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
}
/*●H3タグ*/
#main-contents h3{
margin: 0 0 1.5em;
padding: 0.8em;
font-size: 1.143em;
font-weight: bold;
border: 2px solid #4169E1;
border-radius:18px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

これは、私自身のサイトの実際の仕様となっています。

この

/*●H3タグ*/

という下の部分を切り替えるだけで作業は完了。

探すのが大変。

という方は、cntl+Fで以下の様な画面を出して下さい。

賢威6.2カスタマイズ見出しの探し方

すると、右上に小さな検索窓が出現します。

検索窓にh3、h4という文字を入力すれば、すぐに、h3,h4タグを探す事ができます。

ではこの作業工程を賢威7ならどうなるかを見ていきましょう。

賢威7で見出しをカスタマイズ

賢威7の場合は、design.cssはありません。

代わりとなるのが、base.cssとなります。

「外観」→「テーマの編集」→「base.css」という順になります。

先ほどご紹介したCtrl+Fでh3を検索し、3回目のクリックをすると、以下の場所にたどり着きます。

賢威7見出しカスタマイズやり方

これより先は、先ほどのコードを貼り付ける作業をするだけで同じです。

よって、見出しカスタマイズのしやすさは賢威6.2と7は大きな違いや差は無いと判断出来ます。

では続いて、サイドバーのカスタマイズ方法についての比較をご紹介していきます。

 

賢威カスタマイズ6.2と7の違い3.サイドバーの違い

賢威カスタマイズ6.2と7比較|サイドバー

サイドバーのカスタマイズについて、賢威6.2からまずはご紹介していきます。

賢威6.2カスタマイズサイドバー色やデザイン変更

賢威6.2では、「外観」→「テーマの編集」→「design.css」にて、以下の場所を探します。

/*--------------------------------------------------------
サブコンテンツ / サイドバー
--------------------------------------------------------*/
#sub-contents,
#sidebar,
#sidebar-in,
#sub-contents-in{
margin: 0;
padding: 0;
}
* html #sub-contents,
* html #sidebar{ overflow: hidden; }
#sub-contents .sub-contents-btn,
#sidebar .sidebar-btn{ display: none; }
.sub-column{ font-size: 1.2em; }       /*全体の文字の大きさ*/
.sub-column li{ list-style: none; }
/*●コンテンツ*/
.sub-column .contents{
margin-bottom: 1.5em;
padding: 0.5em;
}

この場所におけるカスタマイズ可能なのは、以下のような配色変更。

・サイドバー文字色

・サイドバー背景色

・サイドバーデザイン変更

・サイドバー見出し枠の色

・サイドバーの幅

・サイドバー見出し文字の大きさ

・サイドバー全体への背景色変更

等を修正可能となっています。

中でも一番簡単にサイドバーを変えるのは、背景色。

#sub-contents,
#sidebar,
#sidebar-in,
#sub-contents-in{
margin: 0;
padding: 0;
background-color:#a3e3ff

こうしたバックグラウンドカラーという指定を入れて、色をカラー表~指定するだけで変更可能。

16進数 カラーネーム 16進数 カラーネーム 16進数 カラーネーム
  #000000 Black   #87CEEB SkyBlue   #F0E68C Khaki
  #000080 Navy   #87CEFA LightSkyBlue   #F0F8FF AliceBlue
  #00008B DarkBlue   #8A2BE2 BlueViolet   #F0FFF0 Honeydew
  #0000CD MediumBlue   #8B0000 DarkRed   #F0FFFF Azure
  #0000FF Blue   #8B008B DarkMagenta   #F4A460 SandyBrown
  #006400 DarkGreen   #8B4513 SaddleBrown   #F5DEB3 Wheat
  #008000 Green   #8FBC8F DarkSeaGreen   #F5F5DC Beige
  #008080 Teal   #90EE90 LightGreen   #F5F5F5 WhiteSmoke
  #008B8B DarkCyan   #9370DB MediumPurple   #F5FFFA MintCream
  #00BFFF DeepSkyBlue   #9400D3 DarkViolet   #F8F8FF GhostWhite

色のコードはこの他にも多数ありますので、ぜひ自分の好みに合う色を探してみてください。

賢威7カスタマイズサイドバー色やデザイン変更

賢威7の場合は、「外観」→「テーマの編集」→「base.css」で変更します。

しかし、賢威7はシンプルな色にはなりますが、背景色が統一感をもつ仕上がりになっています。

ですから、背景色は逆になにもしないほうが綺麗な場合が多いと思います。

もし変えるなら、見出しでしょうか?

こちらのコードから、変更可能。

.sub-conts .section-wrap .section-in .section-title,
.sub-conts .section-wrap .article-header .section-title{
margin: 0 -10px 30px;
padding: 0 0 11px;
border-bottom: 4px solid #cccccc;
font-weight: normal;
font-size: 1.125em;

こちらのなかで、border-bottomを以下の目的毎にカスタマイズが可能。

サイドバー見出し枠線を上のみにカスタマイズ

border-top: 4px solid #cccccc;

サイドバー見出し枠線を下のみにカスタマイズ

border-bottom: 4px solid #cccccc;

サイドバー見出し枠線を右のみにカスタマイズ

border-right: 4px solid #cccccc;

サイドバー見出し枠線を左のみにカスタマイズ

border-left: 4px solid #cccccc;

小さな事からではありますが、サイトの全体の雰囲気を少し柔らかくする事も固くする事も出来ます。

では続いて、賢威カスタマイズについて、7と6.2の記事コンテンツについて比較していきましょう。

 

賢威カスタマイズ6.2と7の違い5.文字装飾の違い

賢威7と6.2カスタマイズ比較|記事内装飾

賢威7と6.2を比較していきながら、カスタマイズしやすいのはどっち?を見てきました。

この最後は、記事コンテンツ内の装飾の違い。

賢威6.2で記事内カスタマイズは刺激慣れ?

賢威6.2を数多くのアフィリエイターが使用している中、

記事に使われてる文字装飾はもうそろそろ不要の時代

が訪れようとしています。

ですから、正直、この文字装飾の違いについては多用をしない事から徐々に効果は薄れていくと考えられます。

しかし、単体でインパクトを出す効果のある内容ははっきりと賢威7の方が見やすくなってきたと私は感じます。

この点については、賢威6.2仕様カスタマイズコードが7に使えない?にてご紹介していますので、あわせて参考にして下さい。

以上でこの記事でご紹介したかった内容を終えます。

この他にも賢威については、以下のようなコンテンツもご紹介しています。

賢威ヘッダー画像挿入操作方法

賢威アドセンス貼り方プラグインおすすめの設定方法画像付

賢威7カスタマイズヘッダーサイズ|6.2との決定的な違い

賢威7カスタマイズでline風吹き出しが登場!htmlタグ不要

賢威7カスタマイズトップページメニュー作り方|htmlタグ付

賢威に限らず、ワードプレスについては、以下のようなコンテンツもご用意しています。

ワードプレス画像挿入が出来ない!エラー対処法実践記

ワードプレスサイトマッププラグインおすすめや設定方法画像付

ワードプレステーマインストール方法|賢威&TCD実践記

ワードプレスコメント欄とアフィリエイト内部seo対策の関係性

ワードプレスアクセス解析i2i設置方法やおすすめの使い方

ワードプレスサイドバー画像挿入の簡単な作り方やきれいに見せる配置

ワードプレスアイキャッチ画像設定は自動主導どっち?体験談

ワードプレス固定ページと投稿記事の違いや正しい使い方

ワードプレス記事内画像リンクhtmlタグ設置方法動画画像解説付

ワードプレス記事内画像挿入方法やサイズ選びのコツ実践記

ワードプレス記事投稿画像付ビジュアルテキストモードどっち?

ワードプレス初心者が最初に知るべき作業や設定工程リストまとめ

ワードプレスカテゴリ設定方法賢威画像付|seo対策のコツ

ワードプレスリンクエラー404対策プラグイン設定方法画像付

ワードプレス記事コピー防止右クリック対策プラグイン設定画像付

ワードプレス想い遅いを解消おすすめプラグイン設定画像付

ワードプレスカテゴリ並び替えやタグ設定プラグイン操作画像付

ワードプレス更新通知プラグイン設定やメリット

ワードプレスインデックス高速化プラグイン設定方法画像付

ワードプレスサイドバー人気記事表示プラグイン設定画像付

ワードプレスping送信プラグインインストール設定方法画像付

ワードプレス関連記事表示プラグイン比較とおすすめ実践記

サーチコンソール用サイトマップワードプレス設定方法画像付

ワードプレスパムコメント対策|akismet設定方法画像付

ワードプレスのパーマリンク設定方法おすすめや失敗後悔体験記

ワードプレス管理画面更新表示対処アフィリエイト実践失敗体験記

ワードプレス管理画面にログインできない?url入力画像付

ワードプレスはメリット以前にアフィリエイト必須の時代?

ワードプレスお名前.comインストール方法画像付

ワードプレステーマアフィリエイト用最強は?実践記

私は、アフィリエイトを通じて初めて自分でワードプレスを扱い、苦労も嫌になる時も経験しながら、いつか稼げるようになりたいと必死にあがいてきました。

そして、2015.2016.2017.2018の実践の末、結果的に会社に頼る必要がなく、アフィリエイトで生活できる環境を手に入れる事が出来ました。

今では、この経験を活かして、アフィリエイトコンサルティング活動も以下のような内容で実践しています。

アフィリエイトスカイプサポート

アドセンス審査代行

アフィリエイトコンサル生募集アドセンス物販併用術無期限対応

アフィリエイトセミナー東京2018開催決定

もし興味がある内容がありましたら、ご覧ください。

物販アフィリエイトのaspについての評判などもご紹介しています。

Link-Aアフィリエイト評判や使い方を登録経験から解説2018

最後まで記事をお読みいただきありがとうございました。

 

私へのご依頼も対応しております。
アドセンス審査代行

コメントを残す

サブコンテンツ

錦織大輝アフィリエイトサポートメニュー2018


アフィリエイトコンサルについては、2つのプランを用意。 超初心者で、意味も用語も知らない方への無期限コンサル アフィリエイトコンサル超初心者向け無期限プラン にてご紹介しています。

最近のコメント

アフィリエイト講座セット決済済み又は銀行振り込み希望の方へ


Skype音声通話又は銀行振り込み口座確認を希望の方へ

銀行振り込み先確認者は、希望のプランと振込先確認というメッセージでご連絡ください。
Skype音声はあくまでも決済完了者のみコンタクトを取っております。


skype希望の方は、まずは、chatにてご連絡ください。
24時間以内に確実にご回答させていただくことをお約束します。

twitter配信中

このページの先頭へ