Blogger

大幅なカスタマイズは難しい。面倒くさくなってきた。

スタイルシートでカスタマイズ

スタイルシートはテーマ→カスタマイズ→上級者向け→CSSを追加→カスタムCSSを追加で追加。

「登録: 投稿 (Atom)」を非表示に

.feed-links {display:none !important;}

「Powered by Blogger」を非表示に

#Attribution1{display: none;}

ガジェットでカスタマイズ

他で言う「ウィジェット」をBloggerでは「ガジェット」としている。ややこしい。
JQueryは、他で設定している場合は不要。

サイドバーをタブに

元ネタは「はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ」。

Cloud Flare Orange

ガジェットの一番上に

<div class="module-title2">
<span class="tab active">人気記事</span>
<span class="tab">投稿記事</span>
<span class="tab">タグ</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// サイドバータブメニュー
$(function(){
$("#PopularPosts1,#BlogArchive1,#Label1").addClass("module");
    $(".module-title2").parents("#sidebar-section").css("margin-bottom",0);
    var Module = $(".module");
    Module.hide();
    Module.first().show();
	Module.find('h2').hide();
    
    $(".tab").click(function(){
        var index = $(this).index();
        $(".tab").removeClass("active");
        $(this).addClass("active");
        $(Module).hide();
        $(Module).eq(index).show();
    });
});
</script>

スタイルシート

/*サイドバータブメニュー*/
.tab{
    display: inline-block;
    padding: 8px 15px 5px 15px;/*横に入りきらない場合はこの２番目と４番目の数字を小さく*/
    background: #f0f0f0;/*反応していないタブの背景色*/
    border-radius: 5px 5px 0 0;
    font-size: 12px;/*横に入りきらない場合はここの数字を小さく*/
    cursor: pointer;
}
.active{
    background: $(button.background);/*反応しているタブの背景色*/
    border-radius: 5px 5px 0 0;
}
.module-title2{
    border-bottom: 3px solid $(button.background);/*タブの下線*/
}

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

「前の投稿」「次の投稿」リンクを、その記事のタイトルに変更。
最初の行にあるJQueryは、他で設定している場合は不要。 これはガジェットで変更するバージョンですが、直接テンプレートを変更するやり方も後述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css"> 
#blog-pager-newer-link {font-size:100%;width:200px;text-align:left;} 
#blog-pager-older-link {font-size:100%;width:200px;text-align:right;} 
</style> 
<script type="text/javascript">
$(document).ready(function () {
    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink + " .post-title:first", function () {
        var newerLinkTitle = $("a.blog-pager-newer-link").text();
        $("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
    });
    var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink + " .post-title:first", function () {
        var olderLinkTitle = $("a.blog-pager-older-link").text();
        $("a.blog-pager-older-link").text(olderLinkTitle + " >>"); //rgt 
    });
});
</script>

テンプレートを直接変更

テンプレートを初期化

テーマを入れ替えたりしていると、中身がおかしくなってくることがあるので。
いったんバックアップを取った上で、HTMLをまるっと書き換える。

<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<b:skin></b:skin>
</head>
<body>
<b:section id='mainSection'>
<b:widget id="Blog1" type="Blog">
<b:includable id="main">
</b:includable>
</b:widget>
</b:section>
</body></html>

タイトル

SEO的にタイトルを変更。

<b:if cond='data:blog.pageType in { &quot;item&quot;,&quot;static_page&quot;} '>
  <title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>

レスポンシブデザインに

モバイル判定な場合はコンテンツを幅いっぱいに表示。

<b:if cond='data:blog.isMobile'>
  <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0' name='viewport'/>
</b:if>

URLをカノニカルURL1に。

<link expr:href='data:blog.canonicalUrl' rel='canonical'/>

?m=1（モバイル用オプション）を?m=0（PC用オプション）に。

<script type='text/javascript'>//<![CDATA[
var curl = window.location.href;if (curl.indexOf('m=1') != -1) {curl = curl.replace('m=1', 'm=0');window.location.href = curl;}
//]]></script>

CSSも、もにょもにょと。

@media screen and (max-width: 768px){
.limit-width{margin:0 auto;width:100%;overflow:hidden;}
#outer{padding:0;}
#main-outer{float:none;margin:0;}
#main{margin:0 15px;}
#forcus-category-outer{display:none;}
#header-inner{padding:0px 0;}
#header-inner h1{font-size:150%;}
.post-header h2{font-size:130%;}
.post-body iframe{width:95%;}
#upper-nav-outer{display:none;}
.index-pager .newer a, .index-pager .older a{padding:20px 20px;}
#related-post span.label{display:none;}
#footer-inner{padding:30px 0 15px 0;}
#sidebar-outer{float:none;margin:10px 0 0 0;width:100%;}
#related-post li{font-size:80%;}
fixed-social-bottons{display:none;}
img{max-width:100%; height:auto;}
}

自動「もっと読む」

長い文章の場合は要約を表示し、自動的に「もっと読む」リンクを付けるように。

…など、いろんな記事を参考にできあがったのが、これ。

シンプルテンプレートの場合には、この部分を

      <data:post.body/>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

こういうふうに変更。
文字数を100文字までと指定し、それ以下の場合は「もっと読む」リンクを付けなかったり、いろいろ。

<b:if cond='data:blog.pageType in { &quot;index&quot;,&quot; archive&quot;}'>
    <b:if cond='data:post.thumbnailUrl'>
        <div class='Image thumb'>
        <img expr:src='data:post.thumbnailUrl'/>
        </div>
    </b:if>
    <b:if cond='data:post.snippet.length &lt;= 100'>
        <data:post.body/>
        <b:if cond='data:post.hasJumpLink'>
            <div class='jump-link'>
            <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
            </div>
         </b:if>
    <b:else/>
        <b:eval expr='snippet(data:post.body, {length: 100, links: true, linebreaks: true})'/>
        <div class='jump-link'>
        <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
        </div>
    </b:if>
<b:else/>
    <data:post.body/>
</b:if>

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

先ほどガジェットバージョンを出しましたが、テンプレートを直接変更するやり方も。
Font Awesomeが使えるという前提で。
そのあたりは読み替えるか、またはこちらの記事Fontsを参照に。

ガジェット版を書いた後にGridレイアウトやCSSでFont Awesome 5を使う方法などを覚えたので、書き方や出来上がりがちょっとバージョンアップ。

CSSに追加

<b:skin>...</b:skin>の中に置いてもいいし、<style>...</style>で囲ってスクリプトの近くに置いても。
grid-areaを使っているのは、この変更をしたBloggerのテンプレートが「前の投稿」が右側、「次の投稿」が左側にあったため。

スクリプトを追加

基本的には</body>の上あたりに。
スクリプトは/*<![CDATA[*/…/*]]>*/で囲むんだそうな。

カスタマイズ保留中や削除など

保留とか削除とか不要になったのとか、いろいろ。

ラベルサーチ

元ネタはBloggerの絞り込み検索ブログパーツ「ラベルサーチ」公開！複数のラベルを使ってAND・OR・NOT検索が出来る！より。
サイドバータブは既に導入してあるので、ラベルサーチ部分だけ追加したいけど、どうにか自動でできないかなぁ。

無限スクロール

フッターなどの適当なガジェットに、HTML/JavaScriptってことで設定。

<script type='text/javascript' src='//m-misc.appspot.com/js/blogger-infinite-scrolling.js'></script>

ただし、いわゆるSEO Friendlyではない。

Vaster2をカスタマイズ

カスタマイズに疲れてきたので、シンプルなレスポンシブテンプレートを導入。
でもカスタマイズは止めないのよね。

記事の上にあるラベル

Vaster2のラベルのデザインを変えてみよう！コピペでOK！を参考にしたけど、色指定が固定だったので、変数で設定してみる。
CSSの部分だけ、こういう変更に。

.post-tag{
font-size:14px !important;
padding:1px 4px !important;
color:$(articlelist.posttag.color);
margin-top:0;
display:inline-block;
}
.taglink {
    display: inline-block;
    position: relative;
    height: 20px;/*高さ*/
    line-height: 20px;/*高さ*/
    vertical-align: middle;
    text-align: center;
    padding: 0px 10px 0 10px;/*文字の余白*/
    background: $(articlelist.posttag.color);/*背景色*/
    color: $(articlelist.posttag.font);/*文字色*/
    box-sizing: border-box;
    font-size:14px !important;
    margin: 1px;
}
a.taglink:link{color:$(articlelist.posttag.font);}
a.taglink:visited{color:$(articlelist.posttag.font);}
a.taglink:active{color:$(articlelist.posttag.font);}
a.taglink:hover{color:$(articlelist.posttag.font);background:$(articlelist.posttag.color);
}

ページナビ

SNSシェアボタン

Vaster2のSNSボタンのサイズ変更　Blogger·Vaster2カスタマイズ#13

タブレットでの表示を整える

画面が崩れていたので、サイトがタブレットの幅に合わない！レスポンシブデザインの設定をしよう！を参考に追加。

*   レスポンシブデザイン
--------------------------------------------------- */
@media only screen and (max-width:1024px)
{
.content-wrapper{
   width:auto;
   margin:0 auto;
}
#header-inner{
   width:auto;
   margin:0 auto;
}
.grobal-navi{width:auto;}
.main-outer{width:694px;}
.sidebar {width:330px;}
}

Spotify

記事への表示をカスタマイズ。横幅いっぱいに。

.post-body iframe[src*="spotify.com"] {
    width: 100% !important;
    height: 380px !important;
}

ページ一覧

              <nav class='grobal-navi'>
                <ul class='header-nav'>
                  <b:loop values='data:links' var='link'>
                    <li>
                      <!--a expr:href='data:link.href + &quot;?max-results=10&quot;'-->
                      <a expr:href='data:link.href'>
                        <data:link.title/>
                      </a>
                    </li>
                  </b:loop>
                </ul>
                </nav>

404 error

Vaster2は後述のカスタム404ページに対応してないらしい。
Bloggerテンプレート「Vaster2」で記事っぽい404ページの作り方

投稿日時

そのままだと日付しか表示されない。ガジェット側で表示設定しているのだが…
トップ・カテゴリ・アーカイブ用と、記事ページ用のこれを、

<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script></abbr>

こういうふうに編集。 <data:post.timestamp/>を追加してある。

<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script> <data:post.timestamp/></abbr>

OGP

OpenGraph for Bloggerを見ながらちょっと追加とか。

その他

自分の記事からこういうのも追加。

他にもカスタマイズ

404 Not Found.

検索ができるように。
設定→検索設定→エラーとリダイレクト→カスタム404ページに設定。

<div class='error-custom'>
<h2>404 Not Found</h2>
<p class='error-body'>ページが見つかりません。<br/>
トップページに戻るか、検索をお試しください。</p>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>
</div>

タグごとの記事一覧

How To Add Stylish Sitemap For Bloggerの通りに作ると、タグ毎にまとめられた記事一覧が。

検索で記事一覧

Blogger記事を一覧表示するページの作成方法の方法でも。

TumblrからBloggerへ

TumblrからBloggerへの引っ越しより。

  1. Tumblrに独自ドメインを設定している場合、解除
  2. Tumblr2HatenaBlogでWordPress形式でエクスポート
  3. Wordpress2BloggerでBlogger形式にエクスポート
  4. あとはBlogger側でインポート
  5. 実はこの方法、時差がおかしくなる…こだわるなら修正
  6. 元の投稿タイプによってタグが付加されてるので、修正・削除はお好みで
    • テキスト: regular
    • リンク: link
    • 音声: audio
    • 引用: quote

独自ドメインを設定

DNS設定

Bloggerからも指定されるけど、とりあえずこういう値が必要、と。

Name Type Value
@ A 216.239.32.21
@ A 216.239.34.21
@ A 216.239.36.21
@ A 216.239.38.21
www CNAME ghs.googlehosted.com
固有の値 CNAME 固有の値

独自ドメインでもHTTPS化

こんな記事を発見。
独自ドメインのBloggerでHTTPSを有効にする設定方法

マジか?

試しにhttps://draft.blogger.com/を開いてみたら、本当にあった…

テスト用やら何やらで3つの独自ドメインでBloggerを運用しているのだが、ほぼテーマを弄っていないブログが一番先に対応できるように。
記事数はメインブログと同じなので、カスタマイズされっぷりで違ってくるかも?

設定→ユーザー設定→BloggerDraftを使用する、ってこれのことだったのか… 新しもの好きとしてはこれからこっちの方でいろいろ遊んでみる。

Algoliaで全文検索

Algoliaの設定

…の設定は、Algoliaを参照。

index取得
  1. まずはGoogle API Keyへ（要ログイン）
  2. APIライブラリからBlogger API v3を探して、有効にする
  3. ダッシュボードの認証情報からAPIキーを作成
  4. キーを制限する(HTTPリファラーでbloggerアドレスのみを設定)
  5. <head>内から呼び出し 
    <script src='https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js'/>
  6. 取得用のスクリプト
    • Blogger APIキー
    • BloggerID（ダッシュボードの上にblogIDがある）
    • AlgoliaのアプリIDとAPIキーとindex名
  7. Bloggerサイトをリロードすると、Algoliaにデータが流れ込んでくる
	var apiUrl = BASE_URL + BLOG_ID + '/posts?&orderBy=published&key=' + API_KEY;			// 初回のみ
	//var apiUrl = BASE_URL + BLOG_ID + '/posts?&maxResults=5&orderBy=published&key=' + API_KEY;	// 以降は新しい記事5件だけ

…の部分は、初回だけ全件取得し、以降はコメントアウトして&maxResults=5付きのAPI urlにしておかないと、ブログを見るたびに全データ更新してしまい、エラい事になります。ってか、なりました。
テストしている間に、AlgoliaのFreeで使える限度の半分まで使ってしまった…あと27日あるのに(　= =) 遠い目

この記事群がかなり参考になったというか、土台にした。

本当ならhtml入りの本文からうまく検索できそうだけど、正規表現でhtmlタグを抜いた文章をインデックスに放り込むことにした。

検索

まずは呼び出し系。

<script src='https://cdn.jsdelivr.net/npm/instantsearch.js@1/dist/instantsearch.min.js'/>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css' rel='stylesheet' type='text/css'/>
<script src='https://cdn.jsdelivr.net/npm/[email protected]'/>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css' rel='stylesheet' type='text/css'/>

検索のスクリプト。

で、検索窓を置きたいところに、PC用と、

<input id='algolia-search' type='text'/>

モバイル用をそれぞれ置く。

<input id='algolia-search-mobile' type='text'/>

id指定はもちろん、class指定でも検索窓は複数置けないので、PCとモバイル用にそれぞれ置いてある。

CSSで装飾

あとは見た目を整えたりいろいろお好みで。
テーマはVaster2を使っているので、色は変数設定で。

.ais-hits div {
  margin: 15px 0;
}
.ais-hits__empty div {
  margin: 15px 0;
}
.ais-hits--item div {
  margin: 15px 0;
}
.ais-hits--item a {
  color: $(popular.color);
}
.ais-hits--item em {
  color: $(popular.color.hover);
  font-weight: bold;
  font-style: normal;
}
.ais-pagination--link a:not(.ais-pagination--item__active) {
  color: $(pager.color);
  background: $(pager.background);
}
.ais-pagination--item__active {
  color: $(pager.color.hover) !important;
  background: $(pager.background.hover) !important;
}

  1. 重複したURLを統合するとかいろいろ参照。 ↩