07_キャリアページ・ウェブデベロッパーページのブロックを見てみる

キャリアページ・ウェブデベロッパーページに使われているブロックをひとつづつ見ていきます。(概出のものは省いてます。)

PC表示とスマホ表示のキャプチャ画像を用意したので、表示のされ方の違いを確かめることができます。

PC表示のほうに、オレンジで「ブロック」、黄色で「ブロックテンプレート」「カスタムクラス」を入れてあります(設定されている場合のみ)。

PC表示

ブロックをひとつづつ解説

  • 特色」(概出)。カスタムクラスやブロックテンプレートに何も設定されていません。デフォルトの表示です。
  • ページリスト」(概出)。カスタムクラスに「page-list-with-buttons」が設定されています。

 「page-list-with-buttons」が設定されていると、ボタンでリンクを表示してくれます。この場合は「ページ名とは違うリンクを使用する」にチェックを入れ、リンク文字を入力しておくことが必要です。

スマホ表示

PC表示:ウェブデベロッパーページ

キャリアページのリンクボタンをクリックして表示されたページです。他のページと同じく独立したページですが、キャリアページとのつながりがわかりやすいかなと思い、ここに入れました。

ブロックをひとつづつ解説

  • サイドバーの「ページリスト」は、カスタムクラスに「block-sideber-wrapped」が設定されています。ブロック背景に色が付き、文字が小さく表示されます。

スマホ表示