エントリーページ一カラムをブログスタイルへカスタマイズ

 

シリウスエントリページなら上級者設定で個別に一カラム指定ができます

 

更に背景画像も指定すればページごとに変えられるのです

 

更に　フォントサイズ　フォントカラーも個別指定

 

さらにさらに

 

ヘッダー画像の縦サイズもCSS指定で変更可能

 

各ページごとに背景を個別に変更可能

 

ただし　背景は画像が大きく余りに多くの画像をいれた場合
容量が耐えられるかが　いささか心配？

 

 

となれば一つのサイトでいくつものイメージが打ち出せるわけです

 

 

いろんなスタイルのブログサービスやテンプレートは沢山ございます

 

それらを利用することは否定しません

 

ただ　全然タイトル違いのブログつくってもコンテンツが混同してしまうことあるでしょう

 

別なブログやサイトで同じようなコンテンツですと、どちらかは意味を持たない
ただのサイトにもなりかねません

 

出来る限りは、グーグルさん対応のことを踏まえれば

 

一つのコンテンツは一つのサイトでまとめあげたほうが良い結果へと向かうでしょう　

 

ま、ＳＥＯの講釈をするほどのレベルにおりませんのでここで云々は終了します

 

 

---

 

 

全体を画像背景にセットする際の条件

 

 

今回のカスタマイズは、サイトスタイルがシリウスデフォルトの画像ファイルから
読み込まれる背景白台紙

 

記事背景ですね

 

その記事背景を表示させていない、背景を画像か単色に指定している構成

 

であれば、容易にカスタマイズができます

 

 

 

デフォルトテンプレートであれば　記事台紙をテンプレートフォルダで削除
もしくはスタイルシートで非表示設定にCSS指定にするか、どちらかで対応します

 

 

ビジネステンプレートの場合は、スタイルシートから非表示指定にします

 

 

基本レイアウトはカスタマイズせずデフォルトでそのまま使用していたい.....
という場合は、エントリーページでスタイルの割り込みからCSS指定します

 

---

 

ブログスタイルセッティングへ進みます

 

 

背景は　大きな画像を使いますのでテスクチャ画像をお使いになられてください

 

テスクチャ画像は以下ページでご案内してます
背景用テクスチャ画像フリー配布サイトまとめ
もしくは自己製作してください

 

画像をダウンロードしましたら　解答して画像ファイルをしまうところに
保存して　パソコン画面よりやや大きめにサイズ調整をしましょう

 

画像をシリウス内で使うには管理画面に記憶させる必要があります

 

記事内で画像の呼び出し

 

新規選択でパソコン内に移動して画像を読み込みます

 

一度記事欄に画像コードが表示されたら　管理画面内に記憶完了です

 

画像コードですね

 

<img src="<% pageDepth %>img/1a777.png" alt="" />
使うのは　例コード　img/1a777.pngだけです

 

 

では　次にエントリ―ページ設定画面に移動します

 

ここで一カラムを指定してください

 

エントリーページであれば3カラムでも反映されます　念のため

 

1カラムの場合　サイト巻末にメニューが表示されますが
選択は表示するしないは自己判断してください

 

 

次に上級者設定を開きます

 

 

その前に指定手順はサイトの状態により二つございます

 

シリウス機能でアイフォン設定で運営している場合と　
レスポンシブ構造にしている場合とでは　css追記が異なります

 

 

非レスポンシブ構造　アイフォン設定で運営している場合は　スタイルシートの
以下記述をコピーして上級者設定のスタイルシート割り込み窓に
画像コードのみを書き換え追加すれば終了します

 

書き換えるだけで終了します

 

以下記述を使います
/* 基本スタイル */

 

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #333333;
font-size: 0.9em;
line-height: 140%;
background-color: #F5F5F5;
　　　　background-image: url(画像コード) ;
<% backgroundDisplay %>
<% backgroundColor %>
　　　　<% bodyFontSize %>

 

}

 

 

---

 

 

 

レスポンシブデザイン構造で背景を画像指定にする

 

 

原本
こちらは原本ですが　大幅な書き換えとなりますのでコピーしてお使いください

 

 

 

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #333333;
font-size: 0.9em;
line-height: 140%;
background-color: #F5F5F5;
　　　　background-image: url(画像コード) ;
<% backgroundDisplay %>
<% backgroundColor %>
　　　　<% bodyFontSize %>

 

}

 

 

 

 

レスポンシブ記述を加えて構成　使用する書き換え記述は以下

 

背景のスクロールをしない　固定化する記述を追加しております
background-attachment:fixed

 

 

ここから

 

@media screen and (min-width: 769px) and (max-width: 2499px) {
body {

 

margin: 0px;
padding: 0px;
text-align: center;
color: #ＦＦＦＦＦＦ;
font-size: 16px;
line-height: 140%;
background-color: #F5F5F5;

 

<% backgroundDisplay %>
<% backgroundColor %>
　　　background-attachment:fixed
　　　width:100%;
　　　height: 100%;

 

}

 

.background {

 

width:auto;
height: 100%;
z-index: -18;
background: url(画像コード); 書き換え箇所
background-repeat: no-repeat;
background-position: center center;
position: fixed;
overflow:hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size:cover;
}
}

 

ここまでを貼り付けてください

 

 

---

 

ここまでで背景がオール画像と変更されました

 

 

しかし　ヘッダー画像が残っていますね

 

ヘッダー画像を表示させておく
それでよい方はそのままで

 

 

ヘッダーも消して　全体的な画像としたい方は次へ

 

こちらもスタイルシートの割り込みに追加する記述です

 

 

ここでの説明がやや面倒

 

ヘッダーを非表示とするのは

 

background-image: url(img/header.jpg);の記述を変更すれば

 

以下のようにです　画像コードを削除すると
background-image: url();
完了します

 

 

 

 

ヘッダーのスペースはそのままで　非表示とするなら
以下記述を追記します

 

スタイルシートにある原本より　
#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: auto;
border-bottom:solid 1px #EBEBEB;
}

 

 

 

 

書き換えコード

 

#header {
height: <% headerHeight %>;
background-image: url();　
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: auto;
border-bottom:solid 1px #0ACCFF;
}

 

 

 

 

ヘッダーのスペースを削除し　グローバルメニューを最上部に
する際は　非表示コードdisplay: none;を付け加えます

 

 

追加例

 

#header {
height: <% headerHeight %>;
background-image: url();　
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: auto;
　　　display: none;
border-bottom:solid 1px #0ACCFF;
}

 

 

 

---

 

参考カスタマイズ

 

ヘッダーを非表示した場合　グローバルメニューと最上部のスペースを
好みに合わせ調整ができます

 

#header {
height: <% headerHeight %>;

 

上記際の <% headerHeight %>;;を 90px;とかに数値サイズに変えれば
調整ができます

 

当ページは 90px;にしてます

 

 

基本レイアウトがデフォルト設定の場対応合の

 

 

基本レイアウトはデフォルトのまま、指定のエントリーページのみ
記事背景を非表示とする手順

 

 

デフォルトテンプレートの場合

 

#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;
}

 

ここまで

 

 

以下記述を削除してください
background-image: url(./img/cnt_bg.png);

 

もしくは、以下に書き換えても同じ結果になります
background-image: url();

 

 

ビジネステンプレートの場合は、変更箇所が異なるので以下ページを参照ください
シリウス記事背景を透明化するカラーコード？

 

書き換えましたら　スタイルの割り込み窓に追加します

 

---

 

文字が認識ずらい背景もございますね

 

その際は背景枠を使用してください

 

当ページで使用の記事上で使用している透過する背景枠です

 

 

コピーコード
<div style="border:solid 1px #0ACCFF;background: rgba(0, 0, 0, 0.4);;colo; padding:10px; border:1px solid #0ACCFF; border-radius:6px;">

 

</div>

 

 

 

 

 

 

エントリーページ一カラムをブログスタイルへカスタマイズ
シリウスカスタマイズ