stinger5 トップページ記事一覧をカード化して見やすくした

2015年3月24日stinger 5カード, トップページ, 区別化, 記事一覧stinger 5, トップページ, 区別化, 記事一覧

stinger5

前回の「stinger5 トップページ記事一覧を区別化するカスタマイズ」では、カード化にカスタマイズしたものの1記事内に「抜粋文」さらに「続きを読む」ボタンも設置したため、なんかゴチャゴチャしてスマホ等で視たら逆に見づらい感じがしました。

なので今回はstinger5トップページ記事一覧の背景を削除・1記事内にある抜粋文を削除してカード化にしてみました。ついでにボックスシャドウも付けた。

トップページ記事一覧の背景を削除

 

 

  • ここで紹介するstinger5のカスタマイズは、私の備忘録です。
  • バックアップは忘れずに!!!

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

これらを参考にカスタマイズする時は、自己責任でお願いします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

 

デフォルトでは以下のようになっています。

stinger5073
トップページの記事一覧を、1記事ごとにカード化して見やすくするために背景を削除した。

「home.php」と「アーカイブ(archive.php)」内にある「<main>」を探します。

 

見つけたら「main」の後ろに下記コードを追記します。(私の場合子テーマに追記)

「style=”background-color:transparent; border: none;”」

追記後のコードは以下のようになった。
[php]
<main style=”background-color:transparent; border: none;”>
[/php]

 

「<main>」を削除してから、上記コードを追記した。

 

終わったらブログを確認すると、トップページ記事一覧ページ・アーカイブページとカテゴリーページそれぞれの背景が削除されています。

といっても枠線を消して尚且つ背景色を透過しただけなので、削除されたように見えるだけです。

 

記事一覧から抜粋文を削除

抜粋文が必要かどうかは人それぞれだと思います。私はあまり必要がないと思うし、見た目がすっきりして滞在時間がそれで長くなれば、記事を読んでくれる割合も増加の見込みがあると思う。
「itiran.php」内にある以下のコードを削除した。(私の場合子テーマ)
[php]
<div class=”smanone”>
<?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
</div>
[/php]
削除しない場合は必要ない。

 

トップページ記事一覧をカード化

スタイルシート(style.css)に下記コードを追記(私の場合子テーマ)

 

[css]
/*———————————
トップページ記事一覧をカード化
———————————–*/
#topnews dl {
background-color: #fff;
margin: 0 0 15px 0;
padding: 10px;
border: 1px solid #4169E1;
border-radius: 5px;
width: 88%;
box-shadow: 3px 3px 1px #666;
-moz-box-shadow: 3px 3px 1px #666; /* Firefox */
-webkit-box-shadow: 3px 3px 1px #666; ; /* Chrome, Safari */
background-color:#fff;
-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Color=’#666666′, Direction=135, Strength=5);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=’#666666′, Direction=135, Strength=5);
display:block;
}
#topnews dl:hover {
text-decoration: none;
background: #F0F8FF;/* ホバー時背景色を変更 */
}

#topnews dl:first-child {
margin-top: -60px;/* トップカードの上部余白を狭くした */
}
[/css]
ついでに記事一覧にマウスを持って行くと背景色を変えるコードも追記した。

 

各カードボックスにシャドウを付けてるが、どうもIEだけがうまくシャドウが付かない。(私のPCにあるIE11では一様シャドウは付いている)

「-ms-filter」と「filter」を記述してIE8~9対策しているが、確認のしようが無いので実際にシャドウがついているか判らない。

 

PC表示箇所に以下のコードを追記した

カスタマイズしたコードをすべて追記しようと思ったが、上記コードを記述してあるのでPC表示箇所に追記するコードは、変更したコードのみにした。

このコードの書き方が正解か間違いかは判らないが、この書き方で私が思ってるようにカスタマイズされている。
[css]
/*————————————-
PC用トップページ記事一覧カード化変更分
—————————————*/
#topnews dl {
width: 100%;
}

/* タイトル名 */
#topnews dd h3 {
font-size: 24px;
line-height: 30px;
margin-bottom: 20px;
}

/* 一覧タイトル下 */

#topnews .clearfix dd .blog_info p {
font-size: 14px;
}

#topnews dl:first-child {
margin-top: -60px;/* トップカードの上部余白を狭くした */
}
[/css]
PCで見た時の表示を

 

「#topnews dl」内の「width」を「94%」⇒「100%」に広げた。

タイトルの大きさを20px⇒24pxに大きくした

タイトルと「blog info」の間の余白を5px⇒20pxに広げた

「blog info」の大きさを12px⇒14pxに大きくした
記事一覧のトップカードの上部余白が広かったので、余白を狭くした。
この辺は人それぞれで好みで変更する。

 

修 正

 

トップページの他をカスタマイズしたら表示が崩れたので、カスタマイズコード内の下記コードを削除
[css]
#topnews dl:first-child {
margin-top: -60px;/* トップカードの上部余白を狭くした */
}
[/css]

 

次に新たに下記コードを追加した

 

[css]

/*—————————————-
トップページ記事一覧 最初のカードの余白を調整
—————————————–*/
#topnews dl:first-child {
padding: 10px;
}

/*——————————————–
トップページ記事一覧 ブログインフォを左寄せにして
ホバー時を装飾
———————————————*/
#topnews .clearfix dd .blog_info p {
font-size: 12px;
text-align: left;
}

#topnews .clearfix dd .blog_info a:hover {
color: #ff7ddf;
transition: color 0.5s ease;/*– 文字色を変化させる時間 –*/
-o-transition: color 0.5s ease; /* opera */
-moz-transition: color 0.5s ease; /* firefox */
-webkit-transition: color 0.5s ease; /* chrome, safari */
-ms-transition: color 0.5s ease; /* ie */
}

[/css]

 

この辺は各ブログによって調整してください。

と言うことです。

次にブログインフォをマウスオーバーした時にフォントのカラーを変更した。

 

 

まとめ

カスタマイズ後以下のようになった
stinger5074
トップページ記事一覧の背景が無くなったのと、カード化した事によってスッキリしたのでスマホで見てもキレイに見えました。

ただボックスシャドウがすべてのブラウザで付いているか確認できない。

またPCでも高解像度でカスタマイズしているので低解像度PCではどのようになっているか確認できません。

確認出来次第カスタマイズするつもりです。

以上です。