PCサイトとスマホ(スマートフォン)サイトの画像を切り替える方法(3)

2)オリジナルブロックの作成(リンク付き画像2個[PC用/スマホ用]表示ブロック)

Designer Conctent のインストールが正常に完了すると、『管理画面』 → 「スタックとブロック」の一番下に 「Designer Content」が表示されるので、クリックする。

Manager Display.jpg

オリジナルブロックを作成する画面が開く

Designer Content make_block.jpg

 
 ※Designer Content の表示が英語、日本語混じりなのは、このバージョンが、部分的にしか、ローカライズ(日本語化)されていないためかと思われます。
  あらかじめご了承ください。

Block Handle:
ブロック名:
Block Description:
(ブロックの説明はオプション)

に以下のように設定しています。

※命名規則は、小文字とアンダースコアのみ
 (でないと以下のエラーが出ます)
Cannot proceed! Please correct the following errors:
* Block Handle can only contain lowercase letters and underscores.

Block Handle: select_image_by_agent
ブロック名: 画像切替(ByAgent)
Block Description: UserAgentによる2種類の画像切替ブロック(Designer Content)

make_block_1(Designer Content).jpg

 ★作成するブロックの仕様では、画像を2個登録できるようにするので

Add Field: [Static HTML] [Text Box] [テキストエリア(複数行)] [画像] [File Download] [Page Link] [外部URL] [Date Picker]  [Dropdown List] [WYSIWYG Editor]

[Static HTML] をクリック。
続いて、 [画像]2回クリックする。
最後に、もう一度、[Static HTML]をクリックして、
以下のように「class」と編集画面で表示される「画像1(PC)」、「画像2(SP)」を適宜入力する。

※画像にリンク必要なら、Show Link Field: 「なし」 → 「Sitemap  or外部URL にしてください
(当手順では、サイト内のリンクを追加しています)

make_block_2(Designer Content)s.jpg

 設定が出来たら、『Make The Block!』ボタンを押す。

 ※一度作成すると、再編集はできないので、作成中の画面のハードコピーを取得しておくか、何らかのメモを残しておくこと。
 ※一度作成してみて、どんなファイル構造になっているかを確認するのも使い方に慣れるのにはおすすめです。

make_block_4(Designer Content).jpg

 「Success!」 と表示されればブロックは完成で利用が可能です。

 ※concrete5フォルダ内、Blocks/フォルダを確認してください。
select_image_by_agentフォルダができているので、これをFTPソフト等で、ダウンロードします。

 ※データベースには、btDCSelectImageByAgent というテーブルが作成されています。

btDCSelectImageByAgent 

フィールド種別ヌル(NULL)デフォルト値コメント
bID int(10) いいえ     
field_2_image_fID int(11) はい  NULL   
field_2_image_internalLinkCID int(11) はい  NULL   
field_3_image_fID int(11) はい  NULL   
field_3_image_internalLinkCID int(11) はい  NULL   

※上記の結果表示用Tableは、jquery plugin の jQuery Basic Table を使用して整形しています

「PCサイトとスマホ(スマートフォン)サイトの画像を切り替える方法(3)」への0件のフィードバック

コメントを残す



(このメールアドレスは表示されません。)


Captcha認証コード

Captchaをクリックすると違う文字候補が出てきます。