nono*Note: Blogger カスタマイズ覚え書き

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

・HTTPSの使用
・全記事一覧ページの作成
・記事上部にパンくずリストを設置
・人気の投稿の表示スタイル変更
・記事下の「次の投稿」「前の投稿」を変更する
・記事下の「登録: 投稿 (Atom) 」を消す
・個別ラベルページの上部の表示を消す
・ガジェットを特定ページで表示or非表示にする

■HTTPSの使用を有効にする

＊方法はこちら→「Bloggerヘルプ / ブログで HTTPS を有効にする」

恥ずかしながら、私はHTTPSついて全くもって理解しておりません。が、方々で「そうすべし！」という記事を目にしましたので、取り入れました。

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

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

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

（１）新しいページを追加して...

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

<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 記事を一覧表示するページの作成方法」

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

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

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

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

（３）その直前に、次のコードを挿入する。

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

（４）次は、以下のコードを探して...

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

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

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

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

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

（５）見た目をちょっと変えるため、以下のCSSも追加した。

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

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

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

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

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

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

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

＊参考にしたサイト→「BloggerテンプレートVaster2 |人気記事リストのタイトル･スニペット文字がはみ出るのを修正する方法[IE対応CSS]」

私のテーマは「Vaster2」ではないけど、うまくいきました。どうもありがとう。

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

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

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

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

・<&data:newerPageTitle/> →→ Newer

・<data:olderPageTitle/> →→ Older

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

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

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

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

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

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

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

その方法は「★こちら」

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

（１）テーマのHTMLを編集する。以下のコードを探して...

<b:include name='feedLinks'/>

（２）コメントアウトする。

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

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

ラベル〇〇の投稿を表示しています。すべての投稿を表示

（１）テーマのHTMLを編集する。以下のコードを探して...

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

（２）コードの前に「」を付け加えてコメントアウトする。

これにてオッケ♪

■ガジェットを特定のページのみで表示
または非表示にするコード

◇特定のページでのみ表示するコード◇

・トップページでのみ表示する

<b:if cond='data:blog.url == data:blog.homepageUrl'>
ガジェット
</b:if>

・個別記事でのみ表示する

<b:if cond='data:blog.pageType == "item"'>
ガジェット
</b:if>

・指定のページでのみ表示する

<b:if cond='data:blog.url == "指定ページのURL" '>
ガジェット
</b:if>

◇特定のページで表示しないコード◇

・トップページでのみ非表示にする

<b:if cond='data:blog.url != data:blog.homepageUrl'>
ガジェット
</b:if>

・個別記事でのみ非表示にする

<b:if cond='data:blog.pageType != "item"'>
ガジェット
</b:if>

・指定したページでのみ非表示にする

<b:if cond='data:blog.url != "指定ページのURL" '>
ガジェット
</b:if>

これを実際にやってみたら、ガジェットを囲むのができなくて苦労したぁ〜
ガジェットの中身の記述を囲まなくてもいいんだわね。。（←何もわかってない人）

囲むべきは目的のガジェットの下方にあるこの記述（↓）
これを上記の「表示」や「非表示」を指定するコードで囲めば、そのガジェットの表示を指定できる。ふぅ...。

<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

New developments in tech: cat as heat sink / brownpau

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

【nono*Note】

nono*Note

Blogger カスタマイズ覚え書き

■HTTPSの使用を有効にする

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

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

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

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

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

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

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

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

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

■ガジェットを特定のページのみで表示
または非表示にするコード

◇特定のページでのみ表示するコード◇

・トップページでのみ表示する

・個別記事でのみ表示する

・指定のページでのみ表示する

◇特定のページで表示しないコード◇

・トップページでのみ非表示にする

・個別記事でのみ非表示にする

・指定したページでのみ非表示にする

0 コメント:

Author

ラベル

月別記事

人気の記事

【nono*Note】

nono*Note

Blogger カスタマイズ 覚え書き

■HTTPSの使用を有効にする

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

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

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

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

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

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

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

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

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

■ガジェットを特定のページのみで表示または非表示にするコード

◇特定のページでのみ表示するコード◇

・トップページでのみ表示する

・個別記事でのみ表示する

・指定のページでのみ表示する

◇特定のページで表示しないコード◇

・トップページでのみ非表示にする

・個別記事でのみ非表示にする

・指定したページでのみ非表示にする

0 コメント:

Author

ラベル

月別記事

人気の記事

Blogger カスタマイズ覚え書き

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

■ガジェットを特定のページのみで表示
または非表示にするコード