2019-05-04

【はてなブログ】注目記事はフッタに表示するのがいいかもしれない【アクセスアップ】

はてなブログ技術

はてなブログでは、サイドバーで簡単に別の記事への導線を作れます。

ですが、私のサイトでは、サイドバーはあまり使われていないようでした。

( ˃ ˄ ˂̥̥ )

やること

注目記事をフッタに表示します。

なぜ？

読者の多くは、いま開いている記事を読みたくて訪問してくれています。
- 別の記事を紹介するのは、記事を読み終えたときが良いと考えました。
読者の多くは、上から下に向かってスクロールしながら記事を読みます。
- 記事の横（サイドバー）にあっても、目線に入らないと考えました。
関連記事は、新しい記事で表示されないことが多かったです。
- 私のアクセスはほとんどが新しい記事なので、この仕様が辛かったです。

やったこと

好きなところに注目記事を表示できるテンプレートを作りました。

この方法は、2カラムや 3カラムに設定している方におすすめです。

注目記事を表示するには、以下を貼り付けます。

<div class="hatena-module hatena-module-entries-access-ranking"
  data-count="5"
  data-display_entry_category="0"
  data-display_entry_image="1"
  data-display_entry_image_size_width="24"
  data-display_entry_image_size_height="24"
  data-display_entry_body_length="0"
  data-display_entry_date="0"
  data-display_bookmark_count="1"
>
<div class="hatena-module-title">注目記事</div>
<div class="hatena-module-body"></div>
</div>

見た目を整えて、フッタに表示しました。

デザインを変更する場合は、次の3つを追加します。

data-enable_customize_format 属性に 1を設定する
data-customize_format 属性にカスタマイズ用のhtml/cssを書きます。
style 属性にカスタマイズ用のcssを書きます。

フッタに貼り付けたコードがこちらです。

<div class="hatena-module hatena-module-entries-access-ranking"
  data-count="5"
  data-display_entry_category="0"
  data-display_entry_image="1"
  data-display_entry_image_size_width="24"
  data-display_entry_image_size_height="24"
  data-display_entry_body_length="0"
  data-display_entry_date="0"
  data-display_bookmark_count="1"
  data-enable_customize_format="1"
  data-customize_format="<div style='display:flex;align-items:center;'><a href='{Permalink}'><div style='border:1px solid rgba(0,0,0,0.32);border-radius:40px;width:80px;height:80px;opacity:0.94;margin-top:8px;margin-bottom:8px;'><img src='{ImageURL}' alt='{Title}' class='urllist-image' style='padding:8px;border-radius:40px;width:64px;height:64px;'></div></a><div style='padding-left: 16px;'><div class='urllist-date-link'><a href='{Permalink}'><time>{Date}</time></a></div><a href='{Permalink}' class='urllist-title-link'>{Title}</a>{BookmarkCount}<div class='urllist-categories-link'>{CategoryLinks}</div></div></div>"
  style="max-width: 1000px; margin: 0 auto; padding-left: 30px; padding-right: 30px;"
>
<div class="hatena-module-title">注目記事</div>
<div class="hatena-module-body"></div>
</div>

まだ設置から 1日ですが、直帰率が 6.6% 良くなりました (ง⁎˃ ᵕ ˂ )ง⁾⁾
_{（測定した期間が短いので、ほかの影響かもしれません。けど、うれしい！）}

よろしければ、試してみてください ₍๐•ᴗ•๐₎✧

読んでくれて、ありがとうございます！

おわり

2019-05-03

【ねこ】チョコさんがにーちゃん大好きになるまで

ねこシアンチョコ

1日目からかも？(ﾉ)･ω･(ヾ)

チョコさんがきたころの話です。

邂逅（かいこう）

思いがけない出会い。

やばい生物に遭遇した顔になってます。

f:id:herrscherinnen:20190503113037j:plain

1日目

すぐに慣れる。

しっぽを追いかける ( ๑╹ω╹๑ )

f:id:herrscherinnen:20190503113045j:plain

2日目

べったりになる。

電池が切れるまでロックオン ( ๑╹ω╹๑ )

f:id:herrscherinnen:20190503113039j:plain

3日目

シアンさん、すみっこで眠ろうとする。

気づけば、いる ( ๑╹ω╹๑ )

f:id:herrscherinnen:20190503113043j:plain

4日目

シアンさんのほうがゲージに入りたがる。

とうぜん、チョコさんもきます ( ๑╹ω╹๑ )

f:id:herrscherinnen:20190503113051j:plain

チョコさんの満足げなこの顔 ꉂꉂ(ᵒƐ ᵒ ๑)

そんなこんなで、やや迷惑そうなシアンさんですが、

いまも仲良くやってます (๑• ㅁ• ๑)✧

今日も、ありがとうございました ٩(ˊᗜˋ*)و

おわり

追記：シアンさんがきた頃はこんなでした。

よければ、見てください ⁎ˇ◡ˇ⁎

h-s-hige.hateblo.jp

2019-05-02

【おすすめ】ブログに Instagram の画像を表示する方法【超かんたん】

はてなブログ技術

Instagram とは

かんたんには、写真や動画を撮影、加工して、共有できるSNSです。

公式はこちらです。

www.instagram.com

ブログに表示したい

これはいくつかのプラグインやサービスがあります。

その中でも、今回は手軽さを重要視して、こちらを使います。

instawidget.net

メリット

メリットを紹介します。

この InstaWidget は、ほかのサービスによくある

ログインが必要
会員登録が必要
https に対応していない

といった、煩わしい部分をすべてカットできます。

サイトでコードを生成して、貼るだけです (⁎˃ᴗ˂⁎)

デメリット

もちろん、デメリットもあります。

画像のリンク先が InstaWidget になる
CSS でのカスタマイズが難しい

_{気づいたのはこのぐらいです( ´•ᴗ•ก)}

手順

InstaWiget を開きます
早速使ってみる を押して次の画面に移ります
フォームに入力し、プレビュー を押してコードを生成します
好きなところに貼ります
- サイドバーがおすすめです ٩(•ᴗ• ٩)

気になるフォームの画面はこちらです。

f:id:herrscherinnen:20190502213935p:plain

めちゃくちゃ多いということもなく、簡単でした。

あとは貼るだけで、とてもお手軽です (◍•ڡ•◍)

おわり

今日もありがとうございました ٩(ˊᗜˋ*)و

2019-05-02

【アイスコーヒー】お手ごろ価格をおすすめします。

食べ物メモ

こんにちは。

みなさま、連休を楽しんでいらっしゃいますか？

気温が安定せず、アイスコーヒーの出番も増えてきました。

今日はアイスコーヒーについてです。

アイスコーヒー

アイスコーヒーは、アイスコーヒー用に焙煎したコーヒー豆を使います。

コーヒーを抽出したあと、氷などで急激に冷やします。

詳しくはこちらです。

ja.wikipedia.org

どうして？

コーヒーには、体温を上げる働きと下げる働きがあります。

!!!!=͟͟͞͞(๑ò◊ó ﾉ)ﾉ

（実はあまり気にしたことはありませんでした。）

詳しくはこちらです。

perfect-coffee.info

体質によっては、涼をとりやすい飲み物になります。

夏の暑さに勝てるように、準備しておきたい一品です ♪

快適な夏にしましょう

f:id:herrscherinnen:20190502110522j:plain

今日もありがとうございました ٩(ˊᗜˋ*)و

2019-05-01

【ねこ】軟便難民だったころを、さらっと振り返る【フードジプシー】

ねこシアンチョコ

シアンさんとチョコさんのご飯がきました (◍•ڡ•◍)
２人とも、なんの袋かわかっているようです。

f:id:herrscherinnen:20190501132140j:plain

写真を撮っているときも、まわりをウロウロ ٩(•ᴗ• ٩)

お食事の紹介
- _{ハッピーキャットセンシティブカニンヘン(ラビット&ビーフ)
  
  穀物不使用全猫種成猫-高齢猫用 4kg}
- _{アニモンダキャットフォムファインステンデラックス
  
  アダルトグレインフリー 1.75kg}

いまはいろんなご飯を食べられます (｡･-･｡)♪

不耐性のおはなし

昔はシアンさんもチョコさんも食べ物の不耐性がありました。

_{お米、トウモロコシ、ジャガイモ、サツマイモ、キャッサバ、etc...}

ほとんどのフードに、食べられないものが入っています ↷( ó╻ò)

それになかなか気づけずに、つらい思いをさせました ( ˃ ˄ ˂̥̥ )
（病院では解決せず、かなり通わせてしまいました。）

なにがおきたか

軟便が続き、通院を続けた結果、慢性腸症との診断でした。
（原因がわからないときに、こう分類されるそうです。）

4か月ぐらい、通院しました ( ˃ ˄ ˂̥̥ )
胃腸専門で10年以上やっている先生でも、
残念ながら快方に向かいませんでした。

なにをしたか

食べ物を見直しました。
_{（遠地の有名な獣医師の先生に助言をいただきながら）}

最終的に、これに変えてから元気に過ごせました ✧⁺⸜( •̥௰•̥ )⸝⁺✧

_{【K9ナチュラル】フィーラインナチュラルフリーズドライ　チキン＆ラム}

原材料がすごい

ドッグフードでは 90% 以上、
キャットフードでは 99% 以上が、
肉類で占められています。

詳しくはこのページの画像がわかりやすいです。

www.green-dog.com

他に、K9 ナチュラルの公式ページはこちらです。

いまでは、小さいころの不耐性も落ち着いてきて、
食べられるご飯の種類も増えてきています ((࿀꒡꒳꒡)/

おわり

今日もありがとうございました ٩(ˊᗜˋ*)و

2019-05-01

【ねこ写真】元気に育ってくれてありがとう【平成→令和】

ねこシアンチョコ

Cyan

f:id:herrscherinnen:20190430232422j:plain

f:id:herrscherinnen:20190327062940j:plain

f:id:herrscherinnen:20190426001013j:plain

Choco

f:id:herrscherinnen:20190430232431j:plain

f:id:herrscherinnen:20190326123838j:plain

f:id:herrscherinnen:20190405214607j:plain

２にゃんとも、令和もよろしくね ( ˙꒳˙ )✧

f:id:herrscherinnen:20190331182259j:plain

ありがとう ٩(ˊᗜˋ*)و

2019-04-30

【JavaScript】jQurey を使わずに 404 Not found のページを変更する方法

はてなブログ技術 javascript

404 Not found とは

ざっくりな説明だと、ページが見つからないときのエラーのことです。

詳しくはこちらです。

HTTP 404 - Wikipedia

はてなブログでは、エラーが起きた時の専用ページが用意されています。

記事が見つからないときにメッセージが表示されます。

ブログの記事が増えてくると、記事を整理することがあります。

例えば、

記事を統合して、新しい記事にする
記事を変更して、カスタムURLに変更する
記事を削除してしまう

こんなとき、Yahoo! や Google の検索結果やほかの記事に貼られたリンクは、整理前の記事を指しています ↷( ó╻ò)

はてなブログが準備してくれている、標準のメッセージでは、
どうやって記事を探してよいかはわかりません。
_{（ブログによって方法が違うので、仕方ないです）}

また、2行のメッセージなので、ほとんど真っ白のページになってしまいます。

やること

わかりやすいメッセージにする

目的の記事を見つけやすくする

やったこと

ブログ管理画面から、
デザイン > カスタマイズ > ヘッダ > タイトル下のところに、コードを書きました。

ペタリと貼っても使えます。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if(document.querySelector('#main-inner').getElementsByClassName('no-entry').length === 0){
      return;
    }
    var ec = document.querySelector('.entry-content');
    if(!ec){
      return;
    }
    var h1s = ec.getElementsByTagName('h1');
    var ps = ec.getElementsByTagName('p');
    h1 = h1s && h1s[0];
    p = ps && ps[0];
    if(!(h1 && p)){
      return;
    }

    h1.innerText = 'Not Found  ↷( ó╻ò)\nお探しの記事を見つけられませんでした';
    p.innerText = '一時的にアクセスできない状況にあるか、\n移動、または、削除された可能性があります。\n\nおすすめ記事 または トップページからお探しください。\nサイドバーの検索も利用できます。';

    var h2 = document.createElement('h2');
    h2.appendChild(document.createTextNode("おすすめ記事"));
    ec.appendChild(h2);

    var hatena_module = document.createElement('div');
    hatena_module.setAttribute('class', 'hatena-module hatena-module-entries-access-ranking');
    hatena_module.setAttribute('data-count', '10');
    hatena_module.setAttribute('data-display_entry_category', '1');
    hatena_module.setAttribute('data-display_entry_image', '1');
    hatena_module.setAttribute('data-display_entry_image_size_width', '160');
    hatena_module.setAttribute('data-display_entry_image_size_height', '160');
    hatena_module.setAttribute('data-display_entry_body_length', '0');
    hatena_module.setAttribute('data-display_entry_date', '1');
    hatena_module.setAttribute('data-display_bookmark_count', '1');
    hatena_module.setAttribute('data-source', 'access');

    var hatena_module_body = document.createElement('div');
    hatena_module_body.setAttribute('class', 'hatena-module-body');
    hatena_module.appendChild(hatena_module_body);

    ec.appendChild(hatena_module);
    
    var footer = document.createElement('p');
    footer.appendChild(document.createTextNode("ありがとうございました(｡>ㅅ<｡)"));
    ec.appendChild(footer);
  });
</script>

文字やパラメータを変更すれば、
自分のブログに合わせてカスタマイズもできます ٩(•ᴗ• ٩)

成果物はこちら

存在しないurlなら何でも大丈夫ですが、せっかくなので、404を。

https://h-s-hige.hateblo.jp/404

f:id:herrscherinnen:20190430125558p:plain

平成もまもなく終わりですね、残された平成を楽しみます！

令和の前に、ブログをメンテナンスできてよかった ( ˙꒳˙ )

今日もありがとうございました ٩(ˊᗜˋ*)و

やること

注目記事 を フッタ に 表示します。

なぜ？

やったこと

好きなところに 注目記事 を表示できるテンプレートを作りました。

見た目を整えて、フッタに表示しました。

邂逅（かいこう）

1日目

2日目

3日目

4日目

追記： シアンさん がきた頃はこんなでした。

Instagram とは

ブログに表示したい

メリット

デメリット

手順

アイスコーヒー

おすすめ

どうして？

快適な夏にしましょう

不耐性のおはなし

なにがおきたか

なにをしたか

原材料が すごい

Cyan

Choco

404 Not found とは

やること

わかりやすいメッセージにする

おすすめ記事を載せる

やったこと

成果物はこちら

注目記事をフッタに表示します。

好きなところに注目記事を表示できるテンプレートを作りました。

追記：シアンさんがきた頃はこんなでした。

原材料がすごい