編集

Blogger『Contempo』でヘッダー部分の装飾

｜2022/05/03

ヘッダー部分の装飾する

この辺りは、今回は弄ってないのです。最初に色々と手を加えたままなので、最初に弄ったメモを見ながら書くのです。

※HTML編集の前にテーマ→バックアップは忘れずに。

*ブログタイトルの文字を装飾する

テーマ→カスタマイズ→CSSを追加でフォント設定していく。
もしくはテーマ→詳細設定→HTMLの編集→『　]]></b:skin>　』の前に置く。

/*①ブログタイトル*/
.Header h1 {
font-family:"M PLUS Rounded 1c"; 'Meiryo','MS PGothic', sans-serif;
-webkit-text-size-adjust: 120%; /*スマホ版　ブログタイトル変更*/
line-height:0px; /*上の空白調整*/
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    :
       2px  2px 10px #999999,
      -2px  2px 10px #999999,
       2px -2px 10px #999999,
      -2px -2px 10px #999999,
       2px  0px 10px #999999,
       0px  2px 10px #999999,
      -2px  0px 10px #999999,
       0px -2px 10px #999999;        /* 文字の影 */
}

文字の色を一応指定。

これだけだと、ブログ説明の文字が重なります。
それも踏まえて、ブログ説明も変更。

**ブログ説明

同じく影付きにしたいので、上記と同じく文字も装飾しています。
テーマ→カスタマイズ→詳細設定→CSSを追加でフォント設定していく。
もしくはテーマ→HTMLの編集→『　]]></b:skin>　』の前に置く。

/*ブログ説明*/
.Header p{
margin-top:2em;
margin-bottom:-1em;
}

.header-widget{
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    :
       2px  2px 10px #999999,
      -2px  2px 10px #999999,
       2px -2px 10px #999999,
      -2px -2px 10px #999999,
       2px  0px 10px #999999,
       0px  2px 10px #999999,
      -2px  0px 10px #999999,
       0px -2px 10px #999999;        /* 文字の影 */
}

ブログ説明を改行する

ブログ説明の改行は『設定→説明』で説明文の中に<br>をつける事で改行が出来ました。
思った事　考えた事<br>　感じた事の羅列

スマホで見ると変なところで改行されてしまうのが気になったのです。


***ブログメニュー部分を変更

ヘッダー部分のメニューを作る事が出来ます。
まずは、『レイアウト→ページリスト→ページ』
ページの設定で、リンクの設定と表示設定をする。初期設定は非表示です。


タイトル部分と同じく影付きにしたいので、上記と同じく文字も装飾しています。
テーマ→カスタマイズ→CSSを追加でフォント設定していく。
もしくはテーマ→詳細設定→HTMLの編集→『　]]></b:skin>　』の前に置く。

.blog-name .PageList .overflowable-container{
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 10px #ffff66,
      -2px  2px 10px #ffff66,
       2px -2px 10px #ffff66,
      -2px -2px 10px #ffff66,
       2px  0px 10px #ffff66,
       0px  2px 10px #ffff66,
      -2px  0px 10px #ffff66,
       0px -2px 10px #ffff66;        /* 文字の影 */}

.PageList .widget-content{
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 10px #ffff66,
      -2px  2px 10px #ffff66,
       2px -2px 10px #ffff66,
      -2px -2px 10px #ffff66,
       2px  0px 10px #ffff66,
       0px  2px 10px #ffff66,
      -2px  0px 10px #ffff66,
       0px -2px 10px #ffff66;        /* 文字の影 */}

選んだページの下部にラインが出るようにする。
/*メニューライン変更*/
.tabs .selected{
border-bottom:4px solid $(tabs.selected.color)
}

メニュー上下を破線で挟んでみる。
/*メニュー上下線*/
.blog-name .PageList{
      border-top: 1px dashed #ffcc00;
      border-bottom: 1px dashed #ffcc00;
 }
メニュー部分は黄色っぽい影にしています。

文字色の設定

文字の色は『カスタマイズ→詳細設定→ブログタイトル』『カスタマイズ→詳細設定→タブのテキスト』から設定します。


『カスタマイズ→詳細設定→ブログタイトル』の中に、バーガーメニュー（三本線）の色の設定があります。『背景のアイコン色』でバーガーメニューの色が変わります。