Bloggerのカスタマイズ Ⅴ　私のための覚え書き

コピペでカスタマイズ。まったくもって、自分だけのための備忘録

今までは機能追加のカスタマイズでしたが、ここからは見た目重視で行きます。

20．1カラム化

ふじやんさんのブログはなぜかスッキリしてる印象でした。ブログ記事をあたっていくと1カラムへのカスタマイズをされている由。

そういうことか！

まあ、慣れかなぁ。

21．ナビゲーションバーに検索ボックス

ナビゲーションバーとは、ブログテーマを表示したヘッダの上にある細い色違い（ブランドサブカラー）の部分で、ここに要素を貼り付けることができるようです。さらには、ヘッダの下に配置することもできるらしいです。

22．ナビゲーションバーを上部固定（スクロールしても消えないヤツ）

導入したのは、”【QooQ】ナビゲーションバーを上部に固定する方法”の「ナビバーがヘッダーの上にあるデフォルトの状態の場合」になります。

デフォルトのmargin-top: 30px;　では、ナビゲーションバーとヘッダの間に隙間ができます。PCでは、24pxでピッタリでしたが、スマホではまだ隙間ができています。結局、18pxにしました。

23．スマホ用ナビゲーションバーカスタマイズ

たぶんハンバーガーアイコンというのだと思いますが、これを少し大きくしたり、右寄せしたりするカスタマイズです。

フルで適用すると、ハンバーガーアイコンのクリックで、今のところは検索ボックスがON/OFFできます。

"【 QooQ カスタマイズ 】 ナビゲーションバーをカスタマイズする"の「スマホ表示用のナビゲーションバーカスタマイズ」を適用させていただきました。

24．記事タイトルの表示に変えた「前・次の投稿」をもっと下に移動する

やり方は素人初心者の力業です。ふじやんさんの記事で示してあるところへ”Bloggerにサムネ画像付きページャーを導入する”から持ってきたコードを貼り付けました。

”Bloggerにサムネ画像付きページャーを導入する”で紹介されている下記引用の方法がうまくけば良かったのですが、私の環境ではダメでした。

コピペしたコードを<b:includable id='post-pager' var='post'>...</b:includable>で囲っておき、<b:include data='post' name='post-pager'/>で好きな場所から呼び出す形にすればよりスマートです。

そこで、コードを乱すことになってしましましたが、前述した力業で無理をしました。

25．フッターラベルのカスタマイズ

探し回った末、こういうのを見つけました。

”味気ないBloggerのラベルを、見やすい四角いラベルに変更する方法”

引用元はサイドバー用のものでしたのでフッター用に修正しています。色で見た限り、デフォルトではラベルにブランド色とかブランド文字色が適用されているようで、ここで色を変えても変わりませんでした。

chromeのdeveloper toolで設定個所を探せましたので、色を変更するのと同時にホバーアニメーションをつけておきました。

/* ラベル＠footer */
.footer ul{
list-style: none;
margin: 0;
padding: 0;
}

.footer .widget-content{
padding: 10px 15px;
margin: 0;
border: 1px solid #C0C0C0;/*灰色*/
background-color: #f8f8f8;/*白*/
position: relative;
}

.Label li {
padding: 5px 5px;
float: left;
margin: 0px 3px 3px 0px;
background-color: #2B4562;/*通常の背景色*/
color: #f8f8f8;
font: 12px'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
/* font-weight:bold;*/ /*太字*/
}

.Label li a {
color:#f8f8f8;/*白*/
text-decoration:none;
}

.Label li:hover {
background-color: #9400d3;ONマウス時の背景色*/
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
    transform: translateY(-0.1875em);
}
/* ラベル＠footer END */

26．えっ?こんなに簡単。フッターの中央レイアウト

27．サイドバーのスティルス化

/*  サイドバーメニュー表示ボタン  */
  #side-button{
    width: 30px;
    height: 30px;
    position: fixed;
    right: 0;
    bottom: 62px;
    background: #4682b4;
    opacity: 0.5;
    z-index: 1002; /*  サイドバーよりも上へ  */
  }
  #side-button span{
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    text-decoration: none;
  }
  #side-button:hover {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
    transform: translateY(-0.1875em);
	opacity: 1;
  }
  #side-button span::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f0c9';
    font-size: 20px;
    color: #fff;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }
  /*  背景を黒くする  */
   #side-button-back.open{
    background-color: #000000;
    opacity: 0.3;
    z-index: 1000;
    height: 100%;
    width: 100%;
    position: fixed;
    transition: all 1s ease;
    top: 0;
    left: 0;
  }
  /*  サイドバーメニュー非表示  */
  #sub-content {
    box-sizing:border-box;
    transition: all 0.3s;
    transform: translate(300%);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
  }
  #sub-content.open {
    transform: translate(0) !important;
    height:100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #sub-content {
    margin: 0 !important;
    width: 400px !important;
  }
  #sub-content .widget{
    margin:auto!important;
  }
  @media ( max-width : 768px ) {
  #sub-content {
    display: block;
	width: 100% !important;
    }
  }

28．"Powered by Blogger" をいじる

”[Blogger] フッターレイアウト - AttributionとCopyright”というブログ記事のとおりに行いました。

ただし、フッターCSSの#copyright 部については、下記の所のコメントアウトだけにして、他はそのまま利用します。

 

29．デベロッパーツールは使えるヤツ

試しに編集できるので、力業の私には力強いツールです。