• MENU●●●●
  • サイト背景をスライド化カスタム例と文字認識をし易くするフィルター


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

    スポンサー広告

    関連記事


    サイト背景スライド化 参考例および見やすい文字認識設定

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

     

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

     

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

     

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

     


     

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

     

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

     

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

     

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

     

    記事背景を消してみる

     

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

     

     

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

     

    以下のメニュー背景画像

     

    記事背景画像

    上記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>

     


     

     

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

     

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

     

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

     

     

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

     

    siriusukasutamaizu
    シリウスカスタマイズ テキスト   テキスト    テキスト  
    シリウスカスタマイズ

    siriusukasutamaizu
    シリウスカスタマイズ テキスト   テキスト    テキスト  
    シリウスカスタマイズ

     

    完了です

     

     

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

     

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

     


     

    その他あれこれ

     

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

     

     

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

     

    スポンサーリンク

     

     

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

    サイト背景をスライド化カスタム例と文字認識をし易くするフィルター関連解説
    reba値カラーコード半透明化メニューで文字を見やすくする方法
    シリウスの背景をスライド ループした場合 reba値のカラーコードでサイト内に配置するBOXメニューの背景を半透明化で指定して綺麗に見やすくする方法を解説しております
    シリウスに背景画像スライドsupersized導入の際の障害
    シリウスに背景画像をスライド出来るsupersizedを導入致しますと シリウス機能が一部使えなくなりす ご報告と対処法
    シリウスにスクリプトを多く導入するとsupersizedが不作動
    シリウスにサイト背景スライドスクリプトsupersizedは導入以降 他のスクリプトの増加に伴い 不作動となることもございます その際の対処法は

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト