書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】TOPページをカード型にする

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

かきてぃーです。

本日もヘルプサポートのコメントに頂きました

・トップページをカード型にしレスポンシブ対応する方法

をご説明します。

https://kakitare.info/web/affinger4-help/

そもそも、レスポンシブってどうやるんじゃ?

ということをご説明し、カード型にする一例をご説明していきます。

完成系のイメージ

コメントでありました、

[https://saruwakakun.com/]

のサイトをご参考にしていきたいということなので、そのまま上記のようなイメージにしていこうと思います。

サイズを縮小すると、自動的に1列になりサイズを可変します。

まずはレスポンシブについてご説明していきます。

レスポンシブってどうやるの?

レスポンシブって難しいとイメージされがちですが、実際にやってみると意外と簡単です。

やることは、それぞれの端末で使用するcssを分岐させてあげるだけ。

つまり、こういうこと。

  • モバイルエリアのbody
  • スマホエリアのbody
  • タブレットエリアのbody
  • PCエリアのbody
  • それ以外のbody
  • 共通エリアのbody

それぞれのエリアにcssを書けば、それが有効になります。

各分岐のcssは「Media Queries」を使って表現します。

サメくん
「Media Queries」はスクリーンサイズで分岐してくれる魔法のcssなんだね!
イルカさん
その通り!サメくんもやれば出来るじゃん!
サメくん
…。

各「Media Queries」はこれを使う

これぐらい定義しておけば、問題ないはず。

上から

  1. PCなどのスクリーンサイズ
  2. タブレットサイズ
  3. iPadなどを横にした時のサイズ
  4. iPad縦やスマホを横にした時のサイズ
  5. スマホ縦サイズ
  6. それ以外

の6つになります。

デザインを変更しただけなら、上記の方法でOKです。

処理自体を分岐させたいなら、「st_is_mobile()」を使います。

方法は以下の記事で確認して下さい。

あわせて読みたい

【AFFINGER4-カスタマイズ】モバイルとの分岐はis_mobile()じゃないよ。

TOPページをカード型にする

では、さっそくレスポンシブを意識しながらトップページをカード型にしてみましょう。

今回、

https://saruwakakun.com/

のサイトを参考にするので、まずはトップページに必要な情報を整理していきます。

参考サイトのロジックを見てみると、以下の情報を持ってきています。

全ての情報を記事リンクで囲んで、<article>タグの中に

カテゴリ・サムネイル画像・記事タイトル・投稿日時

の情報を入れていますね。

かきてぃー
割と簡単そうだな。

見た目はcssで整えるので、まずは情報を持ってきましょう。

子テーマに配置するファイルを選ぶ

トップページの記事一覧を取得しているファイルは「itiran.php」になります。

この「itiran.php」は更に分岐処理が書いてあり「AFFINGER4 管理」で設定した情報を見て取得するファイルを変えています。

設定によって子テーマに配置するファイルも変わってきますので、自分の設定を確認して下さい。

ソースを見ても分からないなら、以下の記事を参照して下さい。

[https://kakitare.info/web/analysis_affinger/]
サメくん
えーと、「!==」は”空白じゃなかったら”だから…分からん…
イルカさん
はあ。トップページの設定の「トップページ新着記事一覧に表示するカテゴリ(ID)を指定」が入力されてなかったら、「itiran-thumbnail-off」か「itiran-thumbnail-on」が使用されているよ。後はアイキャッチ有効か無効かの違いだよ。
サメくん
あざっす!

めんどうなら、「itiran.php」をそのまま子テーマに配置して修正しちゃいましょう。

※「itiran.php」を子テーマに配置して修正する場合、「AFFINGER4 管理」一部の機能が使えなくなります。

取得する情報を変える

既存のロジックにはサムネイルを丸くする設定とか書いてありますが、除外します。

修正前のソース

修正後のソース

 

とりあえず、欲しい情報は取得出来ましたね。

cssを設定していないので、デザインはかなり崩れていますが…。

今回の修正で大切なのは、

  • 3~7行目:カテゴリのスラッグ名・カテゴリ名を取得
  • 11行目:スラッグ名をclass名に付与
  • 13行目:サムネイル画像をオリジナル定義から取得する

です。

1,2目はカテゴリ名毎に色を変える為に設定しています。

3つ目はトップページの画像サイズをオリジナルで取得する為に定義しています。

各設定とCSSでデザインを整えよう

まずは、「AFFINGER4 基本管理画面」の横幅設定を確認しましょう。

デフォルトは1060pxですが、私の場合カード型を考え1130pxに設定しています。

一応全体のwidthは%で指定するので、問題ないとは思いますがレイアウトに影響がないなら念のため、ここも設定しておいて下さい。

次にCSSを設定します。

修正手順は、

  1. PCのデザインを整える。
  2. 各、端末画面を確認し影響があるcssを洗い出す
  3. 影響箇所のcssを「Media Queries」で分岐する

この3つです。

まずは、私の方でデザインを調整してみたので、ご参考までに導入してみて下さい。

以下のstyle情報をそのままコピペして下さい。

これで、スクリーン(PC)デザインは上記のようになります。

ただ、63~86行目の設定を個人で変更して下さい

ここはスラッグ名毎にデザインを変更しておりますので、

「投稿」→「カテゴリー」

のスラッグ名を設定します。バックグラウンドのカラーはお好みで設定して下さい。

サメくん
俺は全部サメ色に変えるぞ!!
イルカさん
サメ色なんてカラーコードねーよ…。

レスポンシブ設定を行う

現在の設定だと、サイズを小さくすると以下のようになってしまいます。

↓↓↓↓↓↓↓↓↓↓

ここのスペースをどうにかする為に、全体的に拡大するように設定を変更しましょう。

はい。これで、レスポンシブ対応も完了しました。

スポンサーリンク

パフォーマンスを意識するならば…

現在の作りだと、既に存在する画像をリサイズして画面に表示しています。

画像サイズは

「設定」→「メディア」

で指定された画像サイズが作られる為、ユーザ毎に違います。

よって、今回は高さをpxで無理矢理固定するしかないのですが、本来は

サムネイル画像専用の画像を全て同じサイズで用意する必要があります。

そうすることで、横サイズだけ%で指定し、高さをautoにすれば自動的に全て同じサイズで表示され、尚且つレスポンシブ設定する時も横だけ可変すれば高さは同じになるので非常に楽です。

もしやる気があるなら、以下の設定をして下さい。

「functions.php」(親テーマ)に以下を追加

484行目辺りに

add_image_size

なロジックがあります。

これは、画像アップロード時にアップロード画像をリサイズしてコピーします。

さらに名前を定義することで、その名前で画像サイズを取得できるようになります。

今回は、「thumbnail-top」という名前でトップページのサムネイルを取得するので、

を追加します。

サムネイルに設定している画像をアップロードし直して、再設定

ここが一番めんどうで、手間です。

現在、記事に設定されているサムネイル画像を全て再設定する必要があります。

  1. サムネイル画像をダウンロード
  2. 名前を変更し、再アップロード(このタイミングでthumbnail-topの画像が作られます)
  3. 再アップロードした画像をサムネイルに設定

これで、「thumbnail-top」というサムネイル画像が取得できるようになりました。

cssを再び修正

以下のように変更して下さい。

やっていることは、画像の縦サイズを「auto」にしているだけ。

なんですが、画像サイズが全て同じなので、横幅が小さくなれば比例して縦も同じ比率で小さくなります。

これなら綺麗にレスポンシブとなるので、手間ですがオススメです。

 

かきてぃー
本日のカスタマイズ記事はここまで!いかがでしたでしょうか?カード型にするとデザインもオシャレになりますし、トップページに設定するのはアリですね!
かきてぃー
それでは、本日もお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











Comment

  1. 匿名 より:

    かきてぃーさん
    本当にありがとうございます。
    さらに要望通りにしてくれるなんて、感激です!
    参考にさせていただきます。ありがとうございました。

    • かきてぃー かきてぃー より:

      ソースコードに慣れないとカスタマイズはなかなか難しいかもしれませんが、頑張ってください!
      また分からないことがあれば、お気軽にどうぞ^^

  2. 匿名 より:

    かきてぃーさん
    記事ありがとうございます。
    質問なのですが、取得する情報を変えるの部分はどこのphpファイルを編集していますか?
    itiran.phpは、関する記述がなく、他も見て回ったんですが、該当するファイルがよくわかりませんでした。初歩的なことで申し訳ないですが教えていただけると助かります。
    よろしくお願いいたします。

    • かきてぃー かきてぃー より:

      はじめまして。
      記事中にも記述してある通り、個人のAFFINGER4の設定によって変わってきます。
      下記のようにイメージして下さい。
      基本的には「home.php」からトップページの情報は取得します。
      「AFFINGER4」の場合、記事情報はで「itiran.php」から情報を取得しています。
      さらに、「itiran.php」にはif文が定義してあり、「AFFINGER4 管理」の設定によって
      「itiran-original-thumbnail-off.php」
      「itiran-original-thumbnail-on.php」
      「itiran-thumbnail-off.php」
      「itiran-thumbnail-on.php」
      のどれかが使われています。

      条件は以下の通りです。
      1、「設定」→「表示設定」→「フロントページの表示」で最新の投稿が選択されていること。

      2、「AFFINGER4 基本管理画面」の「トップページ新着記事一覧に表示するカテゴリ(ID)を指定」が設定されている
      →「AFFINGER4 基本管理画面」の「一覧のサムネイルを表示しない」が有効になっている ⇒ 「itiran-original-thumbnail-off.php」
      →「AFFINGER4 基本管理画面」の「一覧のサムネイルを表示しない」が無効になっている ⇒ 「itiran-original-thumbnail-on.php」

      2、「AFFINGER4 基本管理画面」の「トップページ新着記事一覧に表示するカテゴリ(ID)を指定」が設定されていない
      →「AFFINGER4 基本管理画面」の「一覧のサムネイルを表示しない」が有効になっている ⇒ 「itiran-thumbnail-off.php」
      →「AFFINGER4 基本管理画面」の「一覧のサムネイルを表示しない」が無効になっている ⇒ 「itiran-thumbnail-on.php」

      1、「設定」→「表示設定」→「フロントページの表示」で固定ページが選択されている。
      →「AFFINGER4 基本管理画面」の「一覧のサムネイルを表示しない」が有効になっている ⇒ 「itiran-thumbnail-off.php」
      →「AFFINGER4 基本管理画面」の「一覧のサムネイルを表示しない」が無効になっている ⇒ 「itiran-thumbnail-on.php」

      となります。

  3. 匿名 より:

    丁寧にありがとうございます。

  4. 匿名 より:

    かきてぃーさん
    記事を依頼したものです。
    分かりやすく丁寧な説明のおかげで、サイトのトップをいい感じのカード型にすることが出来ました。
    本当にありがとうございます。

  5. kiyori1980 より:

    こんにちは!まさにやりたかったことが掲載されていて感動です。記載されている通りに設定し、トップページはカード型に出来たのですが、サイドバーの新着記事も同じ仕様に変更されてしまいました。トップページとカテゴリーの記事一覧だけをカード型にしたいのですが、どのようにすれば良いでしょうか?

コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.