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


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


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

    最初に申し訳ございません
    ここでの解説は検証もしており少し前までは当ページでの反映が確認
    できていたのです
    スタイルシートいじりすぎてか、このページだけノンプレいとなっています
    しかし、他サイトでは反映は確認しておりますので、説明に間違いはないと
    ご判断ください

     


     

    サイトリニューアル?

     

    ではありません

     

    シリウスのエントリーページの背景変更でカスタマイズ

     

    こんなページが一つのサイト内で いくつもの背景画像でフォントカラーも
    個別に指定して作れます

     

    現在のサイト構成と異なるレイアウトでのサイトの作りたい

     

    ブログみたいなサイトも作りたい

     

    でも、今のサイトも捨てがたい

     

    ま その他各事情はあると思いますが 別なサイト作っても関連するものなら
    ばらさずとも一つに集約しておけば検索エンジンより重厚コンテンツとして評価されるもの

     

    ブログ趣向のイメージも打ち出したいなら、別なサイト何ぞ手間暇かけて作らずとも

     

    自分サイトのボリュームを増大したほうが、検索上なら実績ありで良いかもしれません

     

    お堅いサイトでも 管理人ページへ移動すとナイスなサイトとか?

     

    オウンドメディアサイトかな?
    オウンドメディアサイト構成にする際は、ブログ要素のコンテンツは関連する方向で進めてください

     

    基本ページレイアウトが、一カラム 2カラムであっても、当サイトでご案内している
    レスポンシブ化構造を導入している際は、そのまま作動が反映されます

     

    一つのサイトで 異なるイメージを打ち出すためのご案内です

     

     

    今回はエントリーページ対応ののブログ化デザインカスタマイズです

     


     

    スポンサーリンク

     

     

     

     

     

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

     

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

     

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

     

    さらにさらに

     

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

     

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

     

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

     

     

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

     

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

     


     

     

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

     

     

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

     

    記事背景ですね

     

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

     

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

     

     

     

    デフォルトテンプレートであれば 記事台紙をテンプレートフォルダで削除
    もしくはスタイルシートで非表示設定に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: #FFFFFF;
    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>

     

     

     

     

     

    編集後記 

     

    当初このページの背景は ウェブ上で確認されていたのですが
    サイトにレスポンシブデザインコードを導入したころより

     

    プレビューでは確認できるが ウェブ上では背景が確認できないという
    状況に至っておりました

     

    気が付かず大変失礼いたしました

     

    そのためレスポンシブデザインに合わせて更新いたしております

     

     

     

     

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

    エントリーページ一カラムをブログスタイルへカスタマイズ関連解説
    一カラムのレスポンシブレイアウトはスマホ用のダブルページを追加
    SIRIUS シリウスの一カラムの場合 PCレイアウト記事列はスマホでは 画面縮小に従い途中折れしますが ページ内にもう一つスマホ用構成のページを いれとけば対処可能です カスタマイズ詳細はサイトで....
    トップページのみ異なる背景でブログスタイルへカスタマイズ
    SIRIUS シリウスのデフォルトでは 背景画像はすべて同じ画像が表示されますが CSS指定により切り替えすることで異なる表示が可能です カスタマイズ詳細はサイトで....
    トップページのみ背景画像を切り替える 1カラム背景画像設定済み例
    SIRIUS シリウスサイトでサイトすべての背景を画像で設定済みとしている場合でトップページのみ背景画像を異なる指定で表示するカスタマイズ方法のご案内です。
    トップページのみ背景画像を切り替える 1カラムデフォルト背景例
    SIRIUS シリウスのデフォルト背景は白台紙ですが トップページのみ背景を画像として表示することが出来ます カテゴリー以下はお堅いサイト トップページは海外サイト見たくカスタマイズできるかな?