TA2OWeb.(たつおウェブドット)

関連記事の表示をカスタマイズ。横並びにしてスッキリさせる!【Stinger for FANS】<追記あり>

 

Stinger3シリーズでずっとやりたかったことの一つに関連記事のカスタマイズがありました。

デフォルトの表示も好きなのですが、一度やってみたかったこのカスタマイズのおかげか一人当たりのPV数がかなり上がったので、もうちょっとこれで様子をみようと思います!

<2014/8/22追記あり>

SPONSORED LINK



single.phpをイジル。

オリジナルは必ずテキストエディタなりメモアプリなりに残しておいてください。

僕がよくやる方法の一つに、デスクトップにオリジナルのStinger3テーマをフォルダの名前を変えて保存しておくことです。cssは開けませんが、phpファイルなら開けるので復旧の早さが違います。

今回参考にさせていただいたサイトはコチラ。この情報力の多さもStinger3の魅力ですね。

STINGER3の「関連記事」表示を横並びにカスタマイズしてみた

僕テーマはStinger for FANSなのでちょっとStinger3とはコードが違います。なので上記のサイトを参考に少し手を加えて調整しました。それでは早速コードをイジリマス!


元のコード



変更後のコード



丸っこコピペをすればいけると思います。説明は参考にさせてもらったブログがとてもわかりやすいのです。というか、僕にはあまり理解できていません。(汗

ただオリジナルというか、関連記事のタイトルを個別にcssで調整したかったので新しくh7のクラスを配当しました。


CSSにコードを書き足す

上記の関連記事を調整するために以下のコードをcssの一番下に書き足してください。


style.cssはコチラ




smart.cssはコチラ



僕はこれでキレイにハマったのですが、表示が崩れる場合はご自身の好みに調整してください。Google Chromeの要素の検証を使うと調整スピードが唸ほど劇的に上がるのでオススメです!



———<追記CSS>———
「div」のclassを「kizi02」→「kizi」に変更。そしてStinger for FANSの場合「.sumbox02」のmarginの値が邪魔をしてセンタリング出来ずにいましたが、下記のコードを調整すればうまくいきました。上記の「smart.css」はmarginの値を変えた上で値に訂正しています。




今回のマジで。
本来のStinger3の意図というか効力が消えてしまいかねないので一応注意はしてるつもりですが、今のところありがたいことに当ブログのアクセス数は減少してないので下手なカスタマイズはしてないのかなーと思ってます。


あまり劇的に変える知識と力は持っていないので諸先輩方のアドバイスで所々しかカスタマイズできませんが、それでもこうやって見た目もアクセス数も変わっていくのは楽しいですね:)


Stinger3からStinger for FANSにテーマを変更したことで、一からカスタムした箇所が多いので、近々今までのカスタマイズをまとめようと思います!

▼シェアしてもらえるとめっちゃ嬉しいです:)
  2015/01/24
       
SPONSORED LINK