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

 

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

 

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

 

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

 

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

 

そうですね

 

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

 

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

 

解説は簡単カスタマイズと　やや手間必要カスタマイズの
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;が縦サイズを指定してますので
書き換えれば完了しますが

 

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

 

 

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

 

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

 

---

 

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

 

ＨＴＭＬテンプレート内でのテキスト追加

 

 

 

以下の箇所です
<!-- ★フッターここから★ -->
<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;
}

 

 

 

 

 

ｈｔｍｌテンプレート内の記述例

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

 

<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対６５の比率での例ですが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>

 

 

 

 

 

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

 

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

 

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

 

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

 

適度に配置して下さい

 

 

スポンサーリンク

 

 

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