2018/08/31

Blogger 記事下のページナビを個別ページでのみ記事タイトルにする

〔Posted:2018/08/31〕
“ネコ”このまえ記事にしたBloggerカスタマイズの「記事下の『次の投稿』『前の投稿』を変更する」を、新たに、トップページやアーカイブページ では前後の記事を「Older / Newer」と、そして個別ページでのみ「記事タイトル」を表示されるように変更した。



■Bloggerのページナビ(「次の投稿」「前の投稿」)を、全体ページでは「Older /Newer」、個別ページでは「記事タイトル」を表示する方法


(1)以下のコードをテーマのHTML編集で</body>の手前に貼り付ける。

<!-- set next prev page title start -->
<script type='text/javascript'>
//<![CDATA[
<!--
(function () {

// --- Util ---

// JavaScript動的挿入
function addScript(src) {

var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute("src", src);

header_setChild(script);
}

// <head>取得
function getHeader() {
return document.getElementsByTagName("head")[0];
}

// <head>に子要素を追加
function header_setChild(child) {
var head = getHeader();
head.appendChild(child);
}


// --- Main ---

// 前の投稿の要素が存在したら、タイトル設定
var prev_page_link_obj = document.getElementById("Blog1_blog-pager-older-link");
if (prev_page_link_obj) {
var prev_page_link_url = prev_page_link_obj.getAttribute("href");
addPageTitleFromFeed("blog-pager-older-link", prev_page_link_url, "addPrevPageTitle");
}

// 次の投稿の要素が存在したら、タイトル設定
var next_page_link_obj = document.getElementById("Blog1_blog-pager-newer-link");
if (next_page_link_obj) {
var next_page_link_url = next_page_link_obj.getAttribute("href");
addPageTitleFromFeed("blog-pager-newer-link", next_page_link_url, "addNextPageTitle");
}


/*
ページのタイトルをフィードから取得し、対象のオブジェクトへ追加する

ins_obj_id : 対象のオブジェクトの id
page_url : タイトルをフィードから取得するページの URL
callback : フィードのデータを取得するためのコールバック
*/
function addPageTitleFromFeed(ins_obj_id, page_url, callback) {

if (!ins_obj_id) return;
if (!page_url) return;
if (page_url.indexOf("?") != -1) return; // クエリ文字列が含まれているURLは対象外


// Feed の path に指定する URL を作成
var home_url = location.protocol + "//" + location.hostname + "/"; // ブログのホームの URL
var page_url_remove_home = page_url.replace(home_url, ""); // ブログのホームの URLを除いた、タイトルをフィードから取得するページの URL
if (!page_url_remove_home) return; // 対象とするページのURLが無い場合は対象外
page_url_remove_home = "/" + page_url_remove_home;


// ページタイトルの挿入先を事前に生成
var div = document.createElement("div");
var title_obj_id = ins_obj_id + "-title";
div.innerHTML = "<a href=\"" + page_url + "\" id=\"" + title_obj_id + "\">" + "now loading..." + "</a>";


var obj = document.getElementById(ins_obj_id);
if (!obj) return;
obj.appendChild(div);


// フィードを取得し、コールバック
addScript(home_url + "feeds/posts/summary?alt=json-in-script&callback=" + callback + "&max-results=1&path=" + page_url_remove_home + "&redirect=false");
}

})();

/*
前の投稿のページタイトルを設定する
data : コールバックで渡される Feed のデータ
*/
function addPrevPageTitle(data) {
addPageTitle(data, "blog-pager-older-link-title");
}

/*
次の投稿のページタイトルを設定する
data : コールバックで渡される Feed のデータ
*/
function addNextPageTitle(data) {
addPageTitle(data, "blog-pager-newer-link-title");
}

/*
ページのタイトルを設定する
data : コールバックで渡される Feed のデータ
id : タイトルの設定先
*/
function addPageTitle(data, id) {

// ページのタイトルを取得
var title = "";
if (data.feed.entry) {
if (data.feed.entry.length > 0) {
title = escapeHTML(data.feed.entry[0].title.$t);
}
}

// ページのタイトルを設定
var obj = document.getElementById(id);
if (!obj) return;
obj.innerHTML = title;


// テキストをエスケープ処理する
function escapeHTML(html) {

var div = document.createElement("div");
if (div.innerText !== void 0) div.innerText = html; // innerText が定義されていれば innerText へ設定
else div.textContent = html; // Firefox のように innerText がないブラウザ向け

return div.innerHTML;
}
}
//-->
//]]>
</script>
<!-- set next prev page title end -->



(2)このままでは長いタイトルの時にしっちゃかめっちゃかなので、以下の記述を追加。(赤い文字が追加した記述。それ以外は元からある)

#blog-pager-newer-link {
float: left;
font-size:90%;
width:200px;

}

#blog-pager-older-link {
float: right;
font-size:90%;
width:200px;

}


 これで出来上がり。こんなふうに表示されるようになった♪↓
blogger_pager-link



 *お世話になったサイトはこちら↓
  Dr.ウーパのコンピュータ備忘録
  Blogger:「次の投稿・前の投稿」にページタイトルを付与する-Feedから情報取得




Tabby cat / malfet_

8月ももう終わり。今年の3分の2が終わってしまう。
いい加減にブログをいじるのはやめて(マルッとコピペしてるだけだけど...)、人生の終い(仕舞い)仕度を進めなくちゃ。


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

▲TOPへ戻る▲

Categories: ,

0 コメント: