stinger5 トップページ記事一覧を区別化するカスタマイズ

stinger 5カスタマイズ, トップページ記事一覧, 区別化, 続きを見るstinger 5, トップページ記事一覧, 区別化, 続きを見る

stinger5

stinger5 トップページ記事一覧を区別化するカスタマイズ

 

stinger5のトップページ記事一覧表示を、記事ひとつひとつをカード型にカス
タマイズ。また「続きを読む」のボタンを設置した。

 

  • 現在テーマはghsh2を使用してますが、別ブログにてstinger5で運営中
  • ここで紹介するstinger5のカスタマイズは、私の備忘録です
  • stinger5はカスタマイズ用のテーマ作りになっていると思います
  • バックアップは忘れずに!!!

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

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

 

stinger5のトップページに表示されている記事一覧は、一様点線で区別化され
ています。

 
stinger5020

これでもいいと思いますが、個性をだすために記事ひとつひとつをカード型に
してみました。

カスタマイズ 概略

 

  • ひとつひとつの記事をボックス化とシャドウ
  • 抜粋文をボックス化とシャドウ
  • ieの表示が崩れるためのコード追加
  • 「続きを見る」を設置した
  • 「続きを見る」ボックスのie表示が崩れるためのコード追加

ひとつひとつの記事をボックス化とシャドウ

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

 

ieの表示が崩れるためコード追加

この時点でブラウザで確認したら ie(ver.11)で観たら表示が崩れていた。

いろんなサイトを検索、調査した結果、下記コードを追記したところ正常に表
示された。

 

尚、ie(ver.11)での確認です。他のバージョンまたはブラウザでは、崩れて表
示されているかも?(すべてのバージョンおよびブラウザでの確認はしていま
せん。っていうか私には無理っす)

 

上記コードを「#topnews dt {」のすぐ上に追記した。

 

「続きを見る」を設置した

stinger3の時はあったけど、stinger5になってから削除されていました。個人
的にこのボタンがあったほうが好きなので、あらためて設置した。

「itiran.php」にコードを追記

ワードプレス「テーマ編集」から子テーマ内の「itiran.php」を開きます。

子テーマを持っていない人は、テーマ内の「itiran.php」を開きます。

「itiran.php」内の下の方にある下記のコードを探します。

 

 

この中の「</div>」と「</dd>」の間に以下のコードを挿入する。

以下が挿入後のコードです。

スタイルシート(style.css)にコードを追記

以下のコードをスタイルシート(style.css)の子テーマに追記した。

 

 

「続きを見る」ボックスのie表示が崩れるためコード追加

 

ここでもこの時点でブラウザで確認したら ie(ver.11)で観たら表示が崩れていた。

いろんなサイトを検索、調査した結果、下記コードをスタイルシート(style.css)

に追記したところ正常に表示された。

 

 

まとめ

上記カスタマイズの結果の画像です。
stinger5021
カスタマイズ中「抜粋文」や「続きを見る」ボタン等の位置を調整するのに大
変苦労した。

各「padding」や「margin」を再調整しないと思った位置に来てくれませんで
した。
「続きをみる」ボタンは個人的にあった方が良いと思いますので、再度設置し
ました。
カスタマイズ初心者の方には「どこがどのクラスなんだ?」と困っている
方が多いと思います。また、先代Stinger3から構造やclass,id名が大きく
変更されているので「変更点が知りたいよ」という方もいると思います。

 
stinger5 class,id構造でカスタマイズ

 

上記ページでStinger5のid,class構造がひと目で分かるように画像で解説して
いますので参考にしてください。
100%自分が思っていた通りでは無いが、とりあえず終了です。後日再度カ
スタマイズすときは、ご報告いたします。