QooQをMateriapollo風に改装してみた-紆余曲折の記録

BloggerのテーマにMalleriapolloというのがあって、そのカッコよさに一目で惹きつけられてしまいました。

QooQからの乗り換えも考えたのですが、QooQのカスタマイズを経験してHTMLやCSSを少しかじったので、QooQをMateriapolloに似せてみようと思い立ちました。

Materiapolloのソースコードを見たのですが、QooQのコードを見慣れてしまったせいもあって、Materiapolloのカスタマイズは敷居が高そうと思ったのも理由の一つです。

QooQのMateriapollo化の方針を次のようにします。

見かけをできるだけ似せる
大きな目立つところから手をつける
上から下、メインからサイドの順で手をつける

見た目をMateriapollo風にする
ヘッダをMateriapollo風に?
1. 色使いの変更
2. タイトルと説明のフォントサイズ
パンくずリストをMateriapollo風に
1. パンくずリストのデザイン
2. アイコン追加
サイドガジェットをMateriapollo風に
1. ラベルガジェット
2. ガジェットの名称変更とアイコンの追加
公開日とラベルをMateriapollo風に
ナビゲーションバーをMateriapollo風に
ページャをMateriapollo風に
まとめ

見た目をMateriapollo風にする

1カラムに変えていた画面を2カラムに戻す

1カラムにしたときの記事を読み返して、2カラムに戻します。コードはオリジナルのxmlファイルから持ってきました。

メイン画面幅を合わせる

画面ルーラーを導入

画面幅をPC画面上で測定するため、chromeの拡張機能のEdge: The Web Rulerをインストールしました。chromeの拡張機能とのことですが、起動のしかたはchromeからではなく、Windowsのアプリと同じ方法のようです。

画面幅をひろげる

MateriapolloはQooQよりもメイン記事の幅を広くとっています。そのため画面左の空白部分は狭めに設定されています。QooQの全体設定のコードがこれに該当するのですが、”初期化処理-*基本いじらない”で設定されている次のコードが効いて、左空白を狭めることができませんでした。

.container{margin:auto;width:86%;min-width:960px;max-width:1180px}

そこで、後から書いたコードが有効になるので、max-widthを上書きするコードを全体設定の中に追加して画面幅だけを広めに書き換えました。

（下記のコード参照）

main-contentとsub-content

主記事のmain-contentとサイドガジェットのsub-contentをMateriapolloと同じ画面幅になるように調整しています。

（下記のコード参照）

フォント設定をいじる

フォントスタイル

QooQはゴシック体が優先ですが、Materiapolloはメイリオが優先なのでfont-familyの順番をMateriapolloに揃えました。

以上の変更を加えた全体設定部のコードです。

/****************************************
          全体設定
*****************************************/
body{
	font-family: Meiryo,apple-system,BlinkMacSystemFont,YuGothic,'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
	/*font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	background: $(other.topback);
	color: $(font.color);
}

/* パソコン画面横幅設定 */
.container{max-width:1300px;}/*Materiapollo合せの微調整*/


/* 2カラム設定 */
#main-inner{
	display: flex;
}

#main-content{
	margin-right:30px;
	width: calc(100% - 326px);/*Materiapollo合せの微調整*/
	flex-shrink: 0;
	max-wideth: 100%;
}

#sub-content{
	margin-top: 40px;/*Materiapollo合せの微調整*/
	width: 320px;/*Materiapollo合せの微調整*/
	flex-shrink: 0;
}

@media ( max-width : 768px ) {

	#main-inner{
		display: block;
		overflow: hidden;
	}
	#main-content{
		margin-right: 0;
		width: 100%;
	}
	#sub-content{
		width: 100%;
	}
}

フォントサイズ

Materiapolloは全体的に使われているフォントサイズが小さめです。個々に変えていくのは気が遠くなりそうなので、”初期化処理-*基本いじらない”で設定されているフォントサイズを変更しました。

変更したのはあてずっぽで赤アンダーラインのフォントです。主記事、サイド記事などのフォントサイズが15px(スマホでは14px)に変わりました。

ヘッダをMateriapollo風に?

ヘッダをMateriapollo風にするときにやることは、色使いとヘッダータイトル上下のマージン設定です。

どこをいじれば良いのかは、Google Chromeデベロッパーツールで調べます。

色使いの変更

Materiapolloのヘッダー部の色はMaterialize のドキュメンテーションから調べることができます。

デフォルトのシアンベースの色使いにしました。

ヘッダー帯　　　　　brand.color: 00ACC1; /* 濃いシアン */
ナビゲーションバー　brand.subcolor: 00BCD4; /* 薄いシアン */
フォントカラー　　　brand.font: #FFFFFF; /* 白 */

タイトルと説明のフォントサイズ

フォントサイズやヘッダ上下の空白間隔(padding)を調整しました。

/****************************************
         ヘッダー
*****************************************/
#header{
	background: $(brand.color);
	color: $(brand.font);
	font-size: 113%;/*Materiapollo合せの微調整*/
}
#header a{
	color: inherit;
}
#header-inner{
	padding: 5em 0 3em 0;/*Materiapollo合せの微調整*/
}
#header-img-wrapper{
	text-align: center;
}
#header-img{
}
#header-title{
	text-align: center;/*Materiapollo合せの微調整*/
	font-size: 176.5%;/*Materiapollo合せの微調整*/
	font-weight: bold;
}
#header-text{
	text-align: center;/*Materiapollo合せの微調整*/
	font-size: 100%;/*Materiapollo合せの微調整*/
	font-weight: normmal;/*Materiapollo合せの微調整*/
}

パンくずリストをMateriapollo風に

パンくずリストをMateriapollo風にカスタマイズします。今までQooQではパンくずリストを使っていなかったので、今までのQooQと比べて最初に違いに目を引く（カッコイイと思った）部位でした。

パンくずリストのデザイン

QooQとMateriapolloのデザインを比較してみます。

QooQではタイトルバーやナビバーの下に目立たぬように配置されています。一方、Materiapolloでは影付き浮き出しのバーの中にブランド色の文字を配置しています。

QooQ

Materiapollo

おなじような雰囲気にするため、次のコードにしました。全面的に変更しています。

/****************************************
パンくずリスト
*****************************************/
.breadcrumbs{
	line-height: 1;
	background: $(other.back);
	color: $(brand.subcolor);
	position: relative;
    margin: 4rem 0 1.5rem 0;
    font-size: 15px;
    padding: 14px 24px;
    -webkit-transition: -webkit-box-shadow .25s;
    transition: -webkit-box-shadow .25s;
    transition: box-shadow .25s;
    transition: box-shadow .25s, -webkit-box-shadow .25s;
    border-radius: 2px;
    border: 1px solid rgb(211,211,211);
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 30%);
}

/* 404メッセージ */

.status-msg-wrap{
	color:  $(font.light);
}

アイコン追加

ここで追加するアイコンは、Materiapolloのソースコードを調べるとGoogle Material Iconsでした。他のところでは、Font Awesomeを使っています。これらのライブラリ（というのか？）はjavaのライブラリもまとめて、<head>直下に置くことにしました。

<head>
  <!-- JQuery -->
    <script src='//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
  <!-- AweSome -->
    <link href='https://use.fontawesome.com/releases/v5.15.4/css/all.css' rel='stylesheet' type='text/css'/>
  <!--Import Google Icon Font-->
    <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>

アイコンを追加するために、パンくずリストの冒頭で「ホーム」を書いているHTMLコードを探し書き換えます。探すコードは下記になります。

ホーム

追加するアイコンはMateriapolloと同じにするためGoogle Material Iconsの”home”を使います。使い方（書き方）はアイコンを選んでクリックすると画面の右側にCSSが出てきますので、それをコピペします。

挿入箇所にタグで挟むという書き方です。

homeHome

「ホーム」の文字を揃えるためにfont-sizeやpaddingを調整しています。なお、これだけでは上下の位置関係が微妙にずれていました。その対策として、次のCSSを”]]></b:skin>”の前に書き込みました。

/* Homeのアイコン上下位置調整 */

.material-icons {

display: inline-flex;

vertical-align: middle;

}

サイドガジェットをMateriapollo風に

続いて、サイドガジェットをMateriapollo風にマスタマイズします。ここも、QooQと比べて違いに目を引く部分です。

サイドガジェットには上から、プロフィール、人気の投稿、ラベル、ブログアーカイブ、注目の投稿、それにブログ検索を並べます。

ラベル以外は既存のガジェットがありますので、それを使います。

ラベルガジェット

ラベルガジェットは、以前にフッターラベルのカスタマイズをしたときに使ったコードを使います。Materiapolloと同じになるように工夫しましたが、カウント数の表現（テキスト色、背景色付け、カッコなし）は知識不足で同じにすることができませんでした。

/****************************************
         サイドバー ラベル
*****************************************/
/* ラベル＠sidebar */
.sidebar ul{
list-style: none;
margin: 0;
padding: 0;
}

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

.Label li {
padding: 10px 11.25px;
float: left;
margin: 5px 5px 0 0;
background-color: $(other.back);/*通常の背景色*/
border-radius: 2px;
color:  $(font.color) !important;
font: 14px;
font-weight:  normal;
border: 1px solid rgb(211,211,211);
box-shadow: 3px 6px 6px -6px rgb(0 0 0 / 30%);
}

.Label li a {
color: $(font.color)!important;/*黒*/
text-decoration:none;
}

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

/* ラベル＠sidebar END */

ガジェットの名称変更とアイコンの追加

ガジェット名称はBloggerの「レイアウト」から、対象のガジェット「編集」で変更できます。

アイコンの追加は、パンくずリストの「Home」に追加したのと同じやり方でできますが、ここではMateriapolloのソースコードで学んだやり方を使いました。

それは、ガジェット名称それぞれに対応するアイコンを設定し、”:before”でガジェット名称の前に付加する方法です。

"\e0be\00A0"の\....\で挟まれたコードがMaterial Iconsのコードです。font-sizeは大きめの24pxにしています。

理由は全くわかりませんが、このやり方でなぜか最初に書いたコードは効きませんでした。したがって、”.widget.ContactForm...”はダミーです。

/* サイドバーガジェットにアイコン追加 */
.widget.ContactForm h2:before{content: "\e0be\00A0"; font-family: 'Material Icons';font-size: 24px;font-weight: normal;vertical-align: middle;}
.widget.Profile h2:before{content: "\e87c\00A0"; font-family: 'Material Icons';font-size: 24px;font-weight: normal;vertical-align: middle;}
.widget.BlogArchive h2:before{content: "\e02f\00A0"; font-family: 'Material Icons';font-size: 24px;font-weight: normal;vertical-align: middle;}
.widget.Label h2:before{content: "\e54e\00A0"; font-family: 'Material Icons';font-size: 24px;font-weight: normal;vertical-align: middle;}
.widget.PopularPosts h2:before{content: "\e39f\00A0"; font-family: 'Material Icons';font-size: 24px;font-weight: normal;vertical-align: middle;}
.widget.Translate h2:before{content: "\e8e2\00A0"; font-family: 'Material Icons';font-size: 24px;font-weight: normal;vertical-align: middle;}
.widget.BlogSearch h2:before{content: "\e8b6\00A0"; font-family: 'Material Icons';font-size: 24px;font-weight: normal;vertical-align: middle;}
.widget.FeaturedPost h2:before{content: "\e05e\00A0"; font-family: 'Material Icons';font-size: 24px;font-weight: normal;vertical-align: middle;}

公開日とラベルをMateriapollo風に

Materiapolloでは記事タイトルの下に投稿日とラベルが並びます。それぞれにアイコンもついています。更新日を追加するカスタマイズも一緒に行います。

公開日と更新日を併記

公開日か更新日のうち、今に近い日を表示するカスタマイズを行いました。引用元は次のブログです。

カテゴリを横並びさせる

カテゴリを投稿日に横並びさせるには、display: inline-block;を使います。

”#single-header-category”と”.single-header-category-item”を次のように書き換えます。

#single-header-category{
	display: inline-block;/* リスト横並び */
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-top: .5em;
	font-size: 80%;
	font-weight: bold;
}
.single-header-category-item{/* カテゴリ記述 */
	color: $(font.color);
	font-weight: normal;
}

アイコンをつける

それぞれの頭にMaterial Iconsをつけます。やり方は既存のHTMLにアイコンを入れ込む方法にしました。

公開日と更新日

"<data:post.dateHeader/>"

を次のように書き換えます。

<p id='single-header-date'><span class='material-icons' style='font-size: 18px; padding-right: .5em;'>event_note</span><data:post.dateHeader/>
<span class='material-icons' style='font-size: 18px; padding-left: .5em;'>update</span>
<span id='single-header-update'/></p>

【PS】記事一覧の場合に、更新日と公開日が並列表示されるケースがあるのですが、個別記事の表示では問題なくどちらかが表示されます。同じコードを使っているので、そのコードの前後が影響しているようです。中身は手の施しようがないので、しばらくこのままにしておきます。

カテゴリ

”<a class='single-header-category-item' expr:href='data:label.url'><data:label.name/></a>”

を次のように書き換えます。

<a class='single-header-category-item' expr:href='data:label.url'>
<span class='material-icons' style='font-size: 18px; margin-left: .5em; padding-right: .5em;'>label</span><data:label.name/></a>

ナビゲーションバーをMateriapollo風に

ナビゲーションバーにリンクメニューを追加します。

引用元

通常のリンクメニューとドロップダウンメニューを備えたものを見つけましたので、それを利用させていただきました。

位置調整・色調整

Materiapolloに合わせてCSSの調整をしました。Developer ToolsとにらめっこしながらできるだけMateriapollo風になるように調整しました。

/****************************************
     MODナビゲーションバー 基本 CSS
*****************************************/

  /* ナビゲーションバーメニュー */
  /* 全体設定 */

  #navigation { /*オリジナルナビゲーションバー非表示*/
    display: none;
  }
  #top-navi{
    background-color: $(brand.subcolor);
    padding:0 10px;
    opacity: 1;
    position: sticky;
    top: 0;
    z-index: 19;
  }
  #menu-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  #menu-wrapper {
    display: none;
  }
  /* メニュー内容 */
  #menu-container ul.menu-list {
    font-size: 0; /* 横方向隙間を埋める */
  }
  #menu-container ul {
    list-style: none;
　　margin-left:30%;/* Menuの開始位置 */
  }
  #menu-container li {/*Menu1以外*/
    text-decoration: none;
    text-align: center;
    padding: 0 !important;
    transition: all 0.3s ease;
    display: inline-block; /* リスト横並び */
    width: 15%; /* リスト幅サイズ */
    font-size: 14px;
    position: relative;
  }
  #menu-container li:hover { /* Menu1以外のホバー */
    background-color: $(brand.color);
  }
  #menu-container li a {/* Menu1とsubMenu */
    padding: 1em 10px;
    display: block;
    transition: all 0.3s ease;
    color: $(brand.font);/*白*/
  }
  #menu-container li a:hover { /* Menu1とsubMenuのホバー */
    background: $(brand.color);
  }
  #menu-container .menu-link{/*Menu1以外*/
    color: $(brand.font);/*白*/
    display: block;
    padding: 8px 10px;
  }
  .menu-link:after { /*Menu1以外*/
    font-family: 'Material Icons';
    content: '\e5c5';
    position: relative;
    padding-left: 0px;
    font-size: 24px;
    display: inline-flex;
  	vertical-align: middle;
  }
  #menu-container li .menu-link:hover { /*Menu1以外*/
    color :  $(brand.font);/*白*/
    transition: all 0.3s ease;
  }
  .accordion-toggle, .accordion-content {
    cursor: pointer;
    font-size: 24px;
    position: relative;
    letter-spacing: 1px;
        color: #ff0000;
  }
  .accordion-content {
    display: none;
    background-color: #aaa;
  }
  #menu-container .accordion-content li{
    width:200px;
  }
  #menu-container ul.menu-submenu {
    position: absolute;
  }
  /* open時ボタン文字 */
  .menu-link.active {
    font-weight: normal;
    background: $(brand.color);
    transition: all 0.3s ease;
        color: #ff0000;
  }
  /* ブログ内検索 */
    #menu-container li.serach{
    position: absolute;
    right: -10;
    top: 3px;
    width: 250px;
  }
  #search-box-form {
    background: #fff;
    position: relative;
  }
  #search-box-form::placeholder {
    color: $(font.light);
  }
  .search-box-text {
    width: 100%;
    height: 38px;
    border: 1px solid transparent;
    outline: none;
    background: $(brand.subcolor);
    color: $(brand.font);
    font-size: 14px;
    line-hight: 38px;
    padding: 0 5px 0 40px;
    transition: .2s;
  }
  #search-box-text:focus {
    background: $(brand.color);
  }
  .search-box-text:focus {
    background-color: $(brand.color);
    box-shadow: 0 0 6px $(other.border);
    border-color: $(other.border);
    }
  .search-box-text::placeholder {
    color:  $(brand.font);
  }
  .search-box-submit {
    /*color: var(--darkcolor);*/
    position: absolute;
    left: 2px;
    top: 5px;
    border: none;
    background: transparent;
    outline: 0;
    padding: 0;
    transition: .3s;
  }
  .search-box-submit svg {/*検索アイコン*/
    height: 2.5em;
    width: 2.5em;
    fill: $(brand.font);/*白*/
  }
  .search-box-submit svg:hover {
    fill: $(font.color);/*黒*/
  }
  .search-box-submit:hover {
   /* background: $(other.back);*/
    /*color: var(--link);*/
    cursor: pointer;
  }

  ::-webkit-search-cancel-button {
    height: 2.5em;
    width: 2.5em;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf-8,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23aaa"></path></svg>');
  }

/****************************************
    MODナビゲーションバー 基本 CSS
    スマホ画面用のカスタマイズ
*****************************************/
  @media screen and (max-width: 800px) {

  #top-navi{
    opacity: 1;
    z-index: 21;
  }
  /* メニューアイコン */
  #menu-wrapper {
    width: 30px;
    height: 30px;
    background: $(brand.color);
    color:#fff;
    text-align: center;
    position: fixed;
    right: 0;
    top: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    z-index: 20;
  }
  #menu-wrapper:hover {
    background-color: $(brand.color);
  }
  #hamburger-menu {
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #menu-button span {
    display:block;
  }
  /* メニューリスト */
  #menu-container .menu-list {
    padding-left: 0;
    display: block;
    position: fixed;
    top:60px;
    width: 100%;
    max-width: 450px;
    background: #ffffff;
    box-shadow: rgba(100,100,100,0.2) 6px 2px 10px;
    z-index: 20;
    overflow-y: auto;
    overflow-x: hidden;
    right: -100%;
  }
  #menu-container li,#menu-container li.serach {
    display: block; /* リスト縦並び */
    width: 100%; /* リストサイズ */
    font-size: 13px;
    border-top: 1px solid #dbdcd2;
  }
  #menu-container li a {
    color:#000;
  }
  #menu-container li a,#menu-container .menu-link,#search-box-form {
    padding: 13px;
    border: none;
  }
  .accordion-content {
    background-color: #fff;
  }
  #menu-container ul.menu-submenu {
    position: static;
    width:100%;
  }
  #menu-container ul {
  margin-left: 0;
    overflow: hidden;
  }
  #menu-container .accordion-content li {
    width:50%;
    float:left;
    border: none;
  }
  #menu-container .menu-link{
    color:#000;
  }
  #menu-container .menu-list li.accordion-toggle, #menu-container .menu-list, li.serach {
    border-top: 1px solid #dbdcd2;
  }
  /* 背景を黒くする */
  #menu-container .menu-back.active{
    background-color: #000000;
    opacity: .7;
    z-index: 19;
    height: 100%;
    width: 100%;
    position: fixed;
    transition: all 1s ease;
    top: 0;
    left: 0;
  }
  #menu-container li.serach{
    position: static;
  }
  #search-box-submit{
    position: static;
  }
  #search-box-text{
    width:90%;
  }
  }
/* MODナビゲーションバー 基本 CSS ---END--- */

スマホ画面でのハンバーガーアイコンを工夫

スマホ画面ではメニューアイコンにハンバーガーアイコンを使っています。スクロールさせたときには、ハンバーガーアイコンの背景があると目障りな気がしたので、背景色はなくしました。背景色がなくなると白地ベースではアイコンが見えないので、アイコン色をスクロール位置で変えるようにしました。

上で示したCSSに、次の#menu-wrapper.invertを追加しています。

#menu-wrapper.invert {
  color:$(brand.color);
}

そして、このナビゲーションバーのHTMLの下に次のようなjavascriptを書き加えました。

<!-- @media, Navi Menu 色変更 -->
<script>
  jQuery(function(){
    var logo = jQuery(&#039;#menu-wrapper&#039;);
    jQuery(window).scroll(function () {
      if (jQuery(this).scrollTop() &gt; 150) { //スクロールが150pxを越えたら
        logo.addClass(&#039;invert&#039;);
      } else { //スクロールが150pxを越えなければ
        logo.removeClass(&#039;invert&#039;);
      }
    });
  });
</script>
<!-- @media, Navi Menu 色変更 End -->

ページャをMateriapollo風に

ページャと言われるものには、「次の投稿」「前の投稿」と、「ページナビゲーション」というページ区切りを横に並べたものがあります。

前者はMateriapolloにも備わっていますので、それ風にカスタマイズしてみます。

後者は「Home」や「ラベル」を選ぶと、そのカテゴリ記事の中での枠順を示すようなものです。Materiapolloのものはホバーした時に背景色が色づくタイプです。

「次の投稿」「前の投稿」

ページナビゲーション

「次の投稿」「前の投稿」のカスタマイズ

以前に導入したもののスタイルをMateriapollo風に変更するため、引用元に対してCSSの調整を行いました。

<style>
#post-pager {/*ページャ基本設定 */
  margin-top: 2em;/*上のコンテンツとの間隔*/
  display: flex;
}
.pager-div,
.nopager-div {
  width: 100%;
  transition: .3s;
}
.prev-post {/*前ページャの位置関係*/
  margin: 0 0 0 5px;
}
.next-post {/*次ページャの位置関係*/
  margin: 0 5px 0 0;
}
.pager-link,
.no-pager-link {
  background: ;
  transition: .3s;
  width: 100%;
  height: 100%;
  display: table;
  position: relative;
}
.prev-post .pager-link,
.prev-post .no-pager-link {
  border-radius: 3px 0 0 3px;
}
.next-post .pager-link,
.next-post .no-pager-link {
  border-radius: 0 3px 3px 0;
}
.pager-div:hover {/*影アニメーションを強調*/
  filter: drop-shadow(6px 6px 4px #aaa);
}
.pager-img {/*サムネ画像を使わない*/
  display: table-cell;
  width: 0;
  vertical-align: top;
  box-sizing: border-box;
}
.pager-img img {/*サムネ画像を使わない*/
	display: none;
}
  .next-post .pager-img:before {/*次 アイコン*/
    position: absolute;
    left: -10px;
    content: &#39;\f137&#39;;
    font-family: &#39;Font Awesome 5 Free&#39;;
    font-weight: 900;
    font-size: 40px;
    color: #00bcd4;
    line-height: 0px;
     }

  .prev-post .pager-img:after {/*前 アイコン*/
    position: absolute;
    right: -10px;
    content: &#39;\f138&#39;;
    font-family: &#39;Font Awesome 5 Free&#39;;
    font-weight: 900;
    font-size: 40px;
    color: #00bcd4;
    line-height: 0px;
    }
.pager-title {/*表示スタイル*/
  display: grid;
  align-items: center;
  line-height: 1.6em;
  padding: 24px;
  font-size: .9em;
  font-weight: bold;
  color:;
  height: 96px;
  background: #FFFFFF;
      border-radius: 2px;
    border: 1px solid rgb(211,211,211);
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 30%);
}
.pager-title:hover {
color: #00bcd4;
}
.prev-post .pager-title {/*表示スタイル*/
  text-align: right;/*前の投稿は右寄せにする*/
}
.prev-post .no-pager-link .pager-title {
  padding-right: 1em;
  color: $(font.light);
}
@media (max-width: 768px) {
  #post-pager {
    flex-direction: column;
    margin-right: 10px;
  }
  .prev-post,
  .next-post {
    margin: 6px 5px;
  }
}
</style>

ページナビゲーションのカスタマイズ

上記のリンク先から引っ張ってきました。リンク先に対しての変更は色使いとホバーアニメーションの追加のみです。オリジナルのCSSはまた気が変わって元に戻すかもしれないので、コメントアウトにしておきました。

/* 前後の記事 */

/* #blog-pager{margin-top: 2em; margin-bottom: 0;}

から、

#blog-pager-older-link:hover {color: #00bcd4;} */

まで

以前のカスタマイズで、<b:include name='nextprev'/>　をコメントアウトしていましたが、これは正規に戻さないと表示ができないようでした。

完成（コピペ＋α）したものがこれです。ホバーアニメーションで背景色を変えることはできたのですが、シアン色背景のところを白文字にしたかったのですが、できていません。この数値部位と中間の"..."が同じCSS要素で表現されているので、数値を白にすると"..."が見えなくなります。

<style type="text/css">
#blog-pager {
    overflow: visible;
    font=weight: normal;
    }
.showpageOf {display:none}
span.showpagePoint {  /*選択されているページボタン*/
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .4em .8em; /*文字と線の隙間*/
    margin: 0 .2em;
    border: 1px solid #90cdce; /*線の太さ、色*/
    border-radius: 0.25em; /*線の角丸*/
    background-color: #00ACC1; /*背景色*/
    border-color: #90cdce; /*線の色 ここいるのか？*
    color: #fff; /*文字の色*/
    pointer-events: none;
}
span.showpageNum, span.showpage { /*選択されていないページボタン*/
    margin: 0 .2em;
}
.showpageNum a, .showpage a {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .4em .8em; /*文字と線の隙間*/
    background-color: #aaa; /*背景色*/
    border: 1px solid #aaa; /*線の太さ、色*/
    border-radius: 0.25em; /*線の角丸*/
    color: #fff; /*文字の色*/
    font-weight: normal;
    text-decoration: none;
}
.showpageNum a:hover, .showpage a:hover {
   background-color: #FFAB00;
   border: 1px solid #FFAB00;
}
</style>

次の対策も適応させないと「ラベル」での表示がうまくいきませんでした。

「expr:href='data:label.url'」をすべて「expr:href='data:label.url + "?&max-results=10"'」にする。

「10」は設定している投稿数にあわせる。

Blogger copyright部分の色使い

QooQのCopyrightの部分はMateriapolloのように黒系色の背景をつけました。

#copyright{
	text-align: center;
	font-size: 70%;
	margin-top: 1em;
	color: $(font.light);
	letter-spacing: 0;
	  background: #37474F;/*Materiapollo化*/
          padding-top: 15px;/*Materiapollo化*/
}