バンビの初心者ブログ教室

私がブログ運営で月間10万円稼いだ方法を教えます!

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

※当ブログ内では商品広告やPRを行っております。

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

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


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

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

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

★まずはこれまでのQ&AやPalette(パレット)のサイトマップをご覧いただき、ご自身での解決を目指してください!!重複する質問やすでにカスタマイズ方法などを説明していることへの質問も多くなっています。

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

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



 

はてなブログテーマ「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)基本の設定(全体・フォント・背景色) - バンビの初心者ブログ教室


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



 

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

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

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

★まずはこれまでのQ&AやPalette(パレット)のサイトマップをご覧いただき、ご自身での解決を目指してください!!重複する質問やすでにカスタマイズ方法などを説明していることへの質問も多くなっています。

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

★時間を割いて質問を読んで、ページを拝見させてもらって、CSSの対応をしたりしていますが、すでに前にも出ている質問や単純にコピペミスだったりすることがほとんどですので、質問される前にもう一度ご確認をお願いします。

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

日付の表記について

id:ooyukidaさんからの質問★
最終更新日の表示の仕方です。
2021/11/15 - 追記
新しくjavascriptで作ったやり方を載せています。コードめちゃ短くて簡単です♪
Paletteを使っている人用のCSSコードも一緒に載せてます。
【はてなブログ】最終更新日を追加する方法(短くて簡単!コピペでOK)CSSとJavascript利用 - バンビの初心者ブログ教室


↓↓古いやり方(一応、残しておきますね)
当ページで利用しているものですが、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("datetime",lastmod);
  var lastmod = lastmod.substr(0, 10);
  time.setAttribute("last-modified-date", 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";

【更新日】の時刻(時分秒まで)が表示されてしまうのを直しました。
↓↓

  var time = document.createElement("time");
  time.setAttribute("datetime",lastmod);
  var lastmod = lastmod.substr(0, 10);
  time.setAttribute("last-modified-date", lastmod);
  time.innerText = lastmod;

目次の表記について

★えりな (id:exciting-sky) さんからの質問
目次のアイコンを変更するやり方です。

★アイコンの変更

/*== icons ==*/
ul.table-of-contents li:before
{font-family:"blogicon";
content:"\f006";/*(←アイコンは数字を変更する)*/
color:#7a443b;}/*(←色を変更する)*/

アイコンはこちらの記事の「はてなブログ」に元々備わっているものを利用しています。
↓↓
【はてなブログ】ブログアイコン、Webフォント一覧(124種類)使い方、表示されない時の対処法 - バンビの初心者ブログ教室



★ちなみに、[ もくじ ]の表記を変えたい場合は、こちら。
(デザインCSSへコピペ)

ul.g-box:before {
  content: "[  もくじ  ]"; }/*←目次の上部に表示される文字*/

目次については、以下の記事も参考にしてください。
はてなブログ目次をCSSだけで開閉式にする方法 コピペOK(目次の表示/非表示切り替え) - バンビの初心者ブログ教室
www.bambi.pro