Menu/Prof
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。

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

Some visuals are licensed via Canva Pro (includes commercial rights).
Usage complies with Canva’s license terms at the time of use.
License policy: canva.com/policies/content-license-agreement

X
     この記事はプロモーションを含みます
contents

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

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

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

サイト型を採用した結論

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

これだけです。

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

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

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

では具体的な手順

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

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

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

用意するCSSは1行だけ

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

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

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

こんな感じね

SWELLのカスタムCSS

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

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

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

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

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

初心者でもわかる!SWELLでサイト型のトップページに必要な知識
かっこ悪い例

【応用編】複数の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はわかんねーって人もこういう簡単な1行CSSから試してみるのも良いと思います。

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

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

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

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

makotoのアバター makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在 ほぼ自由人。

contents