TOP

トップHTMLからエントリーHTMLまで

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

 

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

 

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

 

 

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

 

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

 

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


 

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

 

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

 

 

動的ヘッダーテキスト

 

 

 

当ページは、主な仕様と注意点を掲載しておりますので、戻り確認してください...

 

 

 

 


 

レイアウト

 

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

 

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

 

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

 

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

 

 

 

ハンバーガーナビ

 

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

 

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

 

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

 

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

 


 

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

 

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

 

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

 


 

ヘッダー画像

 

ヘッダー画像は、シリウス機能で読み込ませますが、デフォルトでは小さすぎますので
パソコン幅いっぱいの大きなサイズで設定してください...

 

縦幅ありすぎでも、指定枠以上は隠れます..調整は可..

 

表示される範囲が決まっているので、画像の上部分を切り取る必要もあります..

 

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

更新履歴

2018/05/16 21:51:16 | 当サイトレイアウト3カラムバージョンソース..公開
当サイト配布テンプレートのヘッダーテキストは、h1標準となっておりますが、個々事情によりシリウスの全体設定で指定するヘッダーテキストも表示は可能です..改行はHTMLで....上基本 h1以下参照<div id="top&q...
2018/05/15 23:19:15 | 当サイトレイアウト3カラムバージョンソース..公開
シリウスの改変テンプレートで、ヘッダーテキストに動きを付け加えられないかとの質問が、寄せられましての記事追加...ボランティアで配布しているDEMO用サイトに、一部ヘッダータイトルが動くものがございます..しかし、当サイトの配布テンプレート...
2018/05/09 02:19:09 | 当サイトレイアウト3カラムバージョンソース..公開
HTMLTPソースをトップ、カテゴリー、エントリーと分けていますので、各記載をコピーして張り替えてください..張り替えが終わりましたら、保存をしてスタイルシート張り替えに進んでください。スタイルシート記述..その2へ進んでください...最終...
2018/05/06 02:16:06 | 当サイトレイアウト3カラムバージョンソース..公開
スタイルシートの記述で、スタイルシートすべてを張り替えてください..張り替え後...トップページのみの3カラム目のメニュー表示は別に指示する必要がございますので終わりましたら最終説明を御覧ください...3カラムの設定では、まいりましょうか....
2018/05/06 01:44:06 | 当サイトレイアウト3カラムバージョンソース..公開
3カラムのメニューは、記事の右横に表示されます..informationのボックスは、HTML内においており、読み込みはスタイルシートで指示していますが、表示するための記述置き場は、フリースぺースにおいてございます。ご注意当サイトは一番下に...