このページの本文へ

モジュールの導入と動的コンテンツの表示 (1/7)

2014年06月05日 11時01分更新

文●足立 恵・森田 霞/アップルップル

  • この記事をはてなブックマークに追加
本文印刷

 第3回では、前回作成したtop.htmlをカスタマイズして、トップページに動的コンテンツを表示します。動的コンテンツとは、エントリー本文やカテゴリーリスト、トピックパス、ナビゲーションなど、CMSで管理しているコンテンツのことで、a-blog cmsでは「モジュール」という機能を使って表示します。モジュールの種類については、a-blog cmsのリファレンスサイトを参照してください。TwitterやInstagramなどのSNSのコンテンツも表示できます。

  1. モジュールで動的コンテンツを表示する
  2. 「バナー」の表示
  3. 「お知らせ」「製品一覧」を表示する
  4. まとめ

1.モジュールで動的コンテンツを表示する

 サンプルサイト「株式会社ウェブプロ」のトップページに、リンク先を設定した画像を表示する「バナー」、日付のあるニュース記事のタイトルを日付とともに表示する「お知らせ」、製品写真と該当ページのタイトルを表示する「製品一覧」を追加します。

01.png

サンプルサイトのトップページで使われる3つのモジュール

 それぞれのコンテンツを表示するために使うモジュールは下記の3つです。

コンテンツ機能モジュール名
バナー画像とそのリンク先を登録するバナー(Banner)
お知らせ記事のタイトル、カテゴリー、URL、日時を表示するヘッドライン(Entry_Headline)
製品情報の一覧記事の画像、タイトル、URLを表示するフォト(Entry_Photo)

 モジュールは、「スニペット」と呼ぶ一連の設定文(短いHTMLの固まり)をテンプレートファイルに追加することで有効になります。各モジュールに対応するスニペットは、インストールしたa-blog cmsの管理ページか、a-blog cmsのリファレンスサイトからコピー&ペーストできます。

04.png

上はインストールしたa-blog cmsの管理ページから[コンフィグ]→[モジュール]と移動して、[フォト]を選んだところ。中央は、a-blog cms developerサイトで[フォト]のスニペットを選んだ場合。どちらも選んだ後、下のようにスニペットが選択された状態で表示される

 各モジュールの表示はCSSで整えるので、スニペットを貼り付けるテンプレートに「custom.css」を読み込んでおきます。第2回で作成した、下記ディレクトリーにある「top.html」をエディターで開き、記述を修正します。

 Mac OS → Macintosh HD/ユーザー/(ユーザー名)/Applications/AMPPS/www/themes/webpro
 Windows → C:¥Program Files¥Ampps¥www¥themes¥webpro
 注:Windowsの場合、「C:¥Program Files」が「C:¥Program Files(x86)」の場合があります

■元のソースコード


<!-- <link href="/css/custom.css" rel="stylesheet" type="text/css" media="all"> -->

■修正後のソースコード


<link href="/css/custom.css" rel="stylesheet" type="text/css" media="all">

a-blog cms Ver.2.0.X以下を使用している場合

 この連載では、a-blog cms Ver.2.1.0から同梱されている「custom.css」を使用します。a-blog cms Ver.2.0.X以下をお使いの方は、専用サイトから新しい「custom.css」をダウンロードしてください。

 ダウンロードした「custom.css」は、

 Mac → Macintosh HD/ユーザー/(ユーザー名)/Applications/AMPPS/www/themes/webpro/css
 Windows → C:¥Program Files¥Ampps¥www¥themes¥webpro¥css
 注:Windowsの場合「C:¥Program Files」が「C:¥Program Files(x86)」の場合があります

にある「custom.css」と差し替えてください。

前へ 1 2 3 4 5 6 7 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く