• MENU●●●●
  • 背景に色彩画像表示している場合は枠内を透過して認識可能にする


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

    スポンサー広告

    関連記事


    サイト背景が色彩画像の場合は枠内を透過する

    角丸の枠スペースがごろ介出来たなら 次はシリウスデフォルトスタイルの
    記事背景以外 
    背景を色彩化しているか またはオール画像に指定している場合は
    角丸枠の記事背景をやや半透明として表現するという手順に進みます

     

    角丸枠内を半透明とするとスクロールしても背景の画像が認識でき
    せっかく取り込んだ背景画像を読者に違和感なく見て盛られます

     

    スポンサーリンク

     

     


     

    角丸枠内背景を投下する際は 16進法のカラーコードでは
    文字や画像まで半透明となり 綺麗な表現になりm戦の出
    rgbaのカラーコードを使います

     

    今回はダークカラー指定で進めておりますが
    rgbaのカラーコードをご理解したい方は ページ巻末で移動サイトを
    ご案内しております

     

     

    記述コードは二つご案内します

     

    こちらは フォントカラーを背景により指定できるコードです

     

    フォントを赤にしてます
    半透明状態が確認できますか?

     

     

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

     

    半透明状態が確認できますか?

     

    </div>

     

    カスタム

     

    枠線のカラー指定記述
    border:solid 1px #0ACCFF
    1px は枠線の太さ

     

     

     

    背景の透明化度合
    rgba(0, 0, 0, 0.4)
    数値変更で調整

     

     

    フォントカラーとフォントサイズを指定します
    #FF0A0A;font-size:14px

     

     

    角の丸み度合いの調整
    border-radius:6px

     

     


     

     

    二つ目

     

    シリウススタイルシートでフォントカラーが指定されている場合

     

    こちらにはフォントカラーの指定がありません

     

     

    半透明状態が確認できますか?

     

     

     

    こちらのコードをコピー&ペースト
    <div style="border:solid 1px #0ACCFF;background: rgba(0, 0, 0, 0.4);;colo; padding:10px; border:1px solid #0ACCFF; border-radius:6px;">

     

    コピーコード

     

    </div>

     

     


     

    背景をグレーにした例

     

    背景をグレーにした例を参考にカスタムを覚えましょう

     

     

     

     

    灰色半透明状態が確認できますか?

     

     

    rgbaのグレーコードは
    rgba(153, 153, 153, .4);です

     

     

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

     

     

    灰色半透明状態が確認できますか?

     

    </div>

     


     

    16進法をrgbaコードに変換

     

    16進法のカラーコードはネット上に多くの情報があり
    解り易いのですが rgbaのカラーコードというと 何やら記述が
    面倒そうで情報も少な目ですが

     

    便利なウェブサービスがございますのでご確認ください

     

    16進法のカラーコードをrgbaコードに変換するサービス
    こちらで
    http://j-press.info/16torgba/

     

     

    こちらでも変換可能です
    http://hp-html.jp/rgba/
    使いやすいサービスを利用しましょう

     

     

     

    縦サイズは スペースを空ければ 記事を追加すれば広がります

     

    横サイズは 記事カラムに合わせて自動調整

     

    フリースペースでも同様で メニュー枠内で収まります

     

    フリースペースでは スタイル無しを選択してください

     

     

     

     

    背景に色彩画像表示している場合は枠内を透過して認識可能にする
    シリウスに角丸の囲い枠を組み込み優しさを演出するカスタマイズ
    シリウスカスタマイズトップ

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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