当サイトは、トップページのみ3カラム、下層のカテゴリー、エントリーは2カラムで今時流れに
あっていると自己解釈で進めておりますが、こちらのTPソースも..教えんかい...と要望ござい
まして..説明するのも面倒なのでソース公開することになりました。

 

HTMLからスタイルシートまでソースを張り替えれば、ヘッダー画像をいれこんで、テキスト
リンクなど書き足せばすぐにご利用いただけると理解しますが、私の勝手なシリウスの
レスポンシブテンプレートカスタマイズなので、シリウス本家のサポートでは理解できない
意味違いもありますので、参照例を以下にまとめ置きます...

 

それでも不明は,、当サポートで対応しております...

 

 

HTML、スタイルシートは二つのページ分けて記載..

 

最後に最終解説を実行して完了...その1から3まで...

 

トップTP3カラム組み込み済みHTMLソース..その1
3カラム特異指定..スタイルシート記述..その2
3カラムの設定..その3
最新...動的ヘッダーテキストの追加方法
ヘッダーH1、タイトルテキスト入れ替えとフォントカラー変更

---

 

○未導入.....○
当サイトには導入済みでも、もしくは他の読者様の要望により付け加えたものとか..
個々の好みにより、必要、不要あると理解し、テンプレートに未導入のスクリプトもございます..
以下.....

 

見出しにシャドウで３D
各見出しに立体感の視覚効果を表わすシャドウ...(当サイトの見出し見て...）
導入は簡単ですので、付け加えたい方は、以下ページの解説を御覧ください...
見出しh2,h3,h4やボーダーにシャドウ付けて立体感を表現

 

 

---

 

レイアウト

 

レイアウト確認は、当サイトのトップページ、カテゴリー　エントリーページまでを
参照ください..

 

ナビ
シリウス機能のグローバルナビは一切使用できません
プルダウンメニューは自由に追加できます..
（スマホ対応もです）

 

手動での書き換えで表示されます..

 

タイトルテキスト...ページか外部へのテキストリンクも手動...

 

 

 

ハンバーガーナビ

 

横からスライドするスタイルで、手動追記..

 

画面を狭めてスマートフォン表示の際のレイアウト..ハンバーガーメニューの作動も合わせ
ご確認ください...
ハンバーガーメニューはシリウス機能ではないのでテキストメニューは手動記載となります..

 

要所（自己導入）するところは、記載ありですのでそこだけ書き換える、画像を入れるで
対応願います...

 

質問の多いことですが、ナビゲーションはプレビューでは2段表示..パソコンのスクリプトを
許可するか、アップ以降でなければ当サイトみたく作動しません...

 

 

 

トップに戻るスクロールボタン

 

シリウスプレビューでポチでは、瞬間移動で上に移動...スクリプト動かない

 

アップ以降は、なめらかスクロールと変化します

 

 

 

ヘッダー画像

 

ヘッダー画像は、シリウス機能で読み込み不能？

 

当構造は、PCより閲覧の際見た目ヘッダーと理解できるのは、背景画像なんですね..
ですので、ヘッダーに見えるようサイトオプションで背景画像を入れてください..

 

で、スマートフォンではというとここで表示されるのは別画像を設定してください...
シリウスの全体設定でヘッダーを設定しても反映されません..

 

HTMLソースのheaderコード下のヘッダー画像コードで読み込ませますので、背景と
同じコード、もしくは異なるなら表示させたい画像コードを記載してください..

 

次にシリウスのサイトオプションでレスポンシブ設定へ進んで..ページタイトルの表示？
表示設定にしないとスマートフォンは画像が上に狭まり...いいものが見えない？

 

ヘッダー画像の表示は、するに設定ください...

 

 

スマートフォン表示ついて..
PC画面からスマホ画面に移行する際、表示されるヘッダー画像です..
画面が狭まる閲覧では、上で設定した...HTML記載のヘッダー用画像サイズは以下で
作成してください..
現状ですが、他のサイズですとずれが見える可能性があるので？

 

横　９７９PX　縦　385PX　
大きすぎるようですが、自動で縮小されます...

 

 

 

あとがきで申し訳ありませんが画像のサイズは、PCで画面表示される範囲が決まっているので、
好みを選んだとしても画像の上部分を切り取る必要があります..

 

一度入れて確認し、修正が必要であればの加工...?

 

1920PX...サイズでちょうどよいかな？
..以下サイト内..pexelsにあるね...
https://www.affiliateno1.com/フォトサイト/画像配布サイトまとめ_海外版.html

 

 

 

テンプレートカラー

 

TPカラーは、スタイルシートのカラーコード変更で変えられます..自己理解してくださいね..

 

重要
当TPは、デフォルトからカスタマイズを少しずつ施しながら...弄り回しているでしょうね

 

で、さらにclass指定によってトップページだけ3カラムに設定しているわけなんですけど
すべての項目を指定しているわけではないのです..

 

トップHTMLをご覧いただけばわかることなんですけど..body3 のように3カラム対応で
読み込ませる必要な箇所だけ..3の付随が確認できるかと...それがclass指定...

 

スタイルシートでは、上半分が2カラム指示..下半分が3カラム指示なのですけれど
CSSをご覧いただくと　3 の指示が付随していない箇所が確認できると思います..

 

3カラムのCSS内にあって、3の付随が無いものは2カラムと同じカラー...形で表示される
のですが、実際はしたコードが読み込まれているんですね

 

読み込みに同じコード、もしくは同じコードで色違いを指定したとしても、読み込まれるのは
下..広範囲あるコードなのです...

 

ですので、見出しなどのカラーを変更する際は、新たにclass指定を加えないのなら
下コードで変更してください..
（上CSSを書き換えてもカラー変更されない）

 

当サイトは単一カラー、シリウスのデフォルトではなくややピンクにオレンジ交じり...

 

各所ランダムカラーにもできるんですが、それで、いいじゃんとしているので...

 

各要素にclass指定を加えるなら、トップサイトと下層では色違いも...見出しもランダムに
演出可能です..

 

 

 

念のため
class指定を加えるとは..HTMLソース記載に
例　layoutbox3..のように3を追加する
スタイルシートでは、.layout_tatey3として、同じコードで読み込ませる...
シリウスサイト..トップTP　下層TPで別なスタイルを表すため..それがclass指定...

 

......すみませんが、class指定について以前記事に書いたような記憶があるような？
どこかな?

 

説明が......今日はこれ以上......頭痛くて書けません

 

もし、理解できなければどこかでネタ探してください...

 

後ほど追記いたしますが、ボケ忘れることもございますので、不明や混乱してしまいましたら
サポートよりお問い合わせください...

 

 

 

当サイトレイアウト3カラムバージョンソース..公開
トップTP3カラム組み込み済みHTMLソース..その1
3カラム特異指定..スタイルシート記述..その2
3カラムの設定..その3