Stinger5のカスタマイズ

昔のブログでStinger5をカスタマイズしていた時のメモです。

いくらかアクセスありますので、残しておくことにします。

SNSボタンを表示させない

内容を以下に抜粋します。

トップページの記事一覧、個別投稿のどちらも消えてしまうので個別に非表示にしたい場合は次のCSSをご活用ください。

1
2
3
4
5
/* トップページのSNSボタンを消す */
.home .sns {display: none;}
/* 個別記事のSNSボタンを消す */
.single .sns {display: none;}

引用元: http://www.nishi2002.com/12884.html

本文のフォントサイズ、改行ピッチの変更

スタイルシート(style.css)から下記にアクセスします。

そして、青がデフォルト、赤が新設定です。 (変更前も、できるだけコメントとして残すようにしました。)

/*——————————– 各フォント設定 ———————————*/ p {

font-size: 16px; line-height: 1.8;

margin-bottom: 2em; /*font-size: 14px; line-height: 27px; margin-bottom: 20px;*/ }

CSSの変更が反映されない時の対処方法

CSSのコードを変更し、その出来具合をWEBないしはプレビューで確認することがあります。

その際、変更分が反映されないことがあります。

その原因は、Web閲覧の「キャッシュ」にあります。

この「キャッシュ」をクリアして、対象ページを読み込めば、変更分が反映されていることを確認できます。

<Google Chromeの場合>

①「閲覧履歴データの消去」をクリック

WS000000

②「キャッシュされた画像とファイル」にCheckを入れて実行

WS000001

サイドバーのNew Post部分のアレンジ

NewPost部分の

①フォントを小さくする

②投稿日を表示する

③枠に影をつける

④枠内下部の余白を減らす

です。

順にメモしておきます。

①フォントを小さくする

Style.css内のコードを変更します。

/*——————————– 関連記事表示部分 ———————————*/ /* タイトル名 */ #kanren dd h5 {

font-size: 14px;

font-weight: bold; padding: 0px; margin-bottom: 5px; サイズを16=>14に変更しました。(青字部分)

16だと大きいし、12だと小さい印象でした。

②投稿日を表示する

今度は「newpost.php」内のコードを変更します。

New Postの冒頭要約文を削除して、投稿日を表示するように変更します。

■次の3行を削除

<div class="smanone">
  <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
</div>

■削除した部分に以下を追加

<p><br>投稿日: <?php

echo get_post_time( 'Y/m/d' ); ?></p>

これでタイトルから1行空けて投稿日が表示されます。

③枠に影をつける

style.cssに青字部分を追加します。
#kanren dl {
  padding: 10px;
  background: white;
  height: 100px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

④枠内下部の余白を減らす

リストの最後の要素だけ余白が大きいので修正。

#kanren dl:last-child {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
数値を20pxから10pxに変更です。
ではでは。