homeHome / create_new_folderBloggerカスタマイズ /

Bloggerのカスタマイズ Ⅴ　ページ編集Tip's

published_with_changes 更新日：

labelBloggerカスタマイズ

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

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

目次
  1. 20．1カラム化
  2. 21．ナビゲーションバーに検索ボックス
  3. 22．ナビゲーションバーを上部固定（スクロールしても消えないヤツ）
  4. 23．スマホ用ナビゲーションバーカスタマイズ
  5. 24．記事タイトルの表示に変えた「前・次の投稿」をもっと下に移動する
  6. 25．フッターラベルのカスタマイズ
  7. 26．えっ?こんなに簡単。フッターの中央レイアウト
  8. 27．サイドバーのスティルス化
  9. 28．"Powered by Blogger" をいじる
  10. 29．デベロッパーツールは使えるヤツ

20．1カラム化

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

そういうことか！

他にも私の好みの施策が数々見けられます。
見倣ってみます。きっと、これからどんどん「ふじろじっく」化していくような気がします。

まずは、”1カラムレイアウトにしてみた (1カラム化手順を追記しました)”を導入しました。

記事画面の幅は広い方が良いと思い1200pxで試行してみました。文字横に画像を貼っているような記事では、間抜け感・違和感があります。デフォルトの980pxの方が引き締まった感じがします。きっと目の動きもあるのだと思います。

まあ、慣れかなぁ。


確かに、”遠北ほのかのイラストサイト”は全体の構成が私にはしっくりきます。ガジェットの配置とか、色使いも良いのでしょねぇ。とても参考になります。（影響を受けます。）

影響を受けて、画面サイズは次のようにしました。
  max-width: 1300px;
  width: 86%;

ブログを始めたのは本来、こういう目的ではなかったのですが、この3週間ほどどっぷりカスタマイズにはまっています。

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

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



ナビゲーションバーに検索ボックスを配置する方法は、
の二つのブログ記事を参考にしました。
1．はふじやんさんのブログで、導入はこれに沿って行いました。検索結果の表示を明示的にするため、灰色うさぎさんの２を利用させていただきました。ここはちょっと迷ったので、一連の手順を振り返っておきます。

①ウィジェット編集アイコンと検索ボタンが重なる対処のCSSを追加。

]]></b:skin>
の前に

    .widget-item-control {
         display: none;
    } /*ウィジェット編集アイコンと検索ボタンが重なる対処 */

を挿入

②検索ワードに一致する記事がない場合、何も表示されないのは不親切すぎるのでメッセージを表示。
③検索結果のメッセージの最後にある【すべての投稿を表示】の部分が邪魔なので <span><style>タグで 削除。

    <b:include data='posts' name='mybreadcrumb'/>

をコメントアウトし、この位置に

    <!-- 検索結果のステータスメッセージを表示 START 灰色うさぎ -->
         <b:if cond='data:blog.searchQuery'>
           <span id='navmsg'><b:include data='top' name='status-message'/></span>
           <style>
              #navmsg a:last-child {display:none;}
            </style>
         <b:else/>
    <!-- 検索結果のステータスメッセージを表示 END 灰色うさぎ -->
            <b:include data='posts' name='mybreadcrumb'/>
            <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
               <b:include data='top' name='status-message'/>
            </b:if>
          </b:if><!-- 検索結果のステータスメッセージを表示 灰色うさぎ -->

を挿入

④メッセージの整形は404メッセージの部分を変更。

オリジナルをコメントアウト

    /* 404メッセージ */
    /* コメントアウト
    .status-msg-wrap{
     color:  $(font.light);
    }*/

以下のコードに変更

    /* 404メッセージ */
    /* 検索結果表示 灰色うさぎ */
    .status-msg-wrap{
               font-size: 14px;
               font-color: white;
               padding-left: 0.5em;
    /*        color:  $(font.light); */
    }


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

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

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

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

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

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

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

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

1カラム化に伴って、ガジェットのレイアウト変更を行います。まずは、メイン記事とカテゴリの間にあった前後の記事へリンクするガジェットをコメント欄の下に移動します。

やり方は素人初心者の力業です。ふじやんさんの記事で示してあるところへ”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 */
C

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

フッター1,2,3が上から、left, center, right の配置になります。Bloggerの仕様なのか、QooQの仕様なのかは今となってはわかりません。
こんな簡単なことなので、たぶん情報がないのでしょう。ほぼ半日探し回りました。おかげて色々勉強にはなりました。

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


CSSは私のカスタマイズに合わせて、少々モディファイしています。
  • 隠れたサイドバーが右から出るようにした
  • サイドバー幅を広げた
  • スマホは横幅一杯のサイドバーにした
  • メニューボタンの色、大きさを調整
  • メニューボタンにホバーアニメーションをつけた

/*  サイドバーメニュー表示ボタン  */
  #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;
    }
  }
C

28．"Powered by Blogger" をいじる

下の方の中央に鎮座している"Powered by Blogger"を最下行の”designed by QooQ"と同列に置くカスタマイズです。

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

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

#designed-by:before{ 

         /*content:"designed by "; copyrightのデザイン変更*/ 

}

 


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

これを下記のブログ記事で知りました。chromeの機能です。
・本番ファイル修正前に、あらかじめ修正イメージを確認できる。
・PC、スマートフォン、タブレットでの見え方を簡単に確認できる。
・他のWEBサイトがどんなHTML＆CSSで作られているのか研究できる。

ツールの出し方は、調べたいWeb画面（どこでも）で「F12」か、その場所をマウスで選択し右クリック「検証」です。

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


Powered by Blogger | Designed by QooQ

keyboard_double_arrow_down

keyboard_double_arrow_down