今日は，ブログのデザインを変更しました
はじめにブログデザインのちょっとしたポイントも書いてあります。よろしければご覧ください。今日は ! important の話です。新CSSリストタイプを利用しています。この記事は少しづつ修正します。気になる方はまた見てくださいね。使用テクニックCSS編集履歴：ドロップダウンメニュー参考資料配色は以下のサイトを参考にさせて頂きました。カラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイルポイント１： ! important は使える新CSSの幅が1120pxなのですが，大きすぎる気がします。ワイドモニターを使っている方は良いのですが，ノートパソコンのユーザやタブレットなどを考えると旧のCSSの980pxは見やすい気がします。せっかく遊びに来ていただけるみなさんに見やすい方がよいですよね。そんなことで，新CSSの２カラム右タイプですが以下のように調整しています。ここで ! important を使っています。この ! important はCSSの適用の優先度を指定できます。例えば新CSSはJavaScriptなどで動的にCSSを書き換えているのですが，常に書き換えられるとユーザが自由に設定できないですよね。設定したのに上書きされてしまっては。そこで優先度をもっとも高くし，自分の指定通りでできるようにする。そんなことができるのが ! important です。ちょっと困ったらこの ! important を思い出してみてください。うまくできなかったものがすんなりできることがあります。/**************************************************** (7-1) フレームのサイズ変更 980pxタイプ***************************************************//* 全体の幅: 980px*/.skin-blogBodyInner{ width:980px ! important;}/* 記事 665px */#main{width:665px!important;}/* サイドバー:300px*/#subA {width:300px!important;}ポイント２：影を付けていますbox-shadow: 5px 0px 5px #ccc; でヘッダとナビゲーション，ボディーの影を付けています。詳しくは以下のサイトをご覧ください。CSS - box-shadow/* ヘッダ，ナビゲーション，ボディーの背景の影*/.skin-blogBodyInner ,.skin-blogHeaderNav ,[amb-layout="headerInner"] {border-left: 1px solid #ddd;border-right: 1px solid #ddd;box-shadow: 5px 0px 5px #ccc;}追加CSS参考までに追加したCSSをアップします。/*＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊(7) 追加、拡張 (7-1) フレームのサイズ変更 980pxタイプ (7-2) ナビゲーションバーの調整 (7-3) ヘッダ部分のナビゲーションメニュー (7-4) 記事タイトル (7-5) メッセージボックス＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊*//**************************************************** (7-1) フレームのサイズ変更 980pxタイプ***************************************************//* 全体の幅: 980px*/.skin-blogBodyInner{ width:980px ! important;}/* 記事 665px */#main{width:665px!important;}/* サイドバー:300px*/#subA {width:300px!important;}/* ヘッダ*/[amb-layout="headerInner"] {width:980px;}/* ナビゲーションメニュー */.skin-blogHeaderNav {width: 980px;}/* ヘッダ，ナビゲーション，ボディーの背景の影*/.skin-blogBodyInner ,.skin-blogHeaderNav ,[amb-layout="headerInner"] {border-left: 1px solid #ddd;border-right: 1px solid #ddd;box-shadow: 5px 0px 5px #ccc;}/**************************************************** (7-2) ナビゲーションバーの調整***************************************************/.skin-blogHeaderNav {margin: 0 auto;}.skin-blogHeaderNavInner{}/* 検索 */#blogSearchInputHeader {position:absolute;top:20px;left:-100px;width:200px;}/* 検索ルーペ */#blogSearchBtnHeader{position:absolute;left:70px;top:3px;}/**************************************************** (7-3) ヘッダ部分のナビゲーションメニュー***************************************************//* サイドバーを固定しメニューが崩れないように調整 */#subAInner{position:static!important;margin-top: 10px!important;}/* ドロップメニュー基本*/.dropmenu {margin:0;padding:0;width:980px;position:absolute;top: 0px;z-index: 100;margin: -165px 0 10px -665px;zoom: 1;list-style-type: none;}.dropmenu:before, .dropmenu:after{content: "";display: table;}.dropmenu:after{clear: both;}.dropmenu li{position: relative;width: 20%;float: left;margin: 0;padding: 0;text-align: center;}.dropmenu li a{display: block;margin: 0;padding: 7px 0 7px;background: #b22222;color: #ccc;border: 1px solid #ddd;font-size: 14px;line-height: 1;text-decoration: none;}/* .dropmenu li a{display: block;margin: 0;padding: 7px 0 7px;background: #b22222;color: #ccc;border: 1px solid #ddd;font-size: 14px;line-height: 1;text-decoration: none;box-shadow:5px 5px 5px #ddd;} */.dropmenu li ul{list-style: none;position: absolute;z-index: 9999;top: 100%;left: 0;margin: 0;padding: 0;}.dropmenu li ul li{width: 100%;}.dropmenu li ul li a{padding: 13px 15px;border-top: 1px solid #ddd;text-align: left;}.dropmenu li:hover > a{background: #db7093;color:#000000;}.dropmenu li a:hover{background: #ffc0cb;color: red;}/* 色:追加修正 */.dropmenu li a{background:#cb5393;color:#fff;}.dropmenu li:hover>a{background:#d685b0;color:#000;}/* アニメーションなし*/#normal li ul{display: none;}#normal li:hover ul{display: block;}/* 広がるように*/#dropmenu li ul li{overflow: hidden;height: 0;transition: .2s;}#dropmenu li:hover ul li{overflow: visible;height: 38px;}/* フェードインでおりてくる*/#fade-in2 li ul{opacity: 0;top: 50%;visibility: hidden;transition: .5s;}#fade-in2 li:hover ul{top: 100%;visibility: visible;opacity: 1;}/* 位置調整 */.dropmenu {margin: -140px 0 10px -665px;}/**************************************************** (7-4) 記事タイトル***************************************************//* 記事タイトル:リスト */.skin-entryTitle {border-bottom: 2px solid #d685b0;}.skin-entryInner h1:first-letter{font-size:130%;color:#cb5393;}.skin-borderQuiet h2{border-bottom: 2px solid #d685b0;}.skin-borderQuiet h2:first-letter{ font-size:120%!important; color:#cb5393!important;}/**************************************************** (7-5) メッセージボックス***************************************************/.skin-message {width:500px!important;border: 3px solid #cb5393;box-shadow: 5px 5px 5px #ccc;border-radius:30px;}.skin-message h2{ background:#d685b0; box-shadow:5px 5px 5px #ccc; color:#fff; padding-left:20px; margin-bottom:0.8em; border-radius:30px;}/**************************************************** (7-5) 他***************************************************//* サイドバータイトル */.skin-widgetTitle {color: #fff;background: #0168b3;height: 20px;padding: 5px 0 5px 15px;}/* ヘッダタイトル */.skin-blogMainTitle { font-family: "メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #000;}/* ヘッダ背景*/.skin-bgHeader { background:url(http://stat.blogskin.ameba.jp/blogskin_images/20160417/08/73/We/p/o09800230qelab1460849583728.png) no-repeat 50% 50%;}/* 記事内 H3 */.skin-entryInner h3{border-bottom:2px solid #00a5e7;}/**************************************************** トップに隙間を開けてサブタイトルを表示***************************************************//* ヘッダの上に隙間を開ける*/.skin-bgHeader {margin-top: 70px;}/* サブタイトル*/.skin-blogSubTitle {color: #000;font-size: 16px;text-align: left;position: absolute;top: -55px;}/* 記事内のはじめの文字だけ強調 */.skin-blogMainInner h2:first-letter,.skin-blogMainInner h3:first-letter{ font-size: 150%; color:#00a5e7;}フリースペースの内容<ul id="fade-in2" class="dropmenu"><li><a href="http://ameblo.jp/qelab">ホーム</a><ul><li><a href="http://profile.ameba.jp/qelab/" target="_blank" >プロフィール</a></li><li><a href="http://ameblo.jp/qelab/entry-12142452037.html" >リンクと免責</a></li></ul></li><li><a href="http://ameblo.jp/qelab/entrylist.html" >CSS:基本</a><ul><li><a href="http://ameblo.jp/qelab/entry-12143716226.html">記事内でHTML入力</a></li><li><a href="http://ameblo.jp/qelab/entry-12142446248.html">影付き枠</a></li></ul></li><li><a href="" >CSS:ヘッダ部分</a><ul><li><a href="http://ameblo.jp/qelab/entry-12145738824.html">ドロップダウンメニュー</a></li><li><a href="http://ameblo.jp/qelab/entry-12144067783.html">オリジナルヘッダーメニュー：新CSSカスタム</a></li><li><a href="http://ameblo.jp/qelab/entry-12143900044.html">ヘッダ部分の編集</a></li><li><a href="http://ameblo.jp/qelab/entry-12145982518.html">ブログのヘッダ画像を作る資料のリンク</a></li></ul></li><li><a href="">CSS:調査</a><ul><li><a href="http://ameblo.jp/qelab/entry-12143188855.html">CSS編集ツール：リアルタイムにCSSが編集して確認できる</a></li><li><a href="http://ameblo.jp/qelab/entry-12143315123.html">WEB DEVELOPER</a></li></ul></li><li><a href="">予約中</a></li></ul>
