cmsで利用できるようなテンプレートファイルに編集し、最終的には1つのオリジナルテーマを作成していきます。使用して説明しておりますが、以下のフォームから実際に作業をするサーバーのURLを入れていただく事で、文中のテキストを希望のURLに書き換えることができます。して、初期インストール時より登録されていたモジュールIDを全て削除します。全てのチェックボックスにチェックをつけ、プルダウンメニューより削除を選択しましょう。表示された削除ボタンをクリックすると、削除が完了します。ファイルをダウンロードしてください。(6.6MB)このファイルが今回の練習用の静的なHTMLサイトのデータファイルになります。中には以下のフォルダ・ファイルが同封されています。詳細ページindex.html、list.html、entry.htmlのファイル内リンクについては、作業のしやすさを考慮して絶対パスを使用しています。サイトのデザインについてブラウザでチェックしたい場合は、同封している相対パス版フォルダの中のテンプレートをご利用ください。今回はこのデータファイルをテーマとして設定します。フォルダにアップロードしてください。内容は表示されません。それぞれのファイルに以下の3種類のタグを追加します。上に以下の記述を追加してください。)acms.jsはページの表示に関する様々な機能を記述したJavaScriptファイルです。下に以下の記述を追加してください。)エントリー作成ボタンやログアウトボタン等の管理ボックスを表示するインクルード文です。内のそれぞれについて、bodyタグの開始直後に以下の記述を追加します。インクルードしているのに管理ボックスが出てこない場合は、ログインしていない可能性があります。ログインして再度ご確認ください。テーマ「sample」を設定するそれでは、テーマ「sample」を実際に表示してみましょう。移動し、3つの部分を変更します。テーマが適用されています。生成されたファイルであることが確認できます。ブラウザでテンプレートを表示する際に画像のパスが自動修正されます。例としてヘッダー部分のマーク画像のソースをご確認ください。この画像は、テンプレート上では以下のように記述されています。class="site-logo">本来は、この記述のままでは画像は表示できません。下記のように画像のパスを自動修正しているため、ここでは正常に画像が表示されています。タグのパスについても行われています。以下は自動修正されたCSSリンクの例です。静的HTMLファイルをテーマ化する際も基本的にはテンプレートファイルを修正することなく、既存のコードを活用していただけます。href="/themes/sample/js/slick/slick.css">※1点、下のように背景画像をインラインスタイルで設定している部分では、パスの自動修正は行われません。以下のソースが該当しているため、トピック10「一覧ページ:カテゴリー毎にページタイトル部分を変更できるようにする」にて書き換え作業を行っていきます。インクルード機能でファイルをまとめる作業始めに、インクルード機能を使ってファイルのパスを表記し直しましょう。cmsの内部構造について」をご参照ください。今回のハンズオンでは、以下のそれぞれについてインクルード処理をすることで、以後のテンプレートの管理を円滑にすることができます。例にインクルードの手順をご紹介します。いうフォルダ内で管理します。ソースをコピー&ペーストして保存しましょう。読み込むインクルード文に差し替えます。@include("/include/header.html")この作業を、上記の5つのサイト内パーツについて行いましょう。ソース側にコメントを追加出力する機能が用意されています。実際に、ブラウザの「ページのソースを表示」もしくは「検証」ソースコードからは、以下のようなインクルードコメントが確認できます。-->6.タイトルタグを動的に変更するタイトルタグについて、それぞれのファイルでは以下のようにテキストで静的に書かれています。ブログ名」のように表示されるのが適切です。そのために、このタイトルタグを全て以下のように変更します。中に用意されています。コメントがソースコードにそのまま表示されるのを防いでいます。「ナビゲーション」モジュールを実装する次はナビゲーションをモジュール化してブラウザから変更できるようにしていきましょう。ページを増やした際に、ナビゲーションに随時その項目を追加することができます。モジュールについて、詳しくはチュートリアルレベル2「ナビゲーションを編集する」をご覧ください。</div>今回は以下の手順で静的なコードをモジュール化していきます。見比べるために、スニペットを修正箇所の下部に貼り付けましょう。囲まれているのがわかります。モジュールIDを新規作成します。モジュールIDについて、詳しくはチュートリアル「モジュールで出力している情報を変更する」をご覧ください。ついてラベルとURLを設定しましょう。この3つのラベルがナビゲーションの項目になります。class="js-link_match_location-full"今回は「一覧」をクリックした時にお知らせの一覧ページ(http://localhost/news/)を、「詳細」をクリックした時に既存のエントリー「ホームページをリニューアルしました」(http://localhost/news/entry-20.html)を表示させるようにします。)が動作するようになります。cmsの内部構造について」をご覧ください。モジュールブロックの開始直後に、設定に関わるファイル@include("/admin/module/setting.html")もインクルードしておきましょう。-->その後サイトに戻ると、既存のナビゲーションの下にナビゲーションモジュールのサンプルが表示されます。タグを、モジュールIDで設定する「表示件数」に基づいて必要な分だけ複製されるようにしていきます。href="index.html">ホーム</a></li>が繰り返されるようになります。内を編集するさらにこの繰り返した<li>内の情報を変数に置き換えて、「ホーム」と表示されている部分にモジュールID設定画面から入力した「一覧」「詳細」などの文字を表示させていきます。今回のナビゲーションにおいては、<li>にスタイルを指定するクラスが直接書かれていないため、<li>全体においてスニペットからコピー&ペーストしましょう。ul#frontが振ってあるので、これらも含めて書き換えます。-->以上でナビゲーションのモジュール化は完了です。文字や、該当ページへのリンクが正しく設定されていれば正常に動的化されています。参考にしていたスニペット部分は不要になるので、最後に削除しておきましょう。以後のセクションにおいて何度かモジュール化の課題が出てきますが、作業の流れは今回行ったナビゲーションと変わりません。特有のラベルを書き加えていくことになります。サブカラム共通:サイト内検索機能を実装する各ページのサブカラムに用意されている検索フォームが機能するように実装していきます。class="acms-form-action"内です。class="acms-hide-visually">検索</span></button></span>これについて、以下のように書き換えていきます。value="%{BID}">ポイントは以下の3点です。実装が終わったら、サイトに戻って試しに「エントリー」と検索してみましょう。検索結果が黄色で反映されていれば成功です。9.トップページ:「エントリーヘッドライン」モジュールを実装する「特定のカテゴリーの一覧」と書かれている5件のエントリーリストについて、インストール時から用意されている「お知らせ」カテゴリー内の3つのエントリー「ホームページをリニューアルしました」「ユニットによる要素の掲載例」「段組のテスト」を表示させていきます。しては、以下の5つが用意されています。以降を修正していきましょう。コピーして、修正する場所の直後に貼り付けてください。