【swellカスタマイズ】サイト型のカスタマイズに必要な知識

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック15,000円」を進呈中！

【swellカスタマイズ】ブログ型とサイト型どっち?

ぶっちゃけどっちでも良いと思うけど僕はサイト型を採用してます。

• ブログ型 新着記事と人気記事を基本に記事のサムネイルがソートされて一覧表示されているよくある形式
• サイト型 新着＆人気記事の一覧や特におすすめしたい記事やその他任意の仕掛けをTOPに持ってくる形式

サイト型を採用した結論

TOPからの記事の各記事への動線を好きなように作れる。

これだけです。

新記事のみの動線が確保できれば充分なら手軽で標準的なブログ型で良いと思います

パーツが動いたりするのはそれ用のcss/javascriptをかましているからです。

この機能も興味のある方は以下も読んでみてください

あわせて読みたい

【swellカスタマイズ】javascript/cssだけで変な動きのあるページを作る SWELL MotionMaster: Scroll Spy & CSS Animator エラそうな名前のスクロールスパイはSWELL専用とアニメーション部分は汎用の野良プラグイン作ってみました。 この…

では具体的な手順

1. 固定ページを新規作成
2. 各パーツを作る
3. CSSを固定ページの下部にある「カスタムCSS＆JS」にコピペする。

パソコンで作業することを前提で書いています。

スマホでも可能ですがものすごく作業性悪いので安いPCとかで作業がおすすめかなー

用意するCSSは１行だけ

.newentry1 li:nth-child(1){display:none;}

上記のCSSは li タグのリストで表示させる１番目を非表示にさせるCSSです。

コイツをコピーしてSWELLブロックエディター下部にあるカスタムCSS＆JSにコピペしてください。

こんな感じね

このCSSが必要な理由は記事一覧の左側の枠に大きく最新の記事のサムネを配置して

右側の枠に２番目の記事から先頭に表示させるために１番目の要素を隠すCSSです。

どちらの枠も最新記事の呼び出しを行うのですが必ず先頭から表示するので見た目が悪くなります。

CSSを効かせない状態でこのリストを動作させるとこうなります。

左側の最新記事と右側の１行目が同じ記事になってしまいますね

【応用編】複数のTABを駆使してカテゴリごとに新着順に表示させているタイプ

さて上記で追加したcssを効かせてマルチメニュー化したものが以下です。（実際に動作します）

ブロックエディターでタブを挿入してその中にそれぞれカテゴリごとに最新記事を表示することができます

実際のパラメーター（左部分）

画像で貼り付けておきますのでご参考に。

ちなみに右側の先頭記事が左と同じになってますがこれはブロックエディター画面をキャプチャしているので

cssが効いていない状態で表示されてます。

縦に長いので3分割してます。

実際のパラメーター（右部分）

newmoreってなんだよ

この全カテゴリの「新着」と「カテゴリ毎の新着」を実現する複合メニューの場合

moreリンクの扱いが変わってきます。

単一のジャンルの場合は特に「MOREリンクのURL」を指定しなくても（空白で良い）SWELLが用意してあるカテゴリ毎の新着リストが動きます。

Newタブみたいに全部のカテゴリの新着をmoreさせるのは用意されていませんので仕掛けを作ります。

まずBLOGパーツを作ります

名前はなんでもいいので適当につけてください。

ここも新着と人気記事の2TABにしてありますがこの辺りはお好みで。新着だけでも良いと思います。

作成するとIDがつきますのでそのIDを控えておきます。「投稿の表示順序」のパラメーターを変更すれば好きな順番で表示できます。

パラメーターは以下を参照

またなんか出てきたぞ pop-postだと？

これはSWELLのテンプレ使います。人気記事を一覧で出してくれます。

実はもうめんどくさいので新着も人気記事も「more」の行き先はここに飛びます笑

これの作り方の詳細は公式みてくださいー

SWELL公式【人気記事一覧の作り方】

次に固定ページを作ります

固定ページでNewMoreという名前でページを作ってそこに先ほど作ったBLOGパーツのIDをショートコードで記述します。

固定ページのパーマリンクをnewmoreにしておきます。（画像右側固定ページパラメーター内のURL）

まとめ

SWELLは色々できるので楽しみながら覚えましょう！

ここで覚えたテクニックを駆使すればTOPページは思いのままに作れます。

CSSはわかんねーって人もこういう簡単な１行CSSから試してみるのも良いと思います。

なんかこういうの難しいっていう感想の方もいらっしゃると思いますが

実はやってみれば大したことしてないんですよ笑

難しい部分は作者様が苦労されてる分ユーザーは楽できているのです

あわせて読みたい

非公開: BLOGのデザイン不要論 ブログのデザインは気にしなくても良い？ って話 よく目にしませんか？ 結論から言うと僕はそんなことはないと思います。 もちろん求める記事がそこにあるのならデザイ…