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

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

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

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

QooQの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化*/
}

まとめ

パッと見！Materiapolloにできました。細部の課題はヒントを掴んだら変更するつもりです。

その都度手を加えているので、もし見てくれている方がいればその時の見かけが変わっているかもしれません。

QooQをMateriapollo風に改装してみた