シンプルで速い！という日本語Blogger用テンプレート「QooQ」を自分のBlogデザインに適用してみました。
キッカケは、最近、Twitterでフォローした闇に生きる方の呟きです！
「これ、本当に良いなぁ…」というのが所感です。
「何が？」とかツッコまれてもあれですが、スパゲッティ状態になっていた自分のBlogにとってはいいスパイスになりました。
まさに「シンプル イズ ベスト」なテンプレートです！
そんな感じで気に入っているわけですが、そのまま使うのもあれなので、若干、カスタムして使用しています。
以下、QooQバージョンアップ後にも設定する項目も含めての覚え書きです。
HTMLの編集
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 100;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.pagetop').fadeIn(duration);
} else {
jQuery('.pagetop').fadeOut(duration);
}
});
jQuery('.pagetop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<script>
jQuery(document).ready(function() {
var offset = 100;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.pagetop').fadeIn(duration);
} else {
jQuery('.pagetop').fadeOut(duration);
}
});
jQuery('.pagetop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
ヘッダーCSS部分のフォントサイズを下記のように変更。
#header-title{
font-size: 110%; → 150%
font-weight: bold;
font-size: 110%; → 150%
font-weight: bold;
パンくずリストCSS部分に下記を追記。
font-weight: bold;
bodyタグ内最下段に下記を追記。
<div class='pagetop'>PAGE TOP</div>
<img class='list-item-img'>タグに loading='lazy' オプションを追記。
<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, "2:1")' loading='lazy'/>
記事一覧の .list-item{ } 内に下記を追記。
box-shadow: 3px 3px 5px -2px #aaa;
記事一覧部分に下記を追記。
.list-item:hover {
box-shadow: 5px 5px 5px 3px #aaa;
}
box-shadow: 5px 5px 5px 3px #aaa;
}
カスタムCSSの追加
「カスタム」→「Blogger テーマ デザイナー」→「上級者向け」→「CSSを追加」でCSS部分に下記を追記。
/* 上に戻るボタン */
.pagetop {
color: #fff;
background-color: rgba(0,0,0,0.3);
text-decoration: none;
display: none;
position: fixed;
bottom: 2.0rem;
right: 2.0rem;
font-size: 1.8rem;
width: 15.0rem;
height: 5.5rem;
line-height: 5.5rem;
border-radius: 5.5rem;
text-align: center;
cursor: pointer;
}
.pagetop:hover {
color: #fff !important;
background-color: #ed702b;
text-decoration: none;
}
/* サイドバー背景色透過、タイトル下に破線追加 */
#sub-content .widget{
background-color: rgba(225,225,225,0);
}
#sub-content .widget h2{
background-color: rgba(225,225,225,0);
color: rgba(0,0,0,1);
border-bottom : dashed 3px black;
}
/* 人気の投稿に区切り線を追加 */
.PopularPosts li {
border-bottom :dashed 1px grey;
}
.PopularPosts .item-thumbnail{
margin-bottom: 0;
}
/* 統計ウィジェット右寄せ */
.Stats {
text-align: right;
}
.Stats h2 {
text-align: left;
}
/* 記事中の囲い */
.kakoi {
padding : 1em;
border : solid 3px #6495ed;
border-radius : 3px;
box-shadow : 2px 2px 2px 0 #bbbbbb;
}
.pagetop {
color: #fff;
background-color: rgba(0,0,0,0.3);
text-decoration: none;
display: none;
position: fixed;
bottom: 2.0rem;
right: 2.0rem;
font-size: 1.8rem;
width: 15.0rem;
height: 5.5rem;
line-height: 5.5rem;
border-radius: 5.5rem;
text-align: center;
cursor: pointer;
}
.pagetop:hover {
color: #fff !important;
background-color: #ed702b;
text-decoration: none;
}
/* サイドバー背景色透過、タイトル下に破線追加 */
#sub-content .widget{
background-color: rgba(225,225,225,0);
}
#sub-content .widget h2{
background-color: rgba(225,225,225,0);
color: rgba(0,0,0,1);
border-bottom : dashed 3px black;
}
/* 人気の投稿に区切り線を追加 */
.PopularPosts li {
border-bottom :dashed 1px grey;
}
.PopularPosts .item-thumbnail{
margin-bottom: 0;
}
/* 記事中の囲い */
.kakoi {
padding : 1em;
border : solid 3px #6495ed;
border-radius : 3px;
box-shadow : 2px 2px 2px 0 #bbbbbb;
}
※ ↑は QooQ v1.26の設定値、v1.21以前の上に戻るボタン関連の数値は、bottom、right、font-size: 1.0rem、width: 9.0rem、height、line-height、border-radius: 3.3rem（12/26追記）
その他の設定項目
・ページリストの再設定。・記事下のラベル表記を「下段ラベル非表示」に変更。
・テーマデザイナーで色を変更。（最背景色 #f6f5f5 → #ffffff に変更他）
・関連記事のデザイン変更（参考ブログ記事参照）
参考ブログ記事
・スクロールしながら戻る、「上に戻るボタン」を設置する方法・QooQカスタマイズ：続！人気の投稿ガジェットの区切り線をつける方法
・bloggerカスタマイズ！記事中に目立つ囲いをつくる！
・ネイティブ Lazyload を導入してみた
・【QooQ】関連記事ウィジェットのデザインカスタマイズ
以上！