01_トップページのブロックを見てみる

トップページに使われているブロックをひとつづつ見ていきます。

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

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

PC表示

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

上部

  • ページ上部左のサイトタイトルエリアに「記事」でタイトルが入っています。
  • ページ上部中央のヘッダーナビゲーションエリアに「オートナビ」が入っています。サイトマップをもとにナビゲーションを作ってくれるブロックです。ブロックテンプレートに「レスポンシブヘッダーナビゲーション」が設定されています。
  • ページ上部右のヘッダーサーチエリアに「検索」が入っています。検索窓を表示します。

メインエリア内上から

  • 画像スライダー」は、スライドショーを作ってくれるブロックです。
  • 特色」は、アイコン・タイトル・本文を設定できるブロックです。アイコンはFont Awesomeアイコンです。この特色ブロックのカスタムクラスには「feature-home-page」が設定されています。
  • 水平線」は、水平線を入れるブロックです。
  • 記事」は、文字や画像を入れて記事を書けるブロックです。一行だけでもOKです。
  • ページリスト」は、サイト内の他のページ(の属性)を表示するブロックです。属性とは、ページ名・説明・サムネイルなど、ページにくっついている情報のことです。ブロックテンプレートに「サムネイルグリッド」が設定されています。(3つ目の画像の上にマウスが乗ったままキャプチャしたのでブルーのナビが見えてしまってます)

下部

  • サイト全体のフッターソーシャルエリアに「ソーシャルリンク」が入っています。TwitterやFacebookへのリンクをアイコン表示してくれるブロックです。

重複しているものは省いてます。

スマホ表示

気をつけるべきこと3つ

レイアウト - まとめて表示したい内容は同じ列に入れる

ブロックは縦にしか並べられないので、横に並べたいときはレイアウトを使います(レイアウトを追加する)。このとき気をつけるのは、まとめて表示したいものは同じ列に入れるということです。

PC表示の真ん中あたりに、2列と3列を組み合わせてレイアウトしている箇所があるのですが、これはスマホで表示したときにまとまりが崩れてしまいます。

レイアウトは入れ子にできるので、タイトルの列に新しく2列のレイアウトを入れればOK。タイトルと中身が同じ列の中に収まります。

タイトルと中身が別の列の場合

タイトルだけが先に表示されてしまっています。

タイトルと中身が同じ列の場合

まとまりごとに表示されています。

ヘッダーナビゲーションはスマホだとハンバーガーメニューになる。でもページの中。

ページ上部のヘッダーナビゲーションは、スマホで見るとハンバーガーメニューになっています。

これはスマホでも快適…と一瞬思うのですが、このハンバーガーメニューはページの中に組み込まれています。つまり、スクロールすると見えなくなります。

ページの中ではなく、スマホ画面の下部に表示されるメニューにあれば便利なのに。とても残念。

スライドショーはスマホ表示でタイトルと説明が見切れる

画像スライダーはスライドショーが簡単に作れるブロックです。画像を指定して、タイトルと説明を入力するだけです。

注意すべきは、PCではタイトルと説明がきれいに表示されますが、スマホで表示するとタイトルと説明が全部表示されずに見切れてしまうということです。

画像だけにすればスマホでも問題なく表示されます。

トップページから学ぶ『あきらめポイント』2つ

  • ハンバーガーメニューはページに組み込まれている
  • スライドショーは画像だけならスマホでもいける

スライドショーはまあいいとしても、フッターメニューがないのがひじょうに残念です。

本当はあきらめたくないフッターメニュー。

フッターメニューってこういうのです、っていう画像を貼ります。

ほとんど更新してない私のブログなんですが、WordPressで、無料テーマのcocoonを使っています。

私はスマホ歴が短くてまだ2年経たないのですが、スマホのメニューの便利さに興奮しました(大げさ)。

このサイトではデフォルトテーマで、他のテーマや有料アドオンは使わないという制限のうえでの解説をしております。

なので、concrete5ではフッターメニューはできないということではないんです。たぶん、配布されているたくさんのテーマやアドオンで簡単に解決します。(未検証ですが、不可能である理由がないと思う)

私ももう少し慣れてきたら、解決策を探してぜひ取り入れたいと思っています。