Affinger5(WordPress )「オススメ記事一覧」のスタイルをカスタマイズする

スポンサーリンク

 

WordPress テーマのAffinger5は、オススメ記事一覧が簡単に投稿ページの下に表示することが出来ますが、あまりスマートでありません。 独自デザインで、ブログカードをタイルとして2コラム表示にしてみましたのでご参考として紹介します。

なお、Affinger5のバージョンは、20200414 を使用しています。

 

スポンサーリンク

 

先ずは「おすすめ記事」のデザイン Before - After を示します。

Before Design

このデザインは、AFFINGER5 管理  > 「おすすめ記事一覧」から入り 「おすすめ記事一覧の作成」で設定すると簡単におすすめ記事一覧が表示できますが、一覧記事が多くなるとページ面積を大きく取り効率的でありません。

After Design

ブログカードをタイルとして2コラム表示にして独自デザインで作成しました。

 

デザインのポイント

  • 全体のレイアウトで、タグ>見出し付きフリーボックス>「メモ(タイル幅100%)」を使用
  • 2コラム表示を行うため、タグ>レイアウト>PCとTab(959px以上)>「左右50%」を使用 

<ブログカードのデザイン>

  • ブログカードに抜粋は表示しない(注1:CSS参照
  • PC表示時にカードの高さを均一にするため、ブログカードの高さを125pxに指定

注1:ブログカードに抜粋を表示させないCSS設定

 

Post Snippetsを使ったデザインのショートコード化

Post Snippetsプラグインの説明やインストールは、ネットで検索してください。 ここでは、既にPost Snippetsがインストールされている前提での説明です。

Affinger5のショートコードとHTMLコードが混在したデザイン・コードを作成し、Post Snippetsを使って、デザイン・コードを一纏めにしたショートコード化を行います。(「Post Snippetsの設定画面」を参照)

おすすめ記事・デザインコード(2コラム・3列の場合)

ポイント

デザイン・コードの説明


  • 1行〜5行

    1行〜5行は、ブログカードに抜粋を表示させないためのCSSです。(クラス名は”mycard”にしています)


  • 11行、22行

    11行、22行はAffinger5タグ・バナー風ボックス(基本)のショートコードです。


  • 14行〜16行、26行〜28行

    14行〜16行及び26行〜28行はブログカードです。(合計6個) 夫々のブログカード群に対してクラス名”mycard”で指定したdivタグで囲みブログカードの抜粋を非表示にしています。


Post Snippetsの設定画面 ショートコード名は my_osusume にしました。

完成した【my_osusume】ショートコードを「投稿記事の下に一括表示」や「固定記事の下に一括表示」にウィジェットで設置して完成です。

 

 Post Snippets プラグインの事例集(ご参考)

 

以上、「オススメ記事一覧」のスタイルをカスタマイズする」でした。 Affinger5のおすすめ記事一覧よりスッキリしたと思います。

 

〜〜〜〜〜〜〜〜〜〜〜〜

オススメ記事

レコードのハイレゾ化
オススメ記事

LPレコードのハイレゾ化のススメ(ハイレゾ録音のヒント集)

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

MCカートリッジとMMカートリッジの音質比較

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

DENON MCカートリッジ DL103Rのクロストーク「 原理編」

今更ながら、「我が家のB級プレーヤ」に取り付けた「DL103Rカートリッジのクロストーク(セパレーション)をテストレコード(AD-1 2面のバンド4:基準レベル、1kHz、3.54cm/sec(尖頭値 ...

テストレコード(AD-1)で出来ること

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

レコードをハイレゾ化するならDSDかPCMか?

ことの 発 端 ことの発端は、あるハイレゾDLサイトから、チャイコのバイオリンコンチェルトをPCM(Flacファイル 192Khz、24Bit)で購入しました。WAVファイルも平行販売されています。 ...

CD音質関連 その他
オススメ記事

アナログ・レコードのここがダメ「CD音質と比較して」

これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあまり言いたくは ...

CDフォーマットのここがダメ「ハイレゾと比較して」

CDフォーマットのサンプリング周波数は44.1khzでビット深度は16bitです。 特にビット深度は録音レベルが低下するに伴い音質に問題が生じます。 CDの開発時点では先端技術で市場を席巻しましたが昨 ...

Sony HAP-Z1ESのDSEE機能/確認

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Apple Digital MastersのAAC音質(その1)

2019年7月付けの「Apple Digital Masters テクノロジー概要」によれば、iTunesやApple Musicで配信される楽曲は、「Apple Digital Masters テク ...

Post Snippets Pluginで出来ること(小技・事例集)

 WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしているのにも関わら ...

Copyright© ハイレコのブログ , 2020 All Rights Reserved Powered by AFFINGER5.