☆ この記事のもくじ ☆
- ♪ ワタシのブログテーマでは 固定化していたんです
- グローバルヘッダーの固定化がしたい ♪
- 「デザイン→カスタマイズ→デザインCSS」で修正します
- 3度目は考え方を変えて ワタシ的に大成功
- ♪ デザインCSSは ヘタすると全部ぐちゃぐちゃになります
投稿するのは カスタマイズを考えてた 忘備録として です
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
グローバルヘッダーのカスタマイズ
始まりは 7月のはてなブログの改変 ・・バタバタと3度目の修正までの情報です
((#^^#)ー☆
テーマ patchwork レスポンシブデザインではありません・・
けれど 各所が気に入っているので テーマ変更はしたくないんです
で 今回 修正 を３回しましたので 他のテーマの方にも応用が利くか
解りませんが カスタマイズしたい方の参考になる？？ 流れを 忘備録 しておきます
グローバルヘッダーの固定化がしたい ♪
♬ スクロールしてもグローバルヘッダーバーが動かないように位置を固定する
「デザイン→カスタマイズ→デザインCSS」で修正します
オススメは コレ
デザインCSSに追加記入
#globalheader-container { /* 位置を固定する */ position: fixed; }
♬♬ ついでに グローバルヘッダーの 色・文字色を変更
デザインCSSに追加記入
コレは 白文字にviolet色の文字背景の場合
#globalheader-container { /* 文字色白 */ color: #ffffff; /* 背景色violet */ background-color: violet; }
テーマ patchwork では うまくいかなかったです
ので 2度目の変更
まずは 【優先的に】動かす という【!important】を追加 → 効かず
他にも
各ページの中に CSSを 書き込みしました
背景をnavyに 文字をピンクに 位置を【優先的に】固定する
<style><!--
#globalheader-container { background-color: navy; color: pink; /* 位置：固定 */ position: fixed!important;}
--></style>
すると スマホの画面でも反応してくれます
ただし 一部のみでした
スマホでは 背景をnavy のみ
パソコンでは 文字をピンクに 位置を【優先的に】固定
そして ページに設定しているので ページが変わると元の木阿弥
3度目は考え方を変えて ワタシ的に大成功
そして色は カスタマイズ済の 追従する目次に合わせて
今度は サーモン色の文字背景に navyの文字色 で設定
☆((#^^#)ー☆b ☆((#^^#)ー☆
#globalheader-container{
background:linear-gradient( transparent, salmon 10% );
color: navy;/* salmon色に文字navy */
position: -webkit-sticky; /* Safari用 */
position:sticky; /* 要素をスクロールに応じて固定 */
top:0; /* 縦スクロールに追従 */
z-index: 100; /* z-indexで最前面に持ってくる */
}
background-color: では 色変え できず
background:linear-gradient( transparent, salmon 10% );で 背景色決めてます
【CSS】は Little Strange Software様の記事のコメントからもらいました
いつも大変お世話になっております(^_-)-☆
カスタマイズは 自己責任で
必ず バックアップしておいてから 始めましょう
結論
・・・ブログのページ のみ成功・・・
もともとが レスポンシブデザインではありません
スマホでは 変化なしです
・・・ダッシュボードとかは 変更できない・・・
・・・テーマによっては 変更できない・・・
☆((#^^#)ー☆
有料のPROか 無料か とか
ブラウザ が 変われば かも とも 思います
☆星峰☆ ( atarimaesore )
☆((#^^#)ー☆
あたりまえ？それさぁ。。。 のブログ
読んでいただき ありがとうございました。
☆((#^^#)ー☆この記事のもくじ☆((#^^#)ー☆
- ♪ ワタシのブログテーマでは 固定化していたんです
- グローバルヘッダーの固定化がしたい ♪
- 「デザイン→カスタマイズ→デザインCSS」で修正します
- 3度目は考え方を変えて ワタシ的に大成功
- ♪ デザインCSSは ヘタすると全部ぐちゃぐちゃになります
☆ 最後までありがとうございます☆((#^^#)ー☆
ワタシのカスタマイズについては そのうち一覧にしてみます
