ブログの保存方法

お久しぶりです。あしゅりんく管理人です。

今回は乃木坂46の公式ブログの保存方法について書いていきたと思います。

目次

乃木坂46公式ブログについて

乃木坂46のメンバーは在籍中にブログを書いてくれます。

加入からずっとたくさんブログを書いてくれるんです♪

ただ、卒業されるとブログもクローズされるんです。

推しが綴った文字を残したいと思う方も多いんではないでしょうか?

私も残したいなと思っています。

なので私なりにベストなブログの残し方を書いておきます。

保存方法

乃木坂46オフィシャルサイトは2022年にリニューアルされました。

その際にページ保存(win:ctrl+s/mac:cmd+s)してパソコンからローカルで見ても動かなくなってしまいました。

細かく言うとスクロールできない状態ですね。

それを治す?スクロールできるようにする方法を紹介します。

1.ブログのダウンロード

保存したいブログをブラウザで開いてページ保存(win:ctrl+s/mac:cmd+s)します。

・保存時指定の名前.html(例:あしゅりんく.html)

・保存時指定の名前_files(例:あしゅりんく_files)

上記2つのファイルがダウンロードされると思います。

これでブログのダウンロードは完了です。

試しにダウンロードしたhtmlファイル(保存時指定の名前.html)をブラウザで開いてみてください。

保存したブログの画面が表示されると思います。ただ、スクロールできませんよね😢

これをスクロールして見れるようにしていきます。

2.見れるようにする方法

テキストエディターでhtmlファイル(保存時指定の名前.html)を開きます。

なんかたくさんコードが書いてあると思いますが、変更するところは1行なのでご安心ください。

肝心の変更する行ですが、232行目あたりにこのコードがあると思います。

231:<div class="b--gh" id="js-gh" style="height: 15648px;"></div>
232:<div class="b--wrap" id="js-wrap" aria-live="polite">

見つけたら少し変更します。

231:<div class="b--gh" id="js-gh" style="height: 15648px;"></div>
232:<!-- <div class="b--wrap" id="js-wrap" aria-live="polite"> -->

上記のような感じで232行目をコメント化または削除します。

<!-- 両端をこのようにすることでコメント化することができます。 -->

これで修正完了です!

変更したファイルを保存(win:ctrl+s/mac:cmd+s)してブラウザで確認してみてください。(リロードお忘れなく!)

画面がスクロールできるようになってブログを読めるようになったと思います。

ここまでで見れるようにするところまでできました。

基本的にはここで終了です。3.</div>の閉じタグは気になる人用です。

3.</div>の閉じタグ

お気付きの方もいるかと思いますが、「<div>の開始タグだけコメント化 or 削除して大丈夫?」という方。

先に言うと「現状問題なし」というのが答えです。

気になる方は修正しておこう程度です。

修正方法は「</div>」をコメント化 or 削除です。

肝心な「</div>」の場所ですが、これはブログによって行数が違うため何行目という指定はできないのです。

「</div>」の探し方

  1. 「</main>」を探してください。(最大行数から406引いた行数あたり)
  2. 「</main>」から2つ目の「</div>」が対応する閉じタグです。
  3. 見つけた「</div>」をコメント化 or 削除

以上!

これで閉じタグは解決です!

しておくと良さそうなこと

  • 保存するフォルダを決めておく
  • 保存する際の命名規則
  • タイトルと日付と画像名のメモをとっておく
  • htmlファイルのリンクを修正する

保存するフォルダを決めておく

たくさんブログを保存するので保存先を決めておくと管理しやすくなります。

保存する際の命名規則

ブログを保存するとデフォルトはタイトルで保存されると思います。それだといつのブログとかまぁいろいろ不便なのかなと。(あくまで個人の感想です)

なので「日付で名前をつけて保存」「古い or 新しい順に番号で保存」など単純で分かりやすいものがいいと思います。おすすめは古い順の連番で保存です。理由は後ほど。

タイトルと日付と画像名のメモをとっておく

これはブログを管理するのにあった方が管理しやすいのと後々ブログ一覧ページを作ることを考えている方はあると役立つと思います。なので基本的にはなくて大丈夫かなと思います。

htmlファイルのリンクを修正する

ブログには「前のブログ」と「次のブログ」へのリンクがあります。これを修正しておくと後日見る際に利便性が上がると思います。

修正方法は見れるようにする方法と似ています

<div class="bd--hn__pn _p">
  <a class="bd--hn__a hv--op" href="https://www.nogizaka46.com/s/n46/diary/detail/・・・/MEMBER">
    <p class="bd--hn__tx f--head">前の記事</p>
  </a>
</div>
<div class="bd--hn__pn _n">
  <a class="bd--hn__a hv--op" href="https://www.nogizaka46.com/s/n46/diary/detail/・・・/MEMBER">
    <p class="bd--hn__tx f--head">次の記事</p>
  </a>
</div>

250〜260行目あたりに上記のようなコードがあると思います。

<div class="bd--hn__pn _p">
  <a class="bd--hn__a hv--op" href="前のブログへのリンク">         ←ここ!
    <p class="bd--hn__tx f--head">前の記事</p>
  </a>
</div>
<div class="bd--hn__pn _n">
  <a class="bd--hn__a hv--op" href="次のブログへのリンク">         ←ここ!
    <p class="bd--hn__tx f--head">次の記事</p>
  </a>
</div>

「ここ!」と書いてある行が変更箇所です。

ここで役立つのが「保存する際の命名規則」で紹介したファイル名です。私がおすすめした「古い順の連番で保存」だと楽になります。

例えば古いブログから3つめのブログを「3」で保存したとします。すると

<div class="bd--hn__pn _p">
  <a class="bd--hn__a hv--op" href="2.html">         ←ここ!
    <p class="bd--hn__tx f--head">前の記事</p>
  </a>
</div>
<div class="bd--hn__pn _n">
  <a class="bd--hn__a hv--op" href="4.html">         ←ここ!
    <p class="bd--hn__tx f--head">次の記事</p>
  </a>
</div>

上記のような単純で管理しやすいコードで済みます。分かりやすいでしょ?^_^

これが「古い順の連番」をおすすめする理由です。

あとはブログ本文終わり直後にあるリンクも同様に修正しておきましょう!

ブログ内容によって行数が違うので具体的な行数は指定できませんが、修正箇所はブログ本文終了直後にあります。

<a class="m--pnv__a m--fic hv--op" href="https://www.nogizaka46.com/s/n46/diary/detail/・・・/MEMBER" aria-label="Prev">

上記から8行先

<a class="m--pnv__a m--fic hv--op" href="https://www.nogizaka46.com/s/n46/diary/detail/・・・/MEMBER" aria-label="Next">

上2つを適当なファイル名(2.htmlなど)に直します。

以上でhtmlファイルのリンクを修正完了しました。

出会ったバグ

所々表示されていない箇所や反応しないボタンがありますがこれは仕方ないのかなと。

ここではブログをダウンロードする際に起こったバグです。

・ブログの文章直下にある前後のブログタイトルが表示されない。

これは割と頻繁に起こるバグです。

対策としてはダウンロードする前に下までスクロールしてからダウンロードすることです。これで防げると思います。

解決方法は再度ダウンロードし直すのが一番早いと思います。

・ブログの文章が途中から表示される。

これは数回起こったバグなんですが、理由は不明です。これも解決方法は再度ダウンロードし直すのが一番早いと思います。

・上の乃木坂46ロゴ周辺が表示されずデザインが崩れる。

ダウンロードする際にバグったのかコードを修正している間にバグったのか不明ですがこれも解決方法は再度ダウンロードし直すのが一番早いと思います。

おわり

たくさんブログがあるとめんどくさいかもしれませんが後々のことを考えるとやっておくといいかなと思って紹介してみました。修正しないと動かない箇所もありますがそれ以外は強制するものではないので自分に合った方法を選択ください!

わかりにくい点や提案等ございましたらご相談ください。TwitterのDMやお問い合わせから対応いたします。