有料テーマのSWELL。
投稿リストで新着記事など表示する時に、1番新しいものをカード型で2番目以降をテキスト型で表示させたい場合に、こんな悩みがでてきませんか？
それは、
テキスト型の投稿リストの1番上に表示される記事が、カード型の記事と同じになってしまうこと
そんな悩みを抱えている方は、この記事を読めばスッキリ解消できます。
それではどんな風にすれば対応できるのか、早速みていきましょう。
カード型とテキスト型を組み合わせて表示したい
冒頭の説明でだけではちょっと分かりづらいかと思います。
僕が運営している他のブログのトップページ。
例えば新着記事の部分は、上の画像のようなデザインにしているんです。
この画像を見てもらえると分かるのですが、左半分に表示されているのが最新の新着記事。
アイキャッチ画像が表示されるカード型です。
そして2番目以降の記事は、右側のテキスト型。
文字のみの表示になります。
1番最初のカード型記事と、2番目以降のテキスト型記事を組み合わせるだけでとてもおしゃれですよね。
こういうことも簡単にできるのが、SWELLのいいところでもあります。
＼ SWELL公式サイト ／
重複した記事が表示されてしまう
前項のような組み合わせ型の投稿リストはSWELLでは簡単に作成できますが、1つ大きな問題が！
それはテキスト型の投稿リストを挿入すると、
当たり前ですよね。
例えば新着記事の投稿リストを挿入したら、1番新しい記事は1番上にきます。
カード型でもテキスト型でも一緒です。
でも混合型の僕のトップページのようなデザインにしたい時には、
・1番目の記事→カード型(左側)
・2番目以降の記事→テキスト型表示(右側)
にしたい。
ということで、右側のテキスト型の投稿リストは、2番目の記事から表示させる方法は以下の手順になります。
投稿リストで1番目の記事だけ表示させない方法
例えば、僕の他のブログのトップページのカテゴリー「飲食」を、作成した時の例でご紹介いたします。
1番目の記事を表示させない方法
2カラムで左側にカード型、右側にテキスト型の記事リストのデザイン方法になります。
左のカラムのカード型での表示方法
左のカラムでの操作手順は以下の通り。
右のカラムのテキスト型で1番目の記事だけ表示させない方法
右のカラムでの操作手順は以下の通り。
1番目の記事を表示しないようにするので、テキスト型の記事を3つ表示させるならば1つ多い４を選択。
1番目の記事を表示させない方法はここがポイントになります。
この「li-1nd-none」を追加CSSクラスの部分にコピペする。
ステップ４に続きここもポイント。
この「.li-1nd-none li:nth-child(-n+1) {display: none;}」をコピペする。
STEP4ではブロックでの「追加CSSクラス」欄、このSTEP5での入力欄はページの1番下にある「CSS用コード」欄になります。
設定はこれで終了です。
ポイント
ここで注意したいことが。
この手順で設定してもテキスト型の1番目の記事が表示されていて困惑しますが安心してください。
プレビュー表示で確認すると、しっかりと1番目の記事はカットされ2番目からの記事が表示されています。
僕も最初は
ハル全くダメじゃん！
って思って何がおかしいんだろうって色々調べまくりましたが、ちゃんと表示されていることに気づくまで時間を無駄にしてしまいました。
これでスッキリ完成！
どうですか。
簡単に仕上がりますよね。
特に詳しくなくても、コピペで簡単にオシャレにデザインできるのもSWELLのいいところです。
まとめ
どこの場所にどういったコードを貼り付ければ理想のデザインになるかは、情報がたくさん出ているので特にHTMLとかCSSとか覚えなくてもいいと思います。
覚える時間をさらなるデザインや記事作成の時間に費やした方がブログにとってもいいですよね。
SWELLで楽しいブログライフを送っていきましょう。
こんなおしゃれなデザインが簡単にできるSWELLは、ブロガーに一押しの有料テーマです。
＼ SWELL公式サイト ／
コメント