blog

こんばんは。今回のThinking about.は一味違う風味でお届けいたします。（Thinking about.は”一月の振り返り企画”としているのですが、今回はブログリニューアルについてまとめます） 2019年頃にブログをWordpressに引っ越した後、2019年11月に当ブログのテーマを『yStandard』に変更してしばらくが経ちました。 もともと何もせずともきれいにタイルが並ぶテーマでしたが、TOPページにいきなり記事が並ぶのもどうなんだろう？という気持ちも並行して持っていました。 いままでのTOPページ そこで、導入済みのテーマ『yStandard』に加え、プラグイン『yStandard Blocks』を大きく使ってTOPページを導入してみたので、まとめてみようと思います。 参考文献 imDRESSionsさま リニューアルにあたって、『imDRESSions』様のこちらの記事はかなり参考にさせていただきました。（掲載許可ご快諾いただきました！）もはや構成はほぼほぼ同じ形を目指させてもらいました。ありがとうございました！ yStandardさま あとは当然のごとくyStandard公式サイトにも助けられました。マニュアルも充実しつつテーマ・プラグインも日々アップデートされているのでかゆいところに手が届くテーマです。 もともとがシンプルなテーマで、『カスタマイズありき』なので、カスタマイズしていきたいwordpressユーザーにおすすめ。僕ももっと励みます。 変更点について TOPページに大きなカバー写真が載っているのは変わらずですが、ページを読み込んだ際にアニメーションが駆動するようになりました。フェードインしてくる感じです。 また、TOPページを実際に見ていただくとわかりますが、下の方のコンテンツも”五感”に沿ったカテゴリ別に記事を再ソート。これらにもフェードインのアニメーションをつけています。 文字に起こすと カバー画像→サブタイトル→最新記事一覧→五感テーマコンテンツをそれぞれ→著者→第六感 という構成です。これらそれぞれ矢印の位置で分けてアニメーションをつけています。ちなみに、著者→第六感(考える)の流れが”僕を通した考え”という意図があったり…。 とにかく、リニューアルは完了しておりますので一度ぜひTOPを覗いてみてください。 TOPページを作っていく さて、本題に戻ってさっそく作り方について見ていきましょう。繰り返しになりますが、参考文献をかなり参照にしておりますが、設定にあたって僕が詰まったりした部分も踏まえてを改めてまとめようと思います。 必要なページを作る 今回僕がやりたいことを改めてまとめますと、『ブログTOPを記事一覧ページからTOP専用のページに変更したい』ということ。つまりは新しいTOPページを作るのはもちろん、行き場を失った記事一覧ページも必要になります。 まとめると、①TOPページ ②記事一覧の２つのページが必要になるので、これらをWordpressの固定ページで作っていきます。 TOPページを作り込んでいく さて、ある程度考えた構成をもとに早速作っていきましょう。今回は『yStandard Blocks』の機能"セクション"が大活躍します。 ①固定ページの作成 まずは固定ページ＞新規作成で新しい固定ページを作成します。 ①は通常の記事と同様タイトルを設定しますが、ここは表に上がらない部分なので自分が判別できるようなタイトルでOK。 ②は固定ページ設定＞ページ属性から、テンプレート”投稿ヘッダーなし1カラム(ワイド)”を選びます。もともとはデフォルトテンプレートとかになってるかなと思いますが、横長で1枚もののページを作りたいのでこちらで選択します（もちろん他の型でも構いませんが、今回はこちらで進めます） ②構成を落とし込んでいく 型ができたらあとは自分のやりたいページを作っていきましょう。繰り返し触れている通り”セクション”ブロックを使ってページを作っていきます。 セクションは要するに、ブロックエディターに柔軟なカスタマイズ性が追加されたブロック。 画像のように、そのセクションだけ外・内の余白の調整をしたりできるので、"該当ブロックだけCSSを書き直さないと…”をしなくても・CSS知識がなくてもデザインを自由に決めれる救世主です。 あとは背景画像なんかも設定できるので、今回のTOPページカバー画像はセクションを用いて背景画像の設定、そして画像を挿入してブログロゴを表示させています。 ちなみにこのタイミングでブログロゴも刷新してみました。 そしてこのセクションにある最高の機能がこの”アニメーション設定”。 どういった動きで＆どれくらいの速度で＆どれくらいで開始するかをそれぞれ設定できるので、3つ横並びのセクションをバラバラに表示させていく（ウェーブ応援みたいな）こともできたりしそうですね。 当初、このアニメーションをCSSで実装しようとしていたので、この機能にめちゃくちゃ助けられました。 ③記事一覧を表示させる セクションの追加を繰り返し、今度は『新着記事』の部分をつくっていきますが、やること自体は変わっていません。まずはセクションを追加、その上に見出しと"記事一覧"というブロックを追加します。 普通に追加すると”公開日が新しい順”に並べられていますので、基本はこれでOK。また、レスポンシブデザインにも対応しているので、デスクトップは4記事並べよう、やモバイルは幅が狭いし少なくしよう…にもスライドバーで調整が可能。めっちゃ楽。 あとは、僕がやりたいこととして"五感それぞれの記事をまとめて表示させたい"というものがありましたが、もちろんそれにも対応してくれています。 五感記事についてはそれぞれタグでまとめているのですが、『絞り込み設定』を調整すれば表示させたい記事もお手の物。カテゴリとかタグとかしっかり整備しましょうね（このために整備し直した） ④著者情報を[ys]パーツで作る さて、順調に構成を落とし込んでいっておりましたが、初めて表示させたいのにブロックがないという自体に直面します（直面してなかったのがyStandardのすごいところ）。 というのも、調べた限り著者情報は表示させられなさそうで、記事終わりのタイミングに自動で表示されるものだけになっていますので、これを任意の位置に差し込みたい。 そんな時使えるのが[ys]パーツという機能。yStandardに標準搭載されていて、自分の好きなコンテンツ・ブロックエディタを作っておいて、他の記事や固定ページなど繰り返し使える機能になります。 冒頭にチラっと見せたこちらの著者情報ですね。TwitterとかInstagramのアイコンもほしいので、それならいっそ作っちゃおうということに。 で、また結論から言うと、僕が思い描く著者情報の構成要素がアイコン画像・名前と説明・SNSの各種リンクでした。 これらをそれぞれ組み合わせれば完成なのですが、SNSの各種リンクに関してはいろいろなところで使えるかもしれないので、これもこれでパーツとして作っておこうと思います。 まずはSNSボタン型リンクを作りましょう。といってもかんたん。 こちらも同じく判別が付きやすいようにタイトルを付けたあとは、"シェアボタン"というブロックを選択し追加していくだけ。するともともと用意されている多種多様なSNS・メディアのアイコンが出てくるので、追加したいボタンを選択、アカウントへのリンクを追記するだけ。 これでSNSボタンのパーツが出来上がりました。 XXXXの場所間違えてます…。SNSボタンパーツのXXXXをあとで用います。 SNSボタンパーツができると、[ys]パーツの一覧にショートコードが表示されます。このパーツを著者情報のパーツの中に入れ込みます。 こんな感じで、①SNSボタンパーツを作る→②著者情報のパーツを作る→③①のパーツコードを組み合わせる といった流れですね。 ⑤各種アニメーションと区切り線を設定する これで構成要素が全部揃ったので、あとはデザインを整えていくだけ。 今回は白・黒・グレーを基調にしたいので、それぞれのコンテンツに強弱をあしらいたいところ。冒頭設置したセクションのそれぞれに『区切り線』（上・下）をそれぞれで設定していきます。 上の画像でいうと"考える"を囲っている赤線のような波線を表現したいときは、右のブロック設定における”波線”、”レベル”で太さを、あとは好みの”色”を設定してあげれば表現されます。かんたん。 そんなこんなで繰り返していけばTOPページは完成ですね！ 記事一覧ページを作る さて、ここで力尽きそうになりますが、あともう少し。 冒頭触れたように、行き場を失った記事一覧ページを作って上げる必要がありますが、これもかんたん。実は中身が空っぽの固定ページを作っておけば自動で中身を充填してくれる…という仕組みがあるので（どういう挙動しているのか全然わからないけど便利だからいいよね）、それを活用していきます。 なので固定ページを新規作成し①自分が判別しやすいようにタイトルをつける ②パーマリンク（記事一覧に遷移させるときのURL）を設定してあげる これだけで大丈夫。今回はallcontentsという名前にしてあげて、TOPページの新規記事一覧から遷移させるときはこのURLを使うことにしました。 TOP/記事一覧ページを設定する ここまできたら、あとは表示設定を調整するだけ。 設定＞表示設定の中から、ホームページの表示をそれぞれ変更します。 ホームページは先程頑張って作ったTOPページ、投稿ページは箱だけのはずの記事一覧を設定してあげて完成です。おつかれさまでした。 カスタマイズありき。 ということで、僕が今回設定したホームページの設定をメモとして残してみました。 CSSなどの知識がない僕でも直感的にカスタマイズできてかなり楽しかった…アニメーション設定を見つけたときはウオー！と叫んだまで。 折に触れて記載している通り、今後もどんどんアップグレードされていくyStandard。有料プラグインの『yStandard Toolbox』もめちゃくちゃ便利なので、これらも活用したもっともっとオリジナリティの高いブログにカスタマイズしていきたいですね。 見ていて楽しい、眺めて時間が溶ける…そんなブログをゆっくりと育てていきたいと思います。

【Thinking about.#31+】ブログリニューアルしました。

Category