2015　0216　　2017　0703更新
シリウス背景を全てスライド化する...そして文字認識への対応

 

当コンテンツは親ページ
背景画像のスライドショー　自動ループ　フェードイン設定方法の　
延長となります...
シリウスサイト背景のカスタム例と背景を画像にする工程と次なる障害..
カスタマイズ以降...文字の見ずらさへの解消例を解説いたします..

 

デフォルトテンプレートでの解説で進めますね

 

ビジネステンプレートでは仕組みが違いますので解説は後程
追記いたします...少々お待ちください

 

---

 

親ページコンテンツでのサイト背景をスライド画像にしても
デフォルトのサイト構成では記事背景はそのままですが如何なものでしょう
両サイドのみ画像が表示されるだけですね

 

せっかくのカスタマイズなのですからもう少し視野を広げてみましょうね

 

でも、これでよいという方はそれなりに.........

 

デフォルトでの背景をスライド化例です（記事背景はそのまま）

 

記事背景を消してみる

 

記事背景を構成している台紙はテンプレートフォルダにある画像ですので
削除してしまうと障害？がなくなるので背景画像がすべて見えるように
なります

 

 

該当のテンプレートフォルダからｉｎｇファイルを開いて

 

以下のメニュー背景画像

 

記事背景画像

上記3画像を削除します

 

画像ファイル削除は該当ファイルのみでの影響となります
カスタムを実行するなら事前に該当テンプレートをエクスポートして
新たなテンプレート名でフォルダを作り、そのテンプレートを選択してから
進められれば基本テンプレートはデフォルトのまま残ります

 

他テンプレートには影響しません

 

 

もう一つの方法

 

記事背景はスタイルシート指定でも表示させないことは出来ます

 

背景を削除するには記述を消してしまうか、または記事背景を非表示
または透明化とすることもできます

 

以下が記事背景を読み込み指定していますが、読み込むコードを
削除すると記事背景も消えます
background-image: url(./img/cnt_bg.png)

 

記述の位置を残したまま記事背景を透明とする場合は
以下記述に書き換えてください

 

background-transparent

 

 

スタイルシート

 

/* 基本レイアウト */

 

#container {
width: 900px;
_width: 910px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);ここです
background-repeat: repeat-y;
}
#header {
height: ;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: auto;
border-bottom:solid 1px #EBEBEB;
}

 

記事背景だけ削除してもメニュー背景は残りますので
メニュー背景モスタイルシートで記述をさあ駆除するか
もしくは透明化します

 

また、display: none;で表示しないを指定することも...

 

---

 

文字を見やすくする

 

 

参考画像は3カラムです
（例）記事背景は白文字を見やすくするため黒で編集しています

 

こちらは未編集画像ですが白文字ですと認識しずらい箇所もあります

 

スライド化する場合はすべての画像で文字が認識しやすいということに
最新の注意を払うことになります

 

 

---

 

背景フィルター採用で文字を見やすくする

 

通常は背景を画像化しますと色付けされるのでデフォルトの黒文字では
見ずらくなりますね

 

そんな場合は白文字とか、背景色に混ざらない文字色に
替えなければなりませんが

 

どうしても表示させたい背景画像が文字色と混ざり
認識しにくい場合は半透明なフィルター背景の枠　ボックスを
コンテンツ内に配置すれば文字が認識しやすくなります

 

---

背景に合わせて文字カラーを変更するには
スタイルシート開いて

赤印　のカラーコードを書き換えます
画像は当サイトのもので設定は白です

---

 

 

ではフィルターを枠についての説明に入ります

 

半透明枠を使用することにより　若干記事背景が濃くなり
文字が見えやすくなるということです

 

 

 

デフォルトでは半透明になりませんが
rgba(0, 0, 0, 0.4)コードを一部入れ替えれば反映されます

 

 

<div style="border:solid 1px #006699;background-color:#DFF4FF;color:#00344D;font-size:13px;padding:10px;">
デフォルトコード
</div>

 

 

<div style="border:solid 2px #FF0A0A;background: rgba(0, 0, 0, 0.4);;color:#FFFFFF;font-size:15px;padding:10px;">
ブラックフィルターコード
</div>

 

---

 

 

当サイトによくよせられるカスタム質問の

 

半透明ホワイト背景枠をご案内します

 

文字カラーは　当サイトは白ですので適応されていますが
シリウス機能でカラー変更は可能です

 

 

画像ではありません　透明度の具合はスクロールしてご覧ください

 

上記例は　rgba値カラーコードを利用し背景を半透明化指定して
表示させております

 

設定例はこちらでご確認ください
reba値カラーコード半透明化指定方法

 

---

 

その他あれこれ

 

 

ヘッダー画像を見えなくしてしまう方法もございますして
その際は画像全体が見えることになります

 

ＨＴＭＬテンプレート内で　
ヘッダー記述を削除すればできないこともないのですが
ヘッダーのスペースが事態が消滅してしまうので　へんなサイト構成？
になってしまい余り良い方法とも思えません

 

ですが
スタイルシートでヘッダー画像を透明化すれば　ヘッダースペースは
残したままのサイト構成ができます

 

こんな感じになります
参考画像

 

方法およびイメージはこちらでご確認ください
ヘッダーが消えた？いや透明ヘッダー画像です

 

シリウスで標準で表示されるページメニューも　海外サイトみたくするなら
表示させないで　フリースペースで枠なしを設定で表示させたほうが
良いかもしれません

 

こちらで解説してます
ページメニューを消してみるとブログみたい　2カラムの場合
3カラムのページメニューを消してみると　さらにハイクラス

 

 

 

以上ですが
気が付くことありましたら追記いたします

 

スポンサーリンク

 

 

サイト背景をスライド化にした場合のカスタム例
背景画像のスライドショー　自動ループ　フェードイン設定方法
シリウスカスタマイズ