Bambi's BLOG @ hatena

ブログ運営 カスタマイズ テーマ制作 アフィリエイト いろいろ (ずぼらでも頑張るブログ)

★=== テーマ「Palette(パレット)」Q & A のページ ===★

とりあえず、作った人に聞くのが一番手っ取り早いと思いますので、Q&Aのページを作ってみました。
何か分からないことがあったらコメント欄から聞いてみてください(^-^)

初心者でも誰でもカスタマイズが超簡単な
はてなブログテーマ「Palette(パレット)」のダウンロードはこちらからどうぞ♡
↓↓
Palette (パレット) - テーマ ストア


〜質問コーナー注意事項〜

★質問はテーマ「Palette(パレット)」のCSSに関することのみ&はてなユーザーに限定させて頂きます。

★本や検索すれば、すぐに分かるような基本的なことや、逆に高度なカスタマイズに関しては、お答えできない場合もありますので、ご了承ください。

★コメント欄は、承認制になっています。(表示するかどうか私が決めます!)
重複する質問や趣旨に合わない場合は表示しないこともありますので、お気を悪くしないでくださいね^^;
★質問事項は、必要があればコメント欄ではなく、当ページで共有させて頂きます!

★お礼や応援のメッセージをくださった方へ
テーマをお使い頂き、ありがとうございます!
メッセージ、大変嬉しくまた励みになります(^-^)♡
※一旦は嬉しくて表示していたのですが、こちらはQ&A専用ページなので、非表示にさせて頂きます...申し訳ありません。
万が一、他にも応援やお礼のメッセージをくださる場合は、テーマの説明トップページに下さると幸いです♪♪(別に催促している訳ではないんですよ^^;)
↓↓
はてなブログ テーマ「Palette(パレット)」について - Bambi's BLOG @ hatena



 

はてなブログテーマ「Palette(パレット)」★ Q & A ★

 

 

ページャーの表示に関して


ページャーとは?


記事の一番下に表示される


<<次の記事      前の記事>>

のような記事の前後に移動するリンクのことを「ページャー」と言います。

SEOの面での個人的な見解ですが...(これに関しては、きちんと記事を書こうと思っていますので、ここでは簡単に説明します)
ブログは性質上、前後のつながりが余りないので自動的に前後の記事にリンクするよりも、関連記事にリンクした方が、ユーザーの興味を引きやすいと考え、このテーマでは初期設定で「ページャ」を非表示にしています。

はてなブログで予め設定されている関連記事やGoogleアドセンスの「関連コンテンツ」を表示する事をおすすめします^-^

関連記事の表示方法


[デザイン]→[カスタマイズ]→[記事]→[□関連記事を記事下に表示する]にチェックを入れる。

ページャーを表示する方法


とは言うものの、小説ブログや日記など前後の繋がりがある記事には「ページャー」を表示した方が良いと思います(^-^)

以下のコードを
[デザイン]→[カスタマイズ]→[{}デザインCSS]にコピペして頂くとページャーが表示されます!

.pager{display:block;}

 

グローバルヘッダーとグローバルナビゲーションについて


グローバルヘッダーとは?

記事の一番上に表示される[Hatena Blog~記事を書く~]などが書いてある一番上の細いバーのことを「グローバルヘッダー」と言います。
初期設定では全員に表示されるように設定されています。

グローバルナビゲーションとは?

グローバルナビゲーションは、ナビゲーションバーなどとも言われている、サイト上の案内バーのことです。こちらは、ご自身でhtmlコードをコピペしてもらうことで表示されるようになります。
やり方はこちらから↓↓
https://www.bambi.pro/entry/palette-customize-top-navigation


どちらも「グローバル」が付いていて言葉が似ているのと、当テーマではグローバルヘッダーをスクロールすると、グローバルナビゲーションが表示されるような仕様にしているので少し紛らわしいです...

グローバルヘッダーの表示をなんとかしたい!

グローバルヘッダー(HatenaBlogって方)は、はてなPROをお使いの方は非表示にする事ができます。(ちなみに私は自分が記事を書いたりする時にも便利なので、そのまま表示してます!)
グローバルヘッダー非表示のやり方やその他の基本のカスタマイズについてはこちらの記事で解説してます♪
Palette★カスタマイズ解説(1)基本の設定(全体・フォント・背景色) - Bambi's BLOG @ hatena


その他、ご質問などありましたら、コメント欄からどうぞ(^-^)



 

しつこいけど...〜注意事項〜

★質問はテーマ「Palette(パレット)」のCSSに関することのみ&はてなユーザーに限定させて頂きます。

★本や検索すれば、すぐに分かるような基本的なことや、逆に高度なカスタマイズに関しては、お答えできない場合もありますので、ご了承ください。

★コメント欄は、承認制になっています。(表示するかどうか私が決めます!)
重複する質問や趣旨に合わない場合は表示しないこともありますので、お気を悪くしないでくださいね^^;

★質問事項は、必要があればコメント欄ではなく、当ページで共有させて頂きます!



id:ooyukidaさんからの質問★
最終更新日の表示の仕方です。
当ページで利用しているものですが、sitemap.xmlから最終更新日を取得するやり方で表示速度が極端に遅いことと、Google検索の日付表示などには対応できてないみたいです。
私は専門家ではないので、動作やGoogleのSEO的なことは保証できませんので、その点はご了承の上、ご自身の判断で使ってくださいね^^;


★javascriptはこちらの記事のものを利用しました↓↓★
はてなブログの記事の最終更新日を取得 - はしくれエンジニアもどきのメモ


★CSSとjavascript↓↓★
デザイン→記事→記事下にコピペ

<style>
    .lastmod{
        margin-left: 1em;
        padding: .2em 1em;
    	background-color: #f5f5f5;
    	border-radius: .5em;
    	color: #3fc1c9;
    }
    .lastmod:before{
        font-family:"blogicon";
        content: "\f02b";
        position: relative;
        letter-spacing: .5em;
        font-size: 1em;
        color: #3fc1c9;
    }
    .date a:before{
        font-family:"blogicon";
        content: "\f024";
        position: relative;
        letter-spacing: .5em;
        font-size: .8em;
        color: #3fc1c9;
    }
</style>

<!-- 更新日を追加 -->
<script type="text/javascript">
(function(){
/*
- args: lastmod: str
*/
function addLastmod(lastmod){
  /* ここでlastmodを追加 */
  var time = document.createElement("time");
  time.setAttribute("itemprop", "dateModified");
  time.setAttribute("title", lastmod);
  time.setAttribute("datetime", lastmod);
  time.innerText=lastmod;
  var span = document.createElement("span");
  span.innerHTML = time.outerHTML;
  span.className = "lastmod";
  var date_elements = document.querySelectorAll("div.date")
  Array.prototype.map.call(date_elements, function(e){e.appendChild(span);});
}

var blog_uri = document.querySelector("[data-blog-uri]").getAttribute("data-blog-uri");
var sitemap_url = blog_uri + "sitemap.xml";
var article_url = document.querySelector('[property="og:url"]').getAttribute("content");

function fetch2str(res) {
  return res.text();
}

function str2dom(str) {
  var parser = new DOMParser();
  var dom = parser.parseFromString(str, 'text/xml');
  return dom;
}

/*
return : Promise([URL1, URL2, ...])
*/
function getSitemapURLArrayPromiseFromSitemapXML() {
  return fetch(sitemap_url)
    .then(fetch2str)
    .then(str2dom)
    .then(function(dom) {
      return Array.prototype.map.call(dom.querySelectorAll("sitemap"), function(e) {
        return e.querySelector("loc").innerHTML
      });
    });
}

/*
- return Promise([""<xml >?page=1...</xml>", "<xml >?page=2...</xml>", ...])
*/
function getXMLStrArrayPromiseFromAllSitemapURL(URL_array) {
  return Promise.all(URL_array.map(function(e) {
    return fetch(e).then(fetch2str);
  }));
}

/*
return Promise(url_element in DOMParser)
*/
function find_urlElementMatchedAtriclePromiseFromXMLStrArray(xml_str_arr) {
  var parser = new DOMParser();
  var find_url_e = undefined;
  for (var xml_str of xml_str_arr) {
    var dom = parser.parseFromString(xml_str, 'text/xml');
    var url_elements = dom.querySelectorAll("url");
    find_url_e = Array.prototype.find.call(url_elements, function(e, idx, arr) {
      return e.querySelector("loc").innerHTML === article_url;
    });
    if (find_url_e) break;
  }
  return find_url_e;
}

function getLastmodFrom_urlElement(url_element){
  return url_element.querySelector("lastmod").innerHTML;
}

try{
getSitemapURLArrayPromiseFromSitemapXML()
  .then(getXMLStrArrayPromiseFromAllSitemapURL)
  .then(find_urlElementMatchedAtriclePromiseFromXMLStrArray)
  .then(getLastmodFrom_urlElement)
  .then(addLastmod);
}catch(e){
  console.log(e);
}
}());
</script>


(自分メモ)javascript変更したところ
↓↓
【オリジナル】

span.innerHTML = "(LastModified: " + time.outerHTML + ")";

time.outerHTML(←最終更新日)だけの表示にして、CSSのclass名(className)を設定した。
↓↓
【変えたところ】

span.innerHTML = time.outerHTML;
span.className = "lastmod";