Stinger3シリーズでずっとやりたかったことの一つに関連記事のカスタマイズがありました。
デフォルトの表示も好きなのですが、一度やってみたかったこのカスタマイズのおかげか一人当たりのPV数がかなり上がったので、もうちょっとこれで様子をみようと思います！
<2014/8/22追記あり>
single.phpをイジル。
オリジナルは必ずテキストエディタなりメモアプリなりに残しておいてください。
僕がよくやる方法の一つに、デスクトップにオリジナルのStinger3テーマをフォルダの名前を変えて保存しておくことです。cssは開けませんが、phpファイルなら開けるので復旧の早さが違います。
今回参考にさせていただいたサイトはコチラ。この情報力の多さもStinger3の魅力ですね。
 |
STINGER3の「関連記事」表示を横並びにカスタマイズしてみた |
僕テーマはStinger for FANSなのでちょっとStinger3とはコードが違います。なので上記のサイトを参考に少し手を加えて調整しました。それでは早速コードをイジリマス！
元のコード
<dl class="clearfix">
<dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
</a> </dt>
<dd>
<h4 class="saisin"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h4>
<?php if(is_mobile()) { ?>
<?php } else { ?>
<?php the_excerpt(); ?>
<?php } ?>
</dd>
</dl>
[/php]
変更後のコード
<ul>
<li>
<div class=”related-article-thumb”> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
</a> </div>
<div class=”related-article-title”>
<h7 class="kanren8"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h7>
</div>
</li>
</ul>
丸っこコピペをすればいけると思います。説明は参考にさせてもらったブログがとてもわかりやすいのです。というか、僕にはあまり理解できていません。(汗
ただオリジナルというか、関連記事のタイトルを個別にcssで調整したかったので新しくh7のクラスを配当しました。
CSSにコードを書き足す
上記の関連記事を調整するために以下のコードをcssの一番下に書き足してください。
style.cssはコチラ
/*---------------------------------
関連記事の表示調整
--------------------------------*/
#topnews ul{
list-style:none;float:left;
max-width:113px;
height:300px;
text-align:left;
padding-top:2.5px;
padding-left:2.5px;
clear: none;
/*background-color:#f2f2f2*/
border-style: solid;
border-width : 1px;
border-color: #A4A4A4;
margin-bottom:10px;
margin-left:10px
}
.related-article-thumb, .related-article-title{
padding: 0px !important;
}
h7{
font-size:15px;
line-height:1.5em;
}
smart.cssはコチラ
/*---------------------------------
関連記事の表示調整
--------------------------------*/
#topnews ul{
width: 145px;
height: 235px;
float: left;
padding:0px;
padding-left: 0px;
padding-right: 0px;
list-style: none;
overflow:hidden;
margin-top:8px;
margin-left: 3px;/*4*/
margin-right:3px;/*3*/
border-style: solid;
border-width : 1px;
border-color: #A4A4A4;
}
#topnews li{
width:145px;
}
.related-article-thumb, .related-article-title{
padding: 0px !important;
}
h7{
font-size: 13px;
line-height:1.5em
}
僕はこれでキレイにハマったのですが、表示が崩れる場合はご自身の好みに調整してください。Google Chromeの要素の検証を使うと調整スピードが唸ほど劇的に上がるのでオススメです！
---------<追記CSS>---------
「div」のclassを「kizi02」→「kizi」に変更。そしてStinger for FANSの場合「.sumbox02」のmarginの値が邪魔をしてセンタリング出来ずにいましたが、下記のコードを調整すればうまくいきました。上記の「smart.css」はmarginの値を変えた上で値に訂正しています。
sumbox02 {
margin-right: -20px;/*15*/
margin-bottom: 1px;
margin-left: -20px;/*-20*/
今回のマジで。
本来のStinger3の意図というか効力が消えてしまいかねないので一応注意はしてるつもりですが、今のところありがたいことに当ブログのアクセス数は減少してないので下手なカスタマイズはしてないのかなーと思ってます。
あまり劇的に変える知識と力は持っていないので諸先輩方のアドバイスで所々しかカスタマイズできませんが、それでもこうやって見た目もアクセス数も変わっていくのは楽しいですね:)
Stinger3からStinger for FANSにテーマを変更したことで、一からカスタムした箇所が多いので、近々今までのカスタマイズをまとめようと思います！
