AFFINGER6の固定ページを使ってブログのトップページの見た目を変えたことについて、2つ記事を更新しました。
参考記事
上の2つの記事を参考にすることで、私のブログのトップページのようなデザインの印象に仕上がると思うのですが、細かく手順を書いたこともあり少しごちゃごちゃしてしまっていると思います。
わかりにくい点があるかとも思いますので、イメージをつかむ意味合いも込めて実際に固定記事で編集してた画面の画像を用意しました。
私は一つの固定記事へスマホのデザインとPCのデザインそれぞれ入れており、分岐コードを使用してスマホとPCのデザインを分けています。
デモサイトの固定ページ変種画面
スマホの編集内容
PCでは大きいサイズの記事を一つ載せていましたが、スマホでは表示にズレが起きてしまうため通常の記事一覧のみ表示させるようにしました。
下の画像は固定記事の編集ページです
固定記事内へスマホだけに表示をさせるためのコードを記載しました。
スマホだけ表示させるコード：[nopc][/nopc]分岐コードはテーマなどで異なる可能性もあるので、自分が使っているテーマに合わせてコードを変えていただけたらと思います。
PCの編集内容
下の画像は固定記事の編集ページです
PCのみ表示させる分岐コードをスマホ同様に入れています。
PCだけ表示させるコード：[pc][/pc]PCの分岐コードも使用するテーマによって異なる可能性があるので注意してください。
スペーサーで余白を入れている
スマホの編集の方には緑の文字で説明を記載していますが、PCへも同じようにブロックエディターのスペーサーを使用して余白の調整をしています。
必要ない場合は入れなくても問題ありません。
私はバランスを整えて見た目をきれいにするためにもいれました。
まとめ
実際に使用している固定ページの編集内容を画像ですが紹介しました。
画像を見る限りはブロックエディターを入れているだけなのでかなりシンプルな印象ではないでしょうか。
ブロックエディターを使いこなしている方であれば、サクッと取り抱えるかもしれないですね。
作成方法として紹介している2記事も、しっかり読んでいただければ理解できるのではないかと思っていますので、ブログの印象を変えてみたい方は是非やってみてください。
参考記事
＼現在使用中のテーマ／