Blogger用テンプレートを「QooQ」に変更、カスタマイズ例

2019年4月14日日曜日

Blogger

t f B! P L

シンプルで速い!という日本語Blogger用テンプレートQooQを自分のBlogデザインに適用してみました。

キッカケは、最近、Twitterでフォローした闇に生きる方の呟きです!

「これ、本当に良いなぁ…」というのが所感です。
「何が?」とかツッコまれてもあれですが、スパゲッティ状態になっていた自分のBlogにとってはいいスパイスになりました。

まさに「シンプル イズ ベスト」なテンプレートです!

そんな感じで気に入っているわけですが、そのまま使うのもあれなので、若干、カスタムして使用しています。

以下、QooQバージョンアップ後にも設定する項目も含めての覚え書きです。

■ HTMLの編集


「テーマ」→「HTMLの編集」でheadタグ内に下記を追記。

<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>

ヘッダーCSS部分のフォントサイズを下記のように変更。

#header-title{
font-size: 110%;  → 150%
font-weight: bold;

パンくずリストCSS部分に下記を追記。

font-weight: bold;

bodyタグ内最下段に下記を追記。

<div class='pagetop'>PAGE TOP</div>

■ カスタム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;
}

※ ↑は QooQ v1.26の設定値、v1.21以前の上に戻るボタン関連の数値は、bottom、right、font-size: 1.0rem、width: 9.0rem、height、line-height、border-radius: 3.3rem(12/26追記)

■ その他の設定項目


・ページリストの再設定。
・記事下のラベル表記を「下段ラベル非表示」に変更。
・テーマデザイナーで色を変更。

■ 参考ブログ記事


スクロールしながら戻る、「上に戻るボタン」を設置する方法
QooQカスタマイズ:続!人気の投稿ガジェットの区切り線をつける方法
bloggerカスタマイズ!記事中に目立つ囲いをつくる!


以上!

QooQ

PAGE TOP