前回の「stinger5 トップページ記事一覧を区別化するカスタマイズ」では、カード化にカスタマイズしたものの１記事内に「抜粋文」さらに「続きを読む」ボタンも設置したため、なんかゴチャゴチャしてスマホ等で視たら逆に見づらい感じがしました。
なので今回はstinger5トップページ記事一覧の背景を削除・１記事内にある抜粋文を削除してカード化にしてみました。ついでにボックスシャドウも付けた。
トップページ記事一覧の背景を削除
- ここで紹介するstinger5のカスタマイズは、私の備忘録です。
- バックアップは忘れずに！！！
以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です
これらを参考にカスタマイズする時は、自己責任でお願いします。
ソースコードを変更する場合は、ＦＴＰソフトを使ってサーバーにアップ。または各サーバーのオプション（ファイルマネージャー）等（例はさくらサーバーです）でカスタマイズを行ってください。
デフォルトでは以下のようになっています。
トップページの記事一覧を、１記事ごとにカード化して見やすくするために背景を削除した。
「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]
ついでに記事一覧にマウスを持って行くと背景色を変えるコードも追記した。
各カードボックスにシャドウを付けてるが、どうもＩＥだけがうまくシャドウが付かない。（私のＰＣにあるＩＥ１１では一様シャドウは付いている）
「-ms-filter」と「filter」を記述してＩＥ８～９対策しているが、確認のしようが無いので実際にシャドウがついているか判らない。
ＰＣ表示箇所に以下のコードを追記した
カスタマイズしたコードをすべて追記しようと思ったが、上記コードを記述してあるのでＰＣ表示箇所に追記するコードは、変更したコードのみにした。
このコードの書き方が正解か間違いかは判らないが、この書き方で私が思ってるようにカスタマイズされている。
[css]
/*————————————-
ＰＣ用トップページ記事一覧カード化変更分
—————————————*/
#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]
ＰＣで見た時の表示を
「#topnews dl」内の「width」を「94%」⇒「100%」に広げた。
タイトルの大きさを２０ｐｘ⇒２４ｐｘに大きくした
タイトルと「blog info」の間の余白を５ｐｘ⇒２０ｐｘに広げた
「blog info」の大きさを１２ｐｘ⇒１４ｐｘに大きくした
記事一覧のトップカードの上部余白が広かったので、余白を狭くした。
この辺は人それぞれで好みで変更する。
修 正
トップページの他をカスタマイズしたら表示が崩れたので、カスタマイズコード内の下記コードを削除
[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]
この辺は各ブログによって調整してください。
と言うことです。
次にブログインフォをマウスオーバーした時にフォントのカラーを変更した。
まとめ
カスタマイズ後以下のようになった
トップページ記事一覧の背景が無くなったのと、カード化した事によってスッキリしたのでスマホで見てもキレイに見えました。
ただボックスシャドウがすべてのブラウザで付いているか確認できない。
またＰＣでも高解像度でカスタマイズしているので低解像度ＰＣではどのようになっているか確認できません。
確認出来次第カスタマイズするつもりです。
以上です。
コメント