• MENU●●●●
  • シリウスフッター縦サイズ変更と キャッチテキストカスタマイズ


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    シリウスフッター縦サイズ変更とキャッチテキストカスタマイズ

    2015 0115
    シリウスフッターカスタマイズ 縦サイズ変更

     

    シリウスのデフォルトサイズのフッターのカスタマイズ手順です

     

    デフォルトスタイルでもなんら問題ないのでしょうけれど

     

    ワールドプレスに見られるようなフッターの縦幅を300PXとか500PX
    程に大きくして テキストや画像を配置したい要望の方もおられます

     

    サポートによせられる質問では
    html内のフッター項目ににテキストを追加しても レイアウトが
    まとまりませんとの報告がございます

     

    そうですね

     

    CSSフッターでは フッター内の記事レイアウトの指定記述がないので
    テキストを追加してもまとまらないのです

     

    今回は レイアウトを調整するため
    cssフッター内に指定記述を付け加えております

     

    解説は簡単カスタマイズと やや手間必要カスタマイズの
    2種類の手順ですが

     

    フッター内を一カラムと2カラムにする手順も含めていますので
    ブログ等のようなフッターへのカスタマイズ可能です

     

     

     


     

    最初は 簡単に縦サイズを変更して ショートテキスト配置例

     

    シリウスのフッターサイズの横幅は自動で調整されますが 縦幅を
    変更する場合は手動で行います

     

    スタイルシートを開いてください

     

    以下の箇所です

     

     

    /* フッター */

     

    #footer {
    text-align: center;
    color: #810000;
    line-height: 64px;
    height: 64px;
    background-image: url(./img/footer.gif);
    background-repeat: repeat-x;
    background-position: left top;
    }

     

     

    height: 64px;が縦サイズを指定してますので
    書き換えれば完了しますが

     

    サイズをおおきくした場合で スペースが空きすぎましたら
    ここは画像なのでシリウステンプレートフォルダで画像サイズを編集調整してください

     

     

    画像編集を行わず CSSで変更する場合はカラーコードのみ変更すれば
    スペースを埋める作業は回避されます
    background-image: url(./img/footer.gif); に記述を

     

    単色カラーに書き換えます
    background-color: #810000; カラーは好みの指定をしてください

     


     

    フッターのテキストにわずかなキャッチコピーを追加する手順

     

    HTMLテンプレート内でのテキスト追加

     

     

     

    以下の箇所です
    <!-- ★フッターここから★ -->
    <div id="footlink"><% footerMenu %><% PRLink %><% sitemapPageLink %></div>
    <% topMenu %>
    <div id="footer">Copyright (C) <% thisYear %> <a href="<% pageDepth %>"<% siteTitle %></a> All Rights Reserved.<% accessAnalyzer %></div>
    <!-- ★フッターここまで★ -->

     

     

    上記コード内で一部追加します

     

    テキスト追加例
    <!-- ★フッターここから★ -->
    <div id="footlink"><% footerMenu %><% PRLink %><% sitemapPageLink %></div>
    <% topMenu %>
    <div id="footer">Copyright (C) <% thisYear %> <a href="<% pageDepth %>"<% siteTitle %></a> All Rights Reserved.<% accessAnalyzer %>
    ここにテキストを追加します

     

    </div>
    <!-- ★フッターここまで★ -->

     

     

     


     

    フッターに長文テキストや画像を配置する場合

     

    スタイルシートのフッター記述には にぎやかに記事を表示させる指定が
    鉾されていないため記述の追加が必要になります

     

    以下例 縦一カラム例

     

     

    スタイルシートのフッター記述に 追加行しないと スタイルが
    ずれて全然まとまりませんので

     

    赤印で示した記述を追加して調整しました

     

    /* フッター */

     

    #footer {
    text-align: center;
    color: #FFFFFF;
    line-height: 64px;
    height: 280px;   
    background-color:#777777;
    background-repeat: repeat-x;
    background-position: left top;
    }

     

    #footer {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;

     

    background-repeat: repeat-y;
    text-align: center;
    line-height: 120%;
    font-size: 16px;
    padding: 4px;
    }

     

     

     

     

     

    htmlテンプレート内の記述例

     

    文字 画像は行ごとに div要素で囲ってください

     

    フッターここからの箇所です

     

    以下コードはカラムに収まりませんのでコピーしてシリウス記事欄に
    張り付けますと 正確に閲覧出来ます

     

    記事内で講師をしてから再度コピーしてHTML内に貼り付けます

     

    トップページに張り付けた場合 テキストは反映はトップページのみです

     

    CSS指定してありますので下層ページでは 単にフッター縦サイズが
    大きくなっただけでテキストは未記載状態ですので追加しておきましょう

     

    カテゴリー エントリーページともに 異なるテキストで表示は可能です

     

     

     

    <div id="footlink"><% footerMenu %><% PRLink %><% sitemapPageLink %></div>
    <% topMenu %>

     

    <div id="footer">Copyright (C) <% thisYear %> <a href="<% pageDepth %>"><% siteTitle %></a> All Rights Reserved.<% accessAnalyzer %>
    </a>
    <div></div> 
    <div>運営者情報 東日本日本村運営者情報 東日本日本村運営者情報 東日本日本村</div> 
    <div>運営者情報 東日本日本村運営者情報 東日本日本村運営者情報 東日本日本村</div> 
    <div><img src="<% pageDepth %>img/1aaaaaaaaaaaa.png" style="width:200px;" alt="" /> </div>     
    <div>しりうすテキストしりうすテキストしりうすテキスト</div>     

     

    </div>

     

     

    必ず
    </div>要素の中に収めてください 外で記載した場合
    フッターの下方に表示されてしまいます

     


     

    <div></div> の記述は デフォルトの表示のテキストタイトルと
    追加テキストがかぶらないよう置いております

     

    テキストが縦に収まらない場合は
    height: 280px; の数値を大きくすると縦サイズが変調されます

     

     


     

    縦2列 2カラムにしてみた例

     

     

     

     

    シリウス機能 レイアウト枠を使いました
    35対65の比率での例ですが50.50でも 好みに合わせてみてください

     

    画像やテキストは行ごとに</div>で囲います

     

     

     

    <div id="footer">Copyright (C) <% thisYear %> <a href="<% pageDepth %>"><% siteTitle %></a> All Rights Reserved.<% accessAnalyzer %>
    </a>

     

    ここから 追加行例
    <div ></div>
    <div class="layout_l" style="width:29.375%;padding:5px;">
    <!-- ★▽左列ここから▽★ -->
    <div >運営者情報シリウスコンテンツ</div>

     

    <div ><img src="<% pageDepth %>img/051.jpg" style="width:100px;" alt="" /></div>
    <!-- ★△左列ここまで△★ -->
    </div>
    <div class="layout_r" style="width:59.375%;padding:5px;">

     

    <!-- ★▽右列ここから▽★ -->
    <div >sieiusutekisutoシリウスコンテンツ</div>

     

    <div >siriusutekisutoシリウスコンテンツ</div>

     

    <div >シリウスコンテンツシリウスコンテンツ</div>
    <div >siriusutekisutoシリウスコンテンツ</div>
    <!-- ★△右列ここまで△★ -->
    </div>
    <br clear="all" />
    ここまでが追加行
    </div>

     

     


     

    デフォルトのフッターリンクを 最下部に配置する手順

     

    上記例では デフォルトのフッターリンクの下にテキストを追加しましたけど
    フッターリンクを最下部に配置する場合の記述例です

     

    参照画像

     

    配置する場所を入れ替えただけですのですぐにできるかと?

     

    <div id="footer">

     

    ここから
    <div class="layout_l" style="width:29.375%;padding:5px;">
    <!-- ★▽左列ここから▽★ -->
    <div >運営者情報シリウスコンテンツ</div>

     

    <div ><img src="<% pageDepth %>img/051.jpg" style="width:100px;" alt="" /></div>
    <!-- ★△左列ここまで△★ -->
    </div>
    <div class="layout_r" style="width:59.375%;padding:5px;">

     

    <!-- ★▽右列ここから▽★ -->
    <div >sieiusutekisutoシリウスコンテンツ</div>

     

    <div >siriusutekisutoシリウスコンテンツ</div>

     

    <div >シリウスコンテンツシリウスコンテンツ</div>
    <div >siriusutekisutoシリウスコンテンツ</div>
    <!-- ★△右列ここまで△★ -->
    </div>
    <br clear="all" />
    ここまでです

     

    Copyright (C) <% thisYear %> <a href="<% pageDepth %>"><% siteTitle %></a> All Rights Reserved.<% accessAnalyzer %>
    </a>
    <div ></div>

     

    </div>

     

     

     

     

     

    レイアウト枠を利用しましたがテーブルでも可能かと思われます

     

    テーブルを使う場合は 上下の枠をどちらか削除してください

     

    何度も言いますが テキストが下へはみ出ましたら 構成を
    枠内に入るよう変更するか 縦数値を拡大してください

     

    フッターにあまりテキストリンクを含めますと サイト内と合わせ同リンクが
    増えすぎてしまうと 検索エンジンから嫌われます

     

    適度に配置して下さい

     

     

    スポンサーリンク

     

     

    シリウスフッター縦サイズ変更とキャッチテキストカスタマイズ
    フッターカスタマイズ|シリウステンプレートカスタマイズ
    シリウスカスタマイズトップ

    シリウスフッター縦サイズ変更とキャッチテキストカスタマイズ関連解説
    フッターのタイトルリンクを変える方法
    シリウスサイトののフッターにはタイトルリンクがございますが タイトル表示とリンク先を変えることが出来ます 解説はサイトで
    フッターリンクやサイトマップを追加する方法
    シリウスサイトのフッターにサイトマップや外部テキストリンク 内部テキストリンクを複数追加設置する方法の解説です トリンクを追加する方法 | シリウスSIRIUSカスタマイズ

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト