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

TOP
SEO・デザイン・ライティング
ワードプレスカスタマイズ|賢威6.2と7比較実践記

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

[SEO・デザイン・ライティング]

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

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

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

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

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

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

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

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

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

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

1 賢威カスタマイズ6.2と7の違い1.テーマ編集比較
2 賢威カスタマイズ6.2と7の違い2.見出し編集の違い
3 賢威カスタマイズ6.2と7の違い3.サイドバーの違い
4 賢威カスタマイズ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、ｈ4という文字を入力すれば、すぐに、h3,h4タグを探す事ができます。

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

賢威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を以下の目的毎にカスタマイズが可能。

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