*

[第4回] G/Afをコンクリ5.7に改造する[Concrete5]

公開日: : 最終更新日:2024/01/18 CMS, ホームページ関係

このホームページの根幹、ギャラリーページを作りこんでみよう。
なんのギャラリーなのかを明示してそのレビューと画像を表示していく。
画像は実物大、或いはレスポンシブさせた画像を列挙するとページが無駄に冗長化してしまうので、
普段はサムネイル画像を表示させつつ、いずれかをクリックされたらライトボックスで表示するという動きにする。

gal

モックアップの拡張子をPHPに変更して仕様を決定する。

gal_2

・大見出し h2として表記する箇所になるのでページタイトルをそのまま表記する。
・大見出し画像 後々一覧ページで表示させたいのでページ属性として設定する。
・ギャラリー画像 ブロックとして表現。SwipeBoxというLightboxのスクリプトを埋め込んでいる。
以前ならDesigner Contentsでブロックを作っていたのだが、5.7系では非対応であり、代替え案となるアドオンも有料。
よってブロックにカスタムテンプレートを組み込んで使う。

ちなみのそのアドオンは決して高くはないのだが、クレジットカードを持っていないので決済手段が無い。
よってネットの買い物は1円の買い物でも手が届かないくらいの高額商品なってしまうというのが僕の現状だ。

 

まずギャラリー画像部分だが、カスタムテンプレートを組み込めば当初予定しているレイアウトは実現できるのだが、
このままだと画像を一枚追加するたびにカスタムテンプレートを当てなければならない。
それはなんだか面倒だ。なので、画像を追加した場合には自動でテンプレートが適応されるようにした。

 $a = new Area('Main');
 $a->setCustomTemplate('image','templates/[取りたいテンプレートへのパス]');
 $a->display($c);

このようにすればカスタムテンプレートをデフォルトで読み込んでくれる。
編集画面上でクラスの設定などをすると適応されなくなるが、特にする必要もないので、今回は無視する。

で、完成させたのがこれなんだが…

gal_3

長いタイトルを付けるとレイアウト崩れを起こさんばかりになってしまう!!

ってことで方法を考えてみる。
・タイトルに文字制限をオペレーションする
この方法は却下。タイトルタグには「製造メーカー、商品名、スケール、(場合によっては仕様名)」まで入れたいのでどうしても長くなる。
・h2にはタイトルタグと同じものを入れない
この案を採用。h2にはタイトルタグと同じものを入れろとか言われたことないし。

方法としてはまたしてもページ属性。
gal_4

コンパネから「ページとテーマ」→「属性」でページ属性を新たに追加する。

gal_5

するとページ内の設定でこんな風に追加が出来るようになったのでこれを出力できるようにすればいい。
ただ、毎回これを設定するのも面倒なので必要性を感じなければそのままタイトルを表示するようにしたい。
ってことでテンプレートに書くコードとしてはこんな感じだ。

$page_head_title = $page->getAttribute('page_head_title');
if($page_head_title){
 echo $page_head_title;
}else{
 echo ($page->getCollectionName());
}

getAttributeでページ属性を取得し、その入力があったらそれを表示、無ければタイトルを出力という形。

gal_6

完成形はこのような形か。
お客さんに納品するサイトだったらデザイン・コーディング側で調整しなければならないが、
どうせ自分しか運用しないし、SEOなんかも視野に入れてないので良しとする。

関連記事

Designer Contentでブロックを作る

Concrete5の無料で用意されているアドオンの一種類である「Sortable Fancybox

記事を読む

独自ドメインを取った後設定した色々な事

新年あけましておめでとうございます。 日頃はG/AFとそのブログコンテンツのバトルレポートのご引き

記事を読む

WordPressのサイトパスを変えたときの対処法

Wordpressのインストールをした時、例えばデフォルトのフォルダ名でアップロードしちゃったなんて

記事を読む

macのアカウントを変えるとMAMPのMySQLが起動しない

またしてもMAMPにやられたので備忘録的にメモ。 MACに限らず殆どのOSはアカウント切り替え

記事を読む

no image

サブドメインをとったのでサイトのディレクトリを移動した。

最近になってサクラサーバー上で独自ドメインに近いサブドメインを無料で取れる事に気がついてコレを取得し

記事を読む

no image

共有をテスト

移転してからどうも変だったのでJETPACKの共有をやりなおした。 「jetpack 移転」と

記事を読む

concrete5 編集モードの時だけ表示しない 改定

以前編集モードの時にjqueryを読み込みたくなくて、編集モード限定でコメントアウトする方法を掲載し

記事を読む

no image

[第2回] G/Afをコンクリ5.7に改造する[Concrete5]

ってことで前回の記事から引き続き作業を続ける。 今回は前編と後編に分けてテーマの基本を作成する。

記事を読む

no image

Concrete5の凡ミスとその対処

concrete5 テーマ変更で反映されない というキーワードで検索されたことがある様子。

記事を読む

no image

PHPでRSSを取得して記事一覧を表示

concrete5でWordpressの記事一覧を表示してくれって言われたからなんとかできないか模索

記事を読む

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

エクシーズ×リンクフェスティバルレポ

報酬を全部集めたわけではないが、とりあえずミッション分は完走

MD魔術師S23レポ

前回の記事を書いた時からデビューしたマスターデュエル。ただ、

マスターデュエルにてやっとプラチナに上がれた話

ネットの友人にモチベを掛けられてマスターデュエル参入。リンク

太陽の帝国、大鷲の群れに挑まんとす(ゲームジャーナル39号 真珠湾強襲リプレイpart:1)

初め半年や1年の間は随分暴れてご覧に入れる。然しながら、2年3年と

ダンジョンダイスモンスターズ レビュー

「クソゲーをプレイするのです。」以前この俺にクソゲーをレビュ

→もっと見る

PAGE TOP ↑