トップページ

ファイルの保存場所

 ルートディレクトリー
└ templates
 - └ internals
 --- └ default
 ----- └ default.html--------：今回の対象ファイル

トップページ HTMLコーディングの際のポイント

以下のブロックを例に説明します。

<section class="top-04 fixbox">
　　<h2>SOLUTION<span>事業内容</span></h2>
　　<div class="top-04-container">
　　　　<section>
　　　　　　<a href="#">
　　　　　　　　<p><img src="{$freo.core.http_url}images/img/top_01.png" alt="WEBコンサル"></p>
　　　　　　　　<h3>WEBコンサル</h3>
　　　　　　　　<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
　　　　　　</a>
　　　　</section>
　　　　<section>
　　　　　　<a href="#">
　　　　　　　　<p><img src="{$freo.core.http_url}images/img/top_02.png" alt="HP制作"></p>
　　　　　　　　<h3>HP制作</h3>
　　　　　　　　<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
　　　　　　</a>
　　　　</section>
　　</div>
</section>

• 1行目：top-04 というクラス名。topページなので、上から順番に、top-01, top-02, top03 とコンテンツをくくっていく（基本はsectionタグ）。
• 3行目：top-04-container というクラス名。更にコンテンツをくくるような場合はsectionタグではなくdivタグを用いて、containerという単語を用いたクラス名にする。
• 3行目：どうしても使わなくてはいけない場合を除いて、むやみにdiv, spanなどのタグを多用しない。
• 7行名：<h3>タグを、<h3 class="top-03-title">としたくなるかもしれないが、冒頭で<section class="top-04 fixbox">という宣言があるので、h3にクラス名を指定しなくても、cssの記述でデザインを指定できるので、無駄なクラス名は極力書かない。
• コンテンツの入れ替え作業があってもクラス名の変更は不要。例えば、top-02のsectionが、top-04のsectionの下に移動したとしても、クラス名の変更をする必要はない。

お客様のサイトのコーディングをした際のコーディングの修正指示を行った際の動画をこちらからご覧になれます。

エントリー

16行名あたりからの以下の記述は、エントリーを表示するためのプログラム言語で書かれています。編集は最低限で済むようになっていますが、必要に応じて書き替えてください。

<!--{foreach from=$entries|smarty:nodefaults item='entry' name='entry'}-->
    <!--{if $smarty.foreach.entry.index < 4 }-->
    <section{if $smarty.foreach.entry.first} class="top-03-first"{/if}>
        <div class="img">
            <a href="{$freo.core.http_url}view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}">
                <!--{if $entry_thumbnails[$entry.id]}-->
                <img src="{$freo.core.http_url}files/entry_thumbnails/{$entry.id}/{$entry.file}" alt="{$entry.title}">
                <!--{else}-->
                <img src="{$freo.core.http_url}images/common/dum_03.png" alt="{$entry.title}">
                <!--{/if}-->
            </a>                        
        </div>
        <div>
            <p class="time">{$entry.datetime|date_format:'%Y.%m.%d'}<!--{if $entry.datetime|recently:7:'day'}--><span>NEW</span><!--{/if}--></p>
            <h3><a href="{$freo.core.http_url}view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}">{$entry.title}</a></h3>
            <!--{if $entry_associates[$entry.id].category}-->
            <ul>
                <!--{foreach from=$entry_associates[$entry.id].category|smarty:nodefaults key='entry_category' item='entry_category' name='loop'}-->
                <li><a href="{$freo.core.http_url}category/{$entry_category}">{$freo.refer.categories[$entry_category].name}</a></li>
                <!--{/foreach}-->
            </ul>
            <!--{/if}-->
        </div>
    </section>
    <!--{/if}-->
<!--{/foreach}-->

16行目 <!--{foreach

41行目のforeachの閉じるタグまで、特定の条件で繰り返しの処理を行います。17行目以降を繰り返すという意味です。

17行目 <!--{if $smarty

index < 4 という記述が4個まで繰り返しをするという意味です。index < 5と記載すると、5個までエントリーが表示されます。

18行目 <section{if $sma

最初のループのみ、sectionタグに class="top-03-first"を付与するという意味をもつ条件分岐です。

19行目 <div class="img

画像を表示するタグです。不要な場合は、27行目の閉じタグまでをまとめて削除してください。

31行目 <!--{if $entry_as

カテゴリーを表示するためのタグです。カテゴリーを利用しない場合は、35行目のforeachの閉じタグまでをまとめて削除してください。

SNSガジェット

以下のようなSNSガジェットの作成する際のサイトへのリンクを記載します。

facebook

FACEBOOK for Developers

twitter

twitter タイムラインを埋め込む方法

instagram

snapwidget
instagramの埋め込みは外部のサービスを利用することになり、動作が安定しないのであまりお勧めしません。それでも利用する場合はお客様に「外部のサービスを利用するため、HPの動作が不安定になることがあります」と伝えてから利用ようするようにしてください。また、インスタグラムのユーザーIDとパスワードをもらって設定をする必要があります。