stinger5 サイドバーとnew post記事の区別化 カスタマイズ

stinger5 サイドバーとnew post記事の区別化 カスタマイズ

 

 

サイドバー「new post」を区別化するためにカード型に変更するやり方と
サイドバーの背景を半透明化するやり方を解説しています。

 

以下記事はワードプレス(WP)や、テーマのstinger５をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。

記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。

 

尚、修正したソースコードは、必ずＦＴＰソフトを使ってサーバー
にアップ。または各サーバーのオプション（ファイルマネージ
ャー）等（例はさくらサーバーです）で編集してください。

バックアップは忘れずに！！！

 

 

サイドバー　newpostをカード型に変更

 

サイドバー「new post」の表示をカード型に変更しました。ついでに抜粋
文を削除して投稿日に変更しました。

 

「newpost」に抜粋文を表示させると、なんかゴチャゴチャしていらない

と思います。

 

 

カスタマイズの概略

 

• new postの抜粋文を削除して、投稿日を表示する。
• フォントを小さくします。
• サムネイルをきれいにします。
• new postの表示をカード型に変更
• new postのリストの最後の要素だけ余白が大きいので修正。
• サイドバーの背景を半透明化する

 

 

new postの抜粋文を削除して、投稿日を表示する

 

タイトルが長いと抜粋文と区別が付かなかったり、ここに抜粋文を入れて
も効果はあまり期待できないし、投稿日を入れたほうがすっきりします。

子テーマ「newpost.php」または子テーマを持っていない方は、stinger5
の「newpost.php」を開いて下記コードを探します。

 

 

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

探しましたらそれを削除して、下記コードを記述します。

[php]
<p><br>投稿日: <?php echo get_post_time(‘Y/m/d’); ?></p>
[/php]

 

 

フォントを小さくします。

 

長いタイトルになった場合の事を考慮してフォントを少し小さくしました。

 

[css]
/*———————————–
サイドバーnew post フォントを小さく
————————————*/
#kanren dd h5 {
font-size: 12px;
}
[/css]

 

上記コードを子テーマのスタイルシート（style.css）に追記しました。

子テーマを持っていない方は、stinger5のスタイルシート（style.css）
の最後尾に追記します。

 

サムネイルをきれいにします。

 

STINGER3のサムネイル画像は画像の一部を切り取ったように表示されてい
ました。

STINGER5のサムネイル画像は全体が表示されるように変更されています。

トップ画面に表示される画像領域は大きめなので、サムネイル画像は全体
が表示される方が良いと思います。

 

しかし、サイドバーは表示領域が小さいので、画像によっては小さく見に
くいように感じます。

なので、サイドバーに表示するサムネイル画像は以前のように変更します。

 

子テーマ「newpost.php」または子テーマを持っていない方は、stinger5
の「newpost.php」内にある以下のコードを探します。

 

「<?php the_post_thumbnail( ‘thumb150’ ); ?>」

 

この部分を以下のように変更します。

「<?php the_post_thumbnail( ‘thumbnail’ ); ?>」

 

new postの表示をカード型に変更

 

デフォルトでも記事の区別化はされていますが、オシャレに記事の区別が
わかるようにカード型変更しました。

 

[css]
/*—————————–
new postの表示をカード型に変更
——————————*/

#kanren dl {
padding: 10px;
background: white;
height: 100px;
border: 1px solid royalblue !important;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
[/css]

 

上記コードを子テーマのスタイルシート（style.css）に追記しました。

子テーマを持っていない方は、stinger5のスタイルシート（style.css）
の最後尾に追記します。

枠の色は「royalblue」ですが、自分の好きなカラー色に変更可能です。

またここでもボックスにシャドーを付加しています。

 

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

 

サイドバーの「NEW POST」の表示で、リストの最後の要素だけ余白が大き
いので修正します。

 

[css]
/*—————————————————-
new postのリストの最後の要素だけ余白が大きいので修正。
—————————————————–*/
#kanren dl:last-child {
margin-bottom: 10px;
padding-bottom: 10px;
}
[/css]

 

上記コードを子テーマのスタイルシート（style.css）に追記しました。

子テーマを持っていない方は、stinger5のスタイルシート（style.css）
の最後尾に追記します。

 

サイドバーの背景を半透明化する

 

[css]
/*—————————–
サイドバーの背景を半透明化
——————————*/

aside {
background-color: #FFF;
background: rgba(255,255,255,0.7);/*サイドバー半透明化*/
}
[/css]

 

上記コードを子テーマのスタイルシート（style.css）に追記しました。

子テーマを持っていない方は、stinger5のスタイルシート（style.css）
の最後尾に追記します。

 

まとめ

 

サイドバーのnew post内にある記事を区別化する事によって読んでもらい
たい記事をすばやく認知してもらえる効果があります。

 

また記事一覧をスクロールしてタイトルを確認するよりここを観れば、記
事タイトルが読者にわかってもらえると思います。

 

そのためにも記事の区別化は重要なカスタマイズだと思います。

以上です。