Case study顧客企業様の事例紹介

対応memo

1 STG環境の子サイト「FORCIA CUBE」を複製(サイトの複製)

  • 「Case Study」作成
  • https://www-stg.forcia.com/casestudy/


2 インデックステンプレート

rss_tech

  • 削除

ブログフッター

  • 名称変更:事例紹介フッター
  • 運営会社部分削除

ブログヘッダー

  • 名称変更:事例紹介ヘッダー
  • 一部書き換え
    • /blog/ → /casestudy/
    • <div class="h1"><a href="/casestudy/">Case study</a><span>顧客企業様の事例紹介</span></div>

【SSI】事例紹介(テスト)

  • 削除

メインページ

  • ヘッダー、フッターを書き換え
    • /blog/ → /casestudy/
  • テキストを書き換え      
    <mt:SetVarBlock name="page_title"><$mt:BlogName$></mt:SetVarBlock>
    <mt:SetVarBlock name="page_description">顧客企業さまの事例を紹介いたします</mt:SetVarBlock>
    <mt:SetVarBlock name="page_keywords">フォルシア,顧客企業,事例</mt:SetVarBlock>

3 記事>カテゴリ

  • カテゴリ追加
    • キーワード、記事件数が0の時って表示されないんじゃなかったっけ?
      • 大当たり。ヘッダー・フッターともに表示されることを確認。(3/10aito)

4 アーカイブテンプレート>記事 で記事側のページのヘッダー・フッターを修正

記事へ遷移した後のヘッダーフッター(キーワード部分含む)がブログのままで困っていたが、アーカイブテンプレート>記事 の中にヘッダー・フッターの記述あり
それを /casestudy/ に書き換えることで対応できた(3/10aito)

5 ヘッダーナビゲーションに「事例紹介追加」

ダッシュボード > フォルシアHP-STG > テンプレート > 【SSI】日本語版ヘッダー2021

<li class="casestudy"><a href="/casestudy/">事例紹介</a></li>

6 事例紹介用のcssをつくる・アップする・適用させる

  • blogに適用されているcssはこれ
    • /assets/css/blog201812.css
    • https://www-stg.forcia.com/assets/css/blog201812.css
  • 事例紹介用はこれ
    • /assets/css/casestudy.css
    • https://www-stg.forcia.com/assets/css/casestudy.css

(6-1)つくる =書き換える部分は二か所

  • もとの「blog201812.css」をダウンロードする
    • 「casestudy.css」と名前を変えて保存
  • 【書き換え1】ナビゲーションに関する部分 =gNav(609行目)
    • blog → casestudy へ変更

↓変更後

/* ----------------------------------------------
   Media Queries
------------------------------------------------ */
@media (min-width: 768px) {
    
    /* ヘッダー */
    #gNav ul.main li.casestudy > a {
        border-bottom: 4px solid #63acf1;

(下記を適用させている)

<nav>
            <div id="gNav">
                <div class="gNavWrap">
                  <ul class="main">
                        <li class="casestudy"><a href="/casestudy/">事例紹介</a></li>                   
                    <li class="technology"><a href="/technology/">テクノロジー</a></li>
                </div><!-- /.gNavWrap -->
            </div><!-- /#gNav -->
        </nav>

  • 【書き換え2】ヘッダーのロゴを差し替えて、そのリンクに書き換える
    • 「Case Study」文字ロゴ作成
      • STG、本番どちらにもアップ済み 
      • /assets/images/casestudy_title.png

(書き換える部分は下記、22行目)

↓変更前

#blogHeader .h1 a {
    display: inline-block;
    width: 400px;
    height: 72px;
    background: url(/assets/images/blog/blog_logo.png) no-repeat center center;


↓変更後

#blogHeader .h1 a {
    display: inline-block;
    width: 400px;
    height: 72px;
    background: url(/assets/images/casestudy_title.png) no-repeat center center;

cssの元素材格納先はここ

  • G:\共有ドライブ\10_経営企画室\横串組織\マーケティングWG\事例紹介\css

(6-2)アップする

ダッシュボード > フォルシアHP-STG > Case Study > アセット > アセットのアップロード

  • 上記に(6-1)で作ったcssファイルをアップする
    • アップロード先は → /assets/css/

(6-3)適用させる

関連するテンプレートは書き二つ

  1. ダッシュボード > フォルシアHP-STG > Case Study > テンプレート > メインページ
    1. 21行目
  2. ダッシュボード > フォルシアHP-STG > Case Study > テンプレート > 記事
    1. 88行目
      1. <link rel="stylesheet" type="text/css" href="/assets/css/blog201812.css" media="screen,print">

これで完成!!!!!!!!!!!