賢威カスタマイズに興味がある。
こんなアフィリエイトを実践しているパソコン初心者の方にカスタマイズについてご紹介していきます。
サイト管理人錦織大輝と申します。
この記事では、賢威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の単一記事の編集画面をご覧下さい。
続いて、賢威7での単一記事の投稿編集画面
分かりますか?
初心者がパッと見た印象で考えると賢威7では、かなり違いが出ている雰囲気になってきました。
やはり、賢威はワードプレステーマという商品。
ですから、カスタマイズというキーワードの検索需要増加に伴い、徐々に公開内容の制限をかけている面が顕著に出てきていると私は感じました。
まるで、Windowsが徐々にカスタマイズしにくい構成になった日のような変化です。
この点から、確実に賢威は6.2の方がテーマの編集を行いやすい事が明確になったのです。
では続いて、賢威カスタマイズでも人気がある見出しの編集について比較してみました。
賢威カスタマイズ6.2と7の違い2.見出し編集の違い
賢威でもテンプレートに標準で搭載されている以外の見出し(H2,H3,H4)タグを使いたい方も多いです。
では見出しは、賢威6.2と7はどう違うのか?をご紹介していきます。
賢威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で以下の様な画面を出して下さい。
すると、右上に小さな検索窓が出現します。
検索窓にh3、h4という文字を入力すれば、すぐに、h3,h4タグを探す事ができます。
ではこの作業工程を賢威7ならどうなるかを見ていきましょう。
賢威7で見出しをカスタマイズ
賢威7の場合は、design.cssはありません。
代わりとなるのが、base.cssとなります。
「外観」→「テーマの編集」→「base.css」という順になります。
先ほどご紹介したCtrl+Fでh3を検索し、3回目のクリックをすると、以下の場所にたどり着きます。
これより先は、先ほどのコードを貼り付ける作業をするだけで同じです。
よって、見出しカスタマイズのしやすさは賢威6.2と7は大きな違いや差は無いと判断出来ます。
では続いて、サイドバーのカスタマイズ方法についての比較をご紹介していきます。
賢威カスタマイズ6.2と7の違い3.サイドバーの違い
サイドバーのカスタマイズについて、賢威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を比較していきながら、カスタマイズしやすいのはどっち?を見てきました。
この最後は、記事コンテンツ内の装飾の違い。
賢威6.2で記事内カスタマイズは刺激慣れ?
賢威6.2を数多くのアフィリエイターが使用している中、
記事に使われてる文字装飾はもうそろそろ不要の時代
が訪れようとしています。
ですから、正直、この文字装飾の違いについては多用をしない事から徐々に効果は薄れていくと考えられます。
しかし、単体でインパクトを出す効果のある内容ははっきりと賢威7の方が見やすくなってきたと私は感じます。
この点については、賢威6.2仕様カスタマイズコードが7に使えない?にてご紹介していますので、あわせて参考にして下さい。
以上でこの記事でご紹介したかった内容を終えます。
この他にも賢威については、以下のようなコンテンツもご紹介しています。
賢威7カスタマイズでline風吹き出しが登場!htmlタグ不要
賢威7カスタマイズトップページメニュー作り方|htmlタグ付
賢威に限らず、ワードプレスについては、以下のようなコンテンツもご用意しています。
私は、アフィリエイトを通じて初めて自分でワードプレスを扱い、苦労も嫌になる時も経験しながら、いつか稼げるようになりたいと必死にあがいてきました。
今では、この経験を活かして、アフィリエイトコンサルティング活動も以下のような内容で実践しています。
もし興味がある内容がありましたら、ご覧ください。
物販アフィリエイトのaspについての評判などもご紹介しています。
Link-Aアフィリエイト評判や使い方を登録経験から解説2018
最後まで記事をお読みいただきありがとうございました。