2018/08/25

Blogger カスタマイズ 覚え書き

〔Posted:2018/08/25〕
“ネコ”Bloggerで行ったいろいろカスタマイズをメモっておく。
ずいぶん時間もかかって苦労した...つもりだったけど、こうして書き出してみたら、大したことやってないやん。。







■HTTPSの使用を有効にする


 *方法はこちら→「Bloggerヘルプ / ブログで HTTPS を有効にする
恥ずかしながら、私はHTTPSついて全くもって理解しておりません。が、方々で「そうすべし!」という記事を目にしましたので、取り入れました。

しかし、HTTP化以降、それまで問題のなかったスクリプトがほとんど動かなくなってしまい、往生しました。スクリプトの URL書き換えで対処できるという情報が多数ありましたが、それもうまくいかず、結局新たに機能するものを探しました。(当然のことかもしれませんが、アドレスがHTTPSで始まるサイトから拝借したスクリプトが問題なく動きました)

..というわけで、新たに取り入れる場合は注意が必要です。



■全記事一覧ページの作成


(1)新しいページを追加して...

(2)投稿欄に次のコードを貼り付け、タイトルをつけて保存する。

<script type="text/javascript">
var POSTSTOC_SETTINGS = {"blogURL":"nono-note.xyz(*ブログURL)","sort":{"key":"published","order":"default"},"printby":"title"}
</script>
<link rel="stylesheet" type="text/css" href="//garafu.github.io/blogger.toc/release/latest/simple.css" />
<script type="text/javascript" src="//garafu.github.io/blogger.toc/release/latest/blogger.toc.min.js"></script>

*記入するブログURLに「https://」や「www」は必要ない。


 *作成したページはこちら。→「全ての記事
 *参照サイト→「Blogger 記事 を 一覧 表示 する ページ の 作成方法




■記事上部にパンくずリストを設置


(1)テーマのHTMLを編集するので、まずバックアップを取っておく。


(2)Bloggerの操作画面「テーマ」にて「HTML の編集」をクリックしてソースを表示し、以下のコードを検索する。

<b:include data='top' name='status-message'/>


(3)その直前に、次のコードを挿入する。

<b:include data='posts' name='breadcrumb'/>


(4)次は、以下のコードを探して...

<b:includable id='main' var='top'>


(5)その直前に以下の長〜いコードを貼り付ける。テーマを保存して、ブログにパンくずリストが表示しているかどうか確認する。

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span><b>Category</b>: <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>


(5)見た目をちょっと変えるため、以下のCSSも追加した。

.breadcrumbs {
background-color: #f7f5ed;
margin: 0 0 11px 0;
color: #5e88b8;
font-style: italic;
}


 *お世話になったサイトはこちら↓
  「Bloggerにパンくずリストを入れてユーザーとSEOに優しくする方法

ページTOPにもどる



■人気の投稿(Popular Post)のスタイルを変更


(1)Bloggerの管理画面「レイアウト」で「ガジェットを追加」から『人気の投稿』を追加し、ガジェットの各種項目を設定してから保存しておく。

(2)ガジェットがどのように表示されているかを確認する。そして「テーマ」の編集で以下を追加した。(バックアップを取ることを忘れずに!)

.PopularPosts .item-snippet {
overflow: hidden; /* はみ出た部分を表示しない */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size:10px;
line-height:1.3em; /* 1行の高さ */
margin: 0;

display: block; /* pをボックス要素に */
height: 3.9em; /* 2行分の高さ */
}


 *参考にしたサイト→「BloggerテンプレートVaster2 |人気記事リストのタイトル・スニペット文字がはみ出るのを修正する方法[IE対応CSS]
私のテーマは「Vaster2」ではないけど、うまくいきました。どうもありがとう。



■記事下の「次の投稿」「前の投稿」を変更する

「次の投稿」「前の投稿」という表示、ものわかりの悪い(つまりバカ)私にはどちらが新しいのかよくわからんので表示を変える。
以下の「A」と「B」2通りの方法、どちらも簡単です。

A.「次の投稿」を「Older」、「前の投稿」を「Newer」へと変更


 テーマのHTMLを編集する。以下のコードをみつけてそれぞれ変更する方法。

  ・<&data:newerPageTitle/> →→ Newer

  ・<data:olderPageTitle/> →→ Older

  ・<data:homeMsg/> →→ HOME(これもついでに..)




B.「次の投稿」「前の投稿」を記事タイトルに変更する方法


(1)レイアウトのページで「HTML / JavaScript」のガジェットを追加する。
(2)コンテンツ欄に以下のコードを貼り付けて保存。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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>

(3)ガジェットを「mainblogsec」の下へ移動して『配置を保存』する。


 *お世話になったサイトはこちら↓
 「Blogger「次の投稿」と「前の投稿」を記事タイトルに(超簡単)


- - -《追記》- - -
後日、トップページでは「Newer / Older」と表示、そして記事の個別ページでのみ「記事タイトル」が表示されるように変更しました。
その方法は「★こちら

ページTOPにもどる



■記事下の「登録: 投稿 (Atom) 」を消す


(1)テーマのHTMLを編集する。以下のコードを探して...

<b:include name='feedLinks'/>


(2)コメントアウトする。

<!-- <b:include name='feedLinks'/> -->




■ラベル別ページの上部の表示を消す


個別ラベルのページを表示すると記事の上部にこういうの↓が表示されるが、とっても!ダサいので表示されないようにします。。
ラベル 〇〇 の投稿を表示しています。 すべての投稿を表示



(1)テーマのHTMLを編集する。以下のコードを探して...

<b:include data='top' name='status-message'/>


(2)コードの前に「<!--」、後方に「-->」を付け加えてコメントアウトする。

<!-- <b:include data='top' name='status-message'/> -->

 これにてオッケ♪




Cat / bartlettbee

お世話になりながらこういうこと言っちゃいけないけど、ブロガーって、ちょっと扱いにくい。いろいろカスタマイズするならやっぱりwordpressの方が断然便利だと思う。
だったらwordpressやってろよって話なんだけどね。(^ ^;)


ランキングに参加しています。
にほんブログ村 ライフスタイルブログ 一人暮らしへ

▲TOPへ戻る▲

Categories: ,

0 コメント: