サイトマップ
ヘッダー下にフリースペース設置方法
お問い合わせ
こんばんは
いつもシリウスのカスタマイズ時にはサイトを拝見させて頂いております
サイト内容も分かりやすくて助かっています
これからも勝手ながら参考にさせていただきます
今回メールを送ったのは、シリウスのカスタマイズで可能であれば
ご教授頂きたいと思いメールを送らせていただきました
chori様よりのご連絡です
質問内容は
シリウスには専用のフリースペースがありますが
それ以外にヘッダーと記事の間にサイトの横幅と同じ大きさの
（１カラムみたいな）フリースペースを設置したい
よくHブログで見かけるんですが
上から順にヘッダー→サイト幅と同じ（１カラムみたいな）
フリースペース→２カラムや３カラムのテンプレート→フッター
イメージ的にはこんな感じです
テンプレートはデフォルトの３カラムで試行錯誤しておりました
お忙しいところ申し訳ございませんが ご教授いただけましたら幸いです
よろしくお願い致します
スポンサーリンク
お便りありがとうございます
久しぶりに大変難易な質問でどうしようかと思いましたが
なぜか瞬時に対応できました？
まずはスタイルシート
ここでpadding-top: 20px;を数値を大きくすると記事カラムは
メニューとも下へ移動し スペースが空くのですがフリースペースを
記事カラム上部にサイト幅と同じく表示する事が出来ませんでした
#contents {
_height:13px;
padding-top: 20px;
padding-bottom: 20px;
min-height:400px;
margin-top:50px;
background-image: url(./img/contents_bg_left.jpg);
background-repeat: repeat-y;
background-position: left;
margin-top:<% topMenuMargin(47,0) %>;
}
そこでです
質問内容を精査しますと グローバルメニューと書いてませんぜ
ということで
グローバルメニューのスペースにフリースペースを置く手配へ
しかし 通常道理の手順では
HTMLテンプレート内のグローバルメニューの位置にフリースペース記載を
入れ込んでも反応しません
div要素で囲んでも反応なし
ここで一時間一時間つぶしました
そこで思いついた記述があるので 入れ込んでみましたら
すぐにできました
最初から思い出せるような頭ならいいんですけどね？
では 実行例です
ヘッダー下に 記事カラムの上にフリースペースをサイト幅同様のサイズで
表示させる手順です
今回はグローバルメニューという記載がありませんでしたので
その位置にフリースペースを配置するという手順で進めます
一つ目
シリウス機能ではグローバルメニューを表示するメニューの編集が
有りますね
そこで 一ページだけでよいので メニュー指定してください
グローバルメニューとして表示させる指定です
実際には表示させませんが スペースを空けるため
指定する必要があるのです
二つ目
HTMLテンプレートを開きます
HTMLテンプレート内には フリースペースを表示するための関数があります
<% freeSpace1 %> 関数です
以下の箇所
<!-- ★メインコンテンツここから★ -->
<div id="contents">
<div id="main">
<% freeSpace1 %>
<% if:siteMode(normal) %>
<!-- ★▽通常モードここから▽★ -->
その<% freeSpace1 %> 関数を切り取り
以下の記述に書き込んでください
<% freeSpace2 %>でも使えます
書き込んであります
コピペで使えます
<ul><% freeSpace1 %></ul>
上記記述を 以下の箇所へ貼り付けます
<!-- ★ヘッダーここまで★ -->の下ですよ
記載例
<body>
<div id="container">
<!-- ★ヘッダーここから★ -->
<% pageTopic %>
<div id="header">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>
<!-- ★ヘッダーここまで★ -->
<ul><% freeSpace1 %></ul>
ここまで
<!-- ★メインコンテンツここから★ -->
<div id="contents">
<div id="threebox">
<div id="main">
トップページのみの表示ならそこまで
でも すべてのページで表示する場合はカテゴリーからリンク集まで
すべて同作業してください
３つ目
スタイルシートを開きます
/* グローバルメニュー */
#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 900px;
position: absolute;
<% topMenuPlace(0) %>
margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
}
position: absolute;の記述は 絶対位置固定 不動を意味します
この記述があるとグローバㇽメニューが消えてくれないので
以下記載に書き換えてください
position: relative;
以上で終了です
後は フリースペースの メインカラム上段で記事を書けば反映は確認できます
その他 ご注意事含む
<% freeSpace1 %>をdiv要素で囲むと記事が左サイドに行き過ぎて
見ずらくなるので ul要素にしました
フリースペースの設定の際 サイト幅で編集するのですから
サイト全体をカスタマイズするならそれでOKですが
下層は通常レイアウトの場合は 記事列が乱れますので
全体表示は避けて トップページのみに指定してください
フリースペースの背景指定はデフォルトかスタイルなし
その他ですと 良いレイアウトではないみたいです
改行する
左揃え
が良いかと思われます
画像も入ります
記事を追加すれば 縦サイズは自動で拡張されます
ただし なぜか左位置が少しスペースが空きます
左寄せする場合は スタイルシートで指定してください
ヘッダーと記事カラムの中間にサイト幅サイズフリースペースを設置
シリウスカスタマイズサポートフォーラム一覧
シリウスカスタマイズサポートフォーラム
シリウスカスタマイズ
- シリウスでブログみたいなカスタマイズが可能なテンプレートは？
- シリウスで他サービスでみられるようなブログレイアウトを作れるのか？可能であればいずれのテンプレートが適しているのか？
- サーバー内のサイトファイル削除
- シリウスで作成したサイトが不要になった際、サイトを管理画面で削除したが ファイルがサーバーに残ったままだとネット上には浮遊し続けますね ここで問題 サイトファイルを管理画面で先に削除した場合
- フェイスブックを二つ運営しているときの分離投稿？
- フェイスブックを二つ運営しているが、シリウスに取り付けたボタンで投稿すると一つにだけしか反映されない...二つを分離、分けて投稿できないか？ という質問です....
- 外部依頼のシリウスTPソースSEO最適化？まれにめぐり合う障害
- シリウスを所持しないSEO業者へサイトのSEO最適化を依頼した場合の不具合？まれにめぐり合う事情..の方からお問合せございまして記事追加...
- シリウスデータの記事ファイルを更新したら記事が消えた？
- シリウスのデータファイルを開いて記事を更新したら、其の後生成からアップしてページ確認するとすべてが消えていた？..との障害発生...解決策はサポート記事を御覧ください。
- WPみたいなメニュー表示とファイル構成についての質問
- WPのアーカイブみたいな表示をシリウスに適用できるか？トップURLの次はファイル名で、カテゴリーフォルダ名は表さない.....難易な質問ですね？
- 複合レイアウト、メニュー背景を削除したい？
- 3カラム、2カラムの複合個別レイアウト表示設定にしたが、メニューのグレー背景が邪魔なので削除したい...という質問です
- エントリーからカテゴリへ階層異動でいいね登録数は消える
- シリウスのページ階層、エントリーにいいねボタンを 置いているが、カテゴリーに上げたい、しかしファイル名が変わるといいね..指示数がリセットされてしまう...対応策はないのか?...ご返事はサポートフォーラムで..
- iPhone設定、スマホで指定したTPカラーが反映されない
- シリウスビジネステンプレートでiPhone設定しているのですが、スマートフォン表示で指定したカラーが反映されない?....お答えはカスタマイズサポートで...
- インタースティシャル広告の位置合わせができない
- シリウスにインタースティシャル広告を取り付けたが、位置が合わずうまく表示されないという質問です
- 1カラムのサイト幅変更に伴う見出し幅の調整についての質問
- シリウスデフォルト1カラムのサイト幅を縮小したのですが、h2、h3、h4の各見出しの幅はすべて異なっています。調整できるのでしょうか？という質問です ね。お答えはサポートフォーラムでご覧ください..
- モバイルグーグル検索(ＡＭＰ)の高速表示システムは導入できるか？
- シリウスサイトをモバイルページ対応にする?グーグル検索で高速表示させる(ＡＭＰ)は導入は可能ですか？...という質問です。ご返事はサポートフォーラムでご覧ください.......
