PHOTo公開

日常風景の写真を取り留めなく撮影していたので、掲載できそうな日常写真をピックアップして掲載していきます。

運動不足を補うために歩きやロードバイクなどで通勤しており、その度にのんびりと写真撮影してきました。
帰宅途中にふらっと赴いた場所の写真や早朝の散歩風景や旅行先のちょっとした風景を写真に納めたりしてきました。
数は少ないですが、今後増やしていけるよう頑張ります。
PHOToページは下記をクリックしてください。

PHOTo

photo公開

日常風景の写真を取り留めなく撮影していたので、掲載できそうな日常写真をピックアップして掲載していきます。

運動不足を補うために歩きやロードバイクなどで通勤しており、その度にのんびりと写真撮影してきました。
帰宅途中にふらっと赴いた場所の写真や早朝の散歩風景や旅行先のちょっとした風景を写真に納めたりしてきました。
数は少ないですが、今後増やしていけるよう頑張ります。

PHOTo

カスタムフィールドの設定

写真掲載するためのページをWPで表現するために、投稿機能のカスタムフィールドを使用しました。
カスタムフィールドは、サイト管理者がデータを格納するための変数を設定したり、その変数に格納するデータを入力することができます。

投稿機能で入力したデータは、category.phpなどのファイルで利用することができます。
利用するために「post_custom(”);」を記述し、「'(シングルクォーテーション)」の中に投稿機能で設定した変数を指定することで、 データを取得して使うことができるようになります。

設定したカスタムフィールド項目は、下記の通りとなります。

カスタムフィールド名内容
thum_blogimg掲載する写真の名前を入力する項目
thum_blogalt掲載する写真の説明を入力する項目
thum_blogpoint掲載する写真を撮影した場所を入力する項目

カスタムフィールドの利用

投稿機能で入力したデータや項目を利用する場合について、説明していきます。 まずは、テキストデータについてをみていきます。

カスタムフィールドの項目を利用するときは、「post_custom(”);」を表示したい場所に記述をします。 記述後、表示したいカスタムフィールドの項目を「'(シングルクォーテーション)」の中に入力することで、 投稿した記事内で入力したデータを取得することができるようになります。

PHPコマンド内容
post_custom(‘カスタムフィールド名’);カスタムフィールドに格納されているデータを取得

また、「post_custom(‘カスタムフィールド名’);」でデータを取得しても、このままでは表示させることができません。
表示するには、「echo post_custom(‘カスタムフィールド名’);」と「echo」をPHPコマンドの前に記載しないといけませんので注意が必要です。

次に画像を表示したい場合です。 カスタムフィールド気を使いたいのは、画像を指定した時に画像名が格納されるのではなく、画像データの「id」が格納されるので、 「post_custom(”);」では表示することができないという欠点があります。 なので、この「id」を使って画像を指定するようにします。

この時に用いいるPHPコマンドは「get_post_meta(‘引数1′,’引数2′,’引数3’);」になります。

引数の項目内容
引数1$post->ID
画像の格納IDを指定
引数2thum_blogimg
画像のファイル名のカスタムフィールド名を指定
引数3trueを指定

と、テキストデータを扱うカスタムフィールドと画像を扱うカスタムフィールドで、表示のさせ方少し違う記述になるので注意しましょう。 これを解決するのに1日と時間を使うことになりました。

建築事務所様向けデザイン

コンペ形式で案件があったので、ご依頼主様のイメージを元にデザインカンプを起こしました。
トップページのデザインを間違えてしまったのですが、その間違いによりトップページ案を2案制作することになりました。

項目内容
トップページトップページ
Office建築事務所の紹介ページ
Columnコラムページ(インフォメーションなどを含む)
result建築デザイン一覧ページ
Contactお問合せページ
404404エラー時のページ
項目設定
サイトの大きさフルデザイン(ブラウザの表示領域のサイズ)
サイド300px
メインコンテンツ1280px

コンセプト

コンセプトとして設定されていたのが、「シンプルであること。」でしたので、
ラインと細めのフォントを使用してデザインしました。

建築事務所様向けデザイン

カラム数

カラム数は、2つにしました。
こちらもご依頼主様のイメージしているデザインがツーカラムでしたので、
これに「シンプルさ」を併せてデザインしました。

左側をロゴやメニュー、イベント用ページなどのバナーを表示するためのエリアとして配置。
右側にメインコンテンツエリアとしました。メインコンテンツの表示領域は、1280pxとひと昔のWebページの最大領域としました。
ひと昔のサイズにすることで、よりシンプルさを表現使用としたからです。

メインコンテンツ

メインコンテンツエリアの上にある黒いエリアは、Webサイト全体のイメージ画像、もしくは事務所(会社)の外観を載せる部分として配置しました。
このエリアは各ページにもありますが、基本的にはトップページに使う考えです。

各ページタイトル&説明文章

トップページの時は、Webサイト名+活動に対しての思いを。各ページにおいては、ここのエリアがWebページのトップになるのと各ページタイトル+説明文章を
載せます。

制作していく中で

今回のご依頼主様とは縁が結ばれませんでしたが、このような形でご依頼主様がイメージしていたデザインをデザインカンプとして起こしていくことに対して
新鮮な感じを受けました。
どのようなコンセプトでデザインしていくこと。限られた中で、どのように情報を載せるか。どのようにしたら、ご依頼主様らしさを出すか。を深く考えることができました。
また、このような機会があればデザインを制作していきたいと思います。

一部コンテンツの修正

グループのWebサイトを見ておりまして、コンテンツの一部に修正が必要な点を確認いたしました。

それらのコンテンツにつきましては、一部修正を行いました。
また、他にも修正が必要な箇所があると思いますので、
その箇所も随時修正を行なって参ります。

1カラムレイアウト

「モックアップレイアウトの紹介」ということで、今回はAsitisで使っているデザインレイアウトの紹介をしていきます。

カラム

カラムとは、ブラウザーの横方向をブロック別けした「ブロックの数」のことです。
タイトルにある「1カラム」とは、「ブラウザーの横方向を1つのブロックでレイアウトしたもの」となります。

特にWebサイトのトップページなどのレイアウトとして主流になっているのが、この「1カラム」となります。

1カラムレイアウト

モックアップ-Asitis

大きく五つのブロックに分けました。
ブロック分けとそのブロック毎の役割は、以下の通りです。

ブロック役割
ヘッダーキービジュアルとメニューを表示
キーコンセプトコンセプトとしている文章
お知らせ当グループのお知らせ一覧
メイン業務メインに推す業務内容
フッターフッターメニューと著作権の表記

このレイアウトで構成しています。
コンテンツのメインとしては、キーコンセプト、お知らせ、メイン業務を
表現するエリアとしているので、何を大事とするかによって表示している順番を変えたりすることもありです。

デザインのまとめ

今まで制作してきたモックアップレイアウトのまとめました。
Webデザインの制作を2011年から12年経ち、1年ごとに制作物のまとめをしてきたのでが、
10年経過した一環にデザイン全般のデータをまとめました。

今までノンカラムから色々な要望を受けて、2カラムや3カラムへと無造作に発展させてきました。
その結果、デザインが無系統にそれも無造作にできあがり、かつ色々なところに色々なデータが散乱することになりました。 今思うと、案件ごとにデザインの整理整頓をしていかないといけないと痛感です。

まとめにあたって

デザインをまとめていくにあたり、カラムごとにデザインのベースを制作すること。
このベースを元にクライアントごとに対応する。
これらを念頭においた、デザインのまとめを行うことにしました。

今後の対応

デザインカンプ、モックアップレイアウトをまとめて考えることがありました。
それは「モックアップデザインに関する情報が極端に少ない」ことが気になりました。 以前のモックアップデザインを見直していく際、色々なWebサイトを参考にしていたのですが、
技術系の情報はあるけれど、デザイン制作に関する情報はなかったのです。

ですので、モックアップレイアウトの見直しで気になったところを紹介していきたいと思います。

2022-23年末年始のスケジュールについて

2022-23年の年末年始のスケジュールですが、2022年12月30日-2023年1月9日まで、年末年始のお休みとさせていただきます。

CONTACtページの追加

弊社へのお問合せフォームを追加いたしました。

コンテンツの制作スケジュールがおしてしまい、弊社へのお問合せフォームを追加することができておりませんでしたが、
今日追加する運びとなりました。

フォームのデザインについては、まだ調整が必要な状態でございますが、今後デザインを使いやすい形に調整していきますが、
今しばらくこの形での運用をしていきます。
大変申し訳ございませんが、よろしくお願いいたします。

Webページ追加

サイトマップとWordPressテンプレート「404.php」を追加しました。

「何か足りない。」とずっと感じていたのですが、それにようやく気がついて「404.php」のデザインしました。
「404.php」のデザインを流用してサイトマップを構成しています。

サイトマップデパートの案内表示板みたいな役割です。
Webサイトを構成しているWebページのリンク集です。ここから、目的のWebページを直接開くことができます。
404.phpWPテーマを構成しているPHPファイルです。表示したいWebページがリンク切れだったり、検索した結果でWebページがない場合に表示します。

今回の追加デザインで、なんとなくの方向性が決まった気がします。
これからも「As it is」をよろしくお願いいします。

WordPressまとめ

数年ぶりのWPテーマの制作をしました。初めてWPテーマの制作をした時よりも時間もかからずスムーズにコーディングすることができことにびっくりしてます。
もっと時間がかかると思っていましたので。
今回、WPテーマ制作で使ったタグなどをまとめていきます。
WPのまとめ記事については、どのように運用していくかは今後検討していきます。

前述したタグを使用する場合は、「php」の後に記述してPHP文を完成させて使用するようにしてください。

スタイルシートの読み込みと分岐

WPテーマ制作の際にトップページとそれ以外で適用するスタイルシートを別ける必要があったため、
トップページで読み込むスタイルシート(style_home.css)とそれ以外のページ(style.css)でスタイルシートを準備し
WPの条件分岐if文で読み込みの切り替えをすることにしました。

タグ概要
php if(条件式):条件式に合致しているかの判定。条件に会っている場合に表示する項目などを切り替えることができる
php else条件分岐に合致しない場合に表示する項目などを切り替えることができる
bloginfo( ‘stylesheet_url’ );テーマフォルダにあるstyle.cssを読み込み
echo get_template_directory_uri();テーマフォルダのURLの取得

get_template_directory_uriについて

上記タグは大体はそのまま「php」の中に記述することで各テーマ.php内で使用することができますが、
「get_template_directory_uri();」は色々な箇所で使える便利なタグなので紹介します。

get_template_directory_uri();とは

「get_template_directory_uri();」はドメイン名までのURLを取得することができます。
例えば画像を表示するときなどに「get_template_directory_uri()」を「img src=”/images.jpg”」のsrc属性「/」の前に
記述することで画像を表示させることができるようになります。
画像だけではなく、それ以外のデータを指定することでWebサイト内でダウンロードしてもらうことができるようになります。

今回のまとめ

タグの紹介ではコピペだけでは上手く処理が行われない場合もあります。私もそこでつまづきました。
「php」の記述をしておりません。これは多分、そのWebサイトもWordPressで構築されている可能性があり、PHPの記述()をした時に
正常にWebサイトが表示されないこと場合があると思います。