ページネーション設定
ブログ一覧のページ切り替えの仕組みを先週から入れようとしていたのですが、
なかなか上手くいかず諦めモードになっていたのですが、動く様になりました。
今回は、その上手くハマったページネーションについてみていきます。
修正点
まず、修正点から。
「パーマリンク -> カスタム構造」の設定で、「%post_id%」の後に「.html」を追加しました。
また、テンプレート構成を変更して、ブログ一覧をカテゴリー毎にPHPファイルを用意していたのを辞めました。
ページネーションの読み込みをwhile処理の直後に「the_posts_pagination();」を記述する。
この二つです。
正直、ページネーションが動かない理由がまさかの「%post_id%」に起因しているとは思わず、
びっくりでした。
結論
多分ですが、カスタム構造の「%post_id%」の数値と、ページネーションで生成される数字のリンクが、
いい感じでお互いに邪魔をしているのではないか。
と思って、この部分を削除してみたら正解でした。
もっと早く気がつければ、ここまで時間がかからなかったのにと少し悔しいです。
署名
「手入力から取得して表示する。」に変更していこうと思っています。
タイトルにあるようにフッターに必ず入れている署名の部分を取得して表示するようにしました。
bloginfo
今回使用するタグは「bloginfo();」です。
このタグは、WordPressの「設定 > 一般」で入力した情報を取得するタグです。
タグにはいくつかのパラメータ(取得できるデータ)を指定することで、より簡単に情報を取得・表示することができます。
| パラメータ | 取得できるデータ |
|---|---|
| name | サイトのタイトルを表示 |
| description | キャッチフレーズを表示 |
上記のパラメータは有効に利用できると思います。
この他にもいくつかのパタメータがありますが、これらのパラメータは別のタグが用意されているのでそちらを用いります。
ブレイクポイント
レスポンシブのブレイクポイントを再設定しました。
今回設定したブレイクポイントは、Googleアナリティクスからディスプレイ解像度から設定しました。
ディスプレイ解像度
Googleアナリティクスの「テクノロジー – 概要」から確認することができます。
この中からユーザー(画面の解像度)から確認することができ、ユーザーの画面解像度の数値を取得しました。
| ユーザー(画面の解像度) | 閲覧回数 |
|---|---|
| 1680 | 6割 |
| 1920 | 2割 |
| 1280 | 2割 |
統計としての数字がかなり少ないのでこの割合が正しいのかは微妙ですが、
必要なのは現時点でのユーザーの画面解像度です。
なので、この数値にターゲットを置いてブレイクポイントを設定していくことにします。
基本的な設定
基本的な設定としては、PC、タブレット、スマートフォンの三つを想定しています。
今回取得したのが、PCのディスプレイです。
なので、この数値からディスプレの最低値を「1279px」をターゲットしました。
1279pxとしたのは、ひと昔のWebサイトレイアウトの最大値が1280pxだからです。
ここをブレイクポイントにして、PCレイアウトかタブレットレイアウトのCSSレイアウトを構築していきます。
タブレット、スマートフォンの設定についての詳細については、今後記事にしていきたいと思います。
CSSの設定
ブレイクポイントのトリガーは、ブラウザーのサイズ(横幅のサイズ)です。
ブラウザーの大きさを広くしたり小さくしたもの(サイズ)を取得して、
CSSで設定したブレイクポイント毎に読み込んで、Webデザインに適用します。
記述
CSSで認識させるための記述として、「@media screen and (min-width: —-px) { CSS設定の記述; }」を
記述します。
| 項目 | 内容 |
|---|---|
| パソコン向け | @media screen and (min-width: Apx) ※A: パソコンの切り替わりディスプレイサイズ |
| タブレット向け | @media screen and (max-width: Bpx) and (min-width: Cpx) ※B:タブレットの最大サイズ。C:タブレットの最小サイズ |
| スマホ向け | @media screen and (max-width: Dpx) ※D: スマホの最大サイズ |
設定する単位
ブラウザに反映される単位は複数あります。
※pxや%、emなど
私は、Webサイト全体のフォントを基準にタブやクラスなどの大きさ(サイズ)を設定する方法を使っています。
サイト全体のフォントサイズを「px」で設定したあとに、それぞれで使用する大きさ(サイズ)を「em」で設定します。
こうすることで、CSSの記述を一つで大丈夫になります。
もちろん、微調整をする場合には個別に記述する必要があります。
PHOTo公開
日常風景の写真を取り留めなく撮影していたので、掲載できそうな日常写真をピックアップして掲載していきます。
運動不足を補うために歩きやロードバイクなどで通勤しており、その度にのんびりと写真撮影してきました。
帰宅途中にふらっと赴いた場所の写真や早朝の散歩風景や旅行先のちょっとした風景を写真に納めたりしてきました。
数は少ないですが、今後増やしていけるよう頑張ります。
PHOToページは下記をクリックしてください。
建築事務所様向けデザイン
コンペ形式で案件があったので、ご依頼主様のイメージを元にデザインカンプを起こしました。
トップページのデザインを間違えてしまったのですが、その間違いによりトップページ案を2案制作することになりました。
| 項目 | 内容 |
|---|---|
| トップページ | トップページ |
| Office | 建築事務所の紹介ページ |
| Column | コラムページ(インフォメーションなどを含む) |
| result | 建築デザイン一覧ページ |
| Contact | お問合せページ |
| 404 | 404エラー時のページ |
| 項目 | 設定 |
|---|---|
| サイトの大きさ | フルデザイン(ブラウザの表示領域のサイズ) |
| サイド | 300px |
| メインコンテンツ | 1280px |
コンセプト
コンセプトとして設定されていたのが、「シンプルであること。」でしたので、
ラインと細めのフォントを使用してデザインしました。
カラム数
カラム数は、2つにしました。
こちらもご依頼主様のイメージしているデザインがツーカラムでしたので、
これに「シンプルさ」を併せてデザインしました。
左側をロゴやメニュー、イベント用ページなどのバナーを表示するためのエリアとして配置。
右側にメインコンテンツエリアとしました。メインコンテンツの表示領域は、1280pxとひと昔のWebページの最大領域としました。
ひと昔のサイズにすることで、よりシンプルさを表現使用としたからです。
メインコンテンツ
メインコンテンツエリアの上にある黒いエリアは、Webサイト全体のイメージ画像、もしくは事務所(会社)の外観を載せる部分として配置しました。
このエリアは各ページにもありますが、基本的にはトップページに使う考えです。
各ページタイトル&説明文章
トップページの時は、Webサイト名+活動に対しての思いを。各ページにおいては、ここのエリアがWebページのトップになるのと各ページタイトル+説明文章を
載せます。
制作していく中で
今回のご依頼主様とは縁が結ばれませんでしたが、このような形でご依頼主様がイメージしていたデザインをデザインカンプとして起こしていくことに対して
新鮮な感じを受けました。
どのようなコンセプトでデザインしていくこと。限られた中で、どのように情報を載せるか。どのようにしたら、ご依頼主様らしさを出すか。を深く考えることができました。
また、このような機会があればデザインを制作していきたいと思います。
一部コンテンツの修正
グループのWebサイトを見ておりまして、コンテンツの一部に修正が必要な点を確認いたしました。
それらのコンテンツにつきましては、一部修正を行いました。
また、他にも修正が必要な箇所があると思いますので、
その箇所も随時修正を行なって参ります。
1カラムレイアウト
「モックアップレイアウトの紹介」ということで、今回はAsitisで使っているデザインレイアウトの紹介をしていきます。
カラム
カラムとは、ブラウザーの横方向をブロック別けした「ブロックの数」のことです。
タイトルにある「1カラム」とは、「ブラウザーの横方向を1つのブロックでレイアウトしたもの」となります。
特にWebサイトのトップページなどのレイアウトとして主流になっているのが、この「1カラム」となります。
1カラムレイアウト
大きく五つのブロックに分けました。
ブロック分けとそのブロック毎の役割は、以下の通りです。
| ブロック | 役割 |
|---|---|
| ヘッダー | キービジュアルとメニューを表示 |
| キーコンセプト | コンセプトとしている文章 |
| お知らせ | 当グループのお知らせ一覧 |
| メイン業務 | メインに推す業務内容 |
| フッター | フッターメニューと著作権の表記 |
このレイアウトで構成しています。
コンテンツのメインとしては、キーコンセプト、お知らせ、メイン業務を
表現するエリアとしているので、何を大事とするかによって表示している順番を変えたりすることもありです。
デザインのまとめ
今まで制作してきたモックアップレイアウトのまとめました。
Webデザインの制作を2011年から12年経ち、1年ごとに制作物のまとめをしてきたのでが、
10年経過した一環にデザイン全般のデータをまとめました。
今までノンカラムから色々な要望を受けて、2カラムや3カラムへと無造作に発展させてきました。
その結果、デザインが無系統にそれも無造作にできあがり、かつ色々なところに色々なデータが散乱することになりました。
今思うと、案件ごとにデザインの整理整頓をしていかないといけないと痛感です。
まとめにあたって
デザインをまとめていくにあたり、カラムごとにデザインのベースを制作すること。
このベースを元にクライアントごとに対応する。
これらを念頭においた、デザインのまとめを行うことにしました。
今後の対応
デザインカンプ、モックアップレイアウトをまとめて考えることがありました。
それは「モックアップデザインに関する情報が極端に少ない」ことが気になりました。
以前のモックアップデザインを見直していく際、色々なWebサイトを参考にしていたのですが、
技術系の情報はあるけれど、デザイン制作に関する情報はなかったのです。
ですので、モックアップレイアウトの見直しで気になったところを紹介していきたいと思います。
2022-23年末年始のスケジュールについて
2022-23年の年末年始のスケジュールですが、2022年12月30日-2023年1月9日まで、年末年始のお休みとさせていただきます。
CONTACtページの追加
弊社へのお問合せフォームを追加いたしました。
コンテンツの制作スケジュールがおしてしまい、弊社へのお問合せフォームを追加することができておりませんでしたが、
今日追加する運びとなりました。
フォームのデザインについては、まだ調整が必要な状態でございますが、今後デザインを使いやすい形に調整していきますが、
今しばらくこの形での運用をしていきます。
大変申し訳ございませんが、よろしくお願いいたします。