*

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

公開日: : 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なんかも視野に入れてないので良しとする。

関連記事

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

WPプラグイン SyntaxHighlighter Evolvedを試す

このブログは自分がCMSとかPHPを触る時の備忘録も兼ねているのだが、ここに書いたコードが読みづらい

記事を読む

サイトをconcrete5.7系に作り変える

唐突だがサイトをリニューアルしたい。さくらでサーバーを借りてから2年目に突入しかけているところだが、

記事を読む

no image

やっぱ独自ドメイン取る。

サーバーに金かけてアドレスなんかどうでも良いってのが俺の美学だったんだけど、やっぱサブドメインっての

記事を読む

Designer Contentでブロックを作る

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

記事を読む

no image

concrete5の使用感

最近巷で有名なconcrete5で、このサイトもブログページ以外はconcrete5で作ってある。

記事を読む

no image

concrete5の欠点

前回ではConcrete5の利点を述べたが、今日はconcrete5の欠点を述べてみたいと思う。

記事を読む

Message

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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

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

現行Concrete cmsのダッシュボードにデフォルトでは日本語化設定がないよっていう話

急速に時間が出来てきたので前回のお蔵入りから久しぶりにconcret

千値練 ネロ レビュー

Devil May Cryシリーズはナンバリングと名倉DmC

遊戯王DM7 決闘都市伝説

虹天使アルシエル先輩から新しい遊戯王クソゲーをやれと言う天啓が降りた

ACFUN 神道物語シリーズ 織田奈々

FAガールに始まる美少女プラモデルが中々最近熱い。可動フィギ

→もっと見る

PAGE TOP ↑