読者です 読者をやめる 読者になる 読者になる

Take it easy!~札幌在住アフィリエイターのメモ~

札幌在住の専業アフィリエイターのただの日記です。気になったこと、疑問に思ったことをつらつらとメモしています。

AFFINGER3を導入したので、自分なりにカスタマイズしてみた

おひさ!

もうそろそろメインサイトをもう一つ二つ作っておかないとヤバいと思っているKevinです。

私が運営するサイトでは、TCDの【Reviewer】を導入しているものがいくつかあります。

その中の一つが2015A8サイトコンテストにて受賞したわけです。

大変感謝しているのですが、SEOの観点から見るとやはりSTINGER以上のものは無いのかな、と言う印象です。

このサイトにはこのままReviewerを使用していこうと思います。

その他のサイトにもReviewerを導入したものがいくつかあるのですが、その中の一つを【AFFINGER3】に変更しました。

サイトコンテスト受賞のサイトは、A8netから実際に多くの方が通ってきた1本のリンクがあり、そのおかげもあってか上位掲載されています。

まあ、先に記事にしたヤツです。

kevin.hatenablog.jp

このサイト、今でも変わらず上位掲載されており、15万~20万程度の収益をコンスタントに上げています。

なので、現状では特にテンプレートを変更する必要は無いと思われます。

Reviewerはすごくきれいで一際目を引くデザイン性の高さは秀逸です。

このサイトはたまたまうまく行っていますが、うまく行っていないサイトもあるんです。

同じ記事数、内容はそちらの方が絶対に良いと思うのですが、全然上がってこないんですよね。

狙っているキーワードのライバルの強さの違いもあるかとは思いますが、あまりに上がってこないため、思い切ってAFFINGER3に変えてみることにしました。

このまま使用しても凄いとの評判ですが、私はそれでは満足しません。

色々といじってカスタマイズしちゃいましたので、忘れないようにメモっておきます。

AFFINGER3のカスタマイズしたところ

h2見出しをシンプルに。

AFFINGER3のh2は、吹き出しのようなデザインで、カラーをカスタマイズすることができて便利なのですが、これを見ると一発でAFFINGER3かSTINGERシリーズだなってわかっちゃいます。

別にわかっても良いんですけど、よりシンプルに仕上げたいため、cssにてh2を全削除。

.post h3の部分をそのまま移植し、文字の大きさを20pxに変更。

更に、『background:』にて先頭にちょっとした画像を表示させるようにカスタマイズしました。

画像と文字が被らないように、『padding-left:』にて調整しています。

サイドバーのリンク文字の間隔を広くする。

#side aside .st-pagelists .children {
padding:0px 0px;
}

この部分の『padding:0px』を『padding:5px』に変更。

サイドバーのリンクの先の矢印を削除

『#side aside ul li ul li』内の『background-image: url(images/…);』を削除。

『padding-left:』を微調整しました。

リンクボタンを別途用意。

Reviewer】のボタンを流用し、cssにコピペ。

内部リンク用、アフィリエイトリンク用として活用しています。

横2分割できるようにショートコードを作成。

これはAFFINGER3にも付いている機能ですが、私はいつものように【Refine SNOW】の分割ショートコードを流用しています。

これにより、最大12分割できるようになります。

PCでは5:7の2分割、レスポンシブで縦表示になるようにカスタマイズしています。

使い慣れているからこっちの方がスムーズなんですよね。

記事一覧、関連記事のサムネイルのサイズ調整

AFFINGER3では、サムネイルが100×100となっています。

私が今回強化したいジャンルでは、もっと大きなサムネイルが必要であるため、これを150×150に変更しています。

.kadomaru img{
border-radius:150px;
}

・100pxを150pxに変更。

.kanren dt {
float: left;
width: 180px;
}

.kanren dt img {
width: 180px;
}

.kanren dd {
padding-left: 200px;
}

・上から100を180、100を180、110を200に変更。

本当は200×150とかにしたいんですけど、言うことを聞いてくれないため一旦諦めました。

レスポンシブでは、ノーマルサイズで表示できるようにしています。

『/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {』

内に、

.kanren dt {
float: left;
width: 100px;
}

.kanren dt img {
width: 100px;
}

.kanren dd {
padding-left: 110px;

を記述して対応しました。

記事一覧の表示方法を変更。

タイトルとカテゴリの位置を入れ替えています。

『itiran-thumbnail-on.php』内の

『<div class="blog_info <?php st_hidden_class(); ?>">』

&nbsp;<span class="pcone"><i class="fa fa-tags"></i>
<?php the_category( ', ' ); ?>

の順番を入れ替えただけ。

投稿日時を非表示にしてしまうと、カテゴリやタグの表示も消えてしまいますので、php内の投稿日時部分を削除しています。

文字サイズ、幅も変更しましたが、どうやったか忘れてしまいました(笑)

 

 

まあ、こんな感じです。

STINGERやAFFINGERは、自分でもカスタマイズしやすくてすごく好きです。

私はあまりcssphpには詳しくはありませんが、それでもこの程度ならカスタマイズすることができるので、かなりおすすめのテンプレートだと思うんですよね。

今後、色々なテンプレートが登場することになると思いますが、この2つは手放せないアイテムです。