おはよーございます。
今回で最終回です。
GitHubのアカウント登録、リポジトリの作成まで終わったので、CSSをGitHubに追加してはてなブログから読み込めるようにするところになります。
CSSファイルの追加
はてなブログで読み込む用のCSSファイルを作成します。
前回の記事最後のこの画面で、AddFileを選択してCreateNewFileを選びます。
ファイル名を入力して、はてなブログに貼り付けていたCSSを貼り付けます。
画面下にスクロールするとCommit new fileというボタンがあるのでこれを押すと入力した内容が保存されます。「CSSファイルを追加」と書いてありますが、これはコミットログという、保存するときにどんなことをしたかメモとして一緒に記録しておくための機能です。この辺はあまり深くは気にせず、適当で良いと思います。
これでCSSファイルを作成することができました。
GitHubPagesの設定
お次はGitHubPagesの設定です。
Settingsというメニューを選んだあとに、左側のリストからPagesを選びます。
Sourceというところが最初Noneになっているので、mainにセットします。
mainを選択するとフォルダを選ぶ画面が出てくるのでrootを選択してSaveします。
そうすると、こんな感じでhttps://osioなんちゃらというURLが出てきます。
画面下にあるenforce httpsというのをチェックして保存しておくと、最初がhttpsになります。何もしないとhttpとなります。どちらでもアクセスはできるのですが、なんやかんやでhttpsのほうが推奨されることが多いので、enforce httpsにチェック入れて運用するほうが無難だと思います。急に雑か。
画面が突然の黒ベースになりましたが、時間帯によってダークモードに変化するというMacBookさんの設定によるものです。スクショ取り直せばいいのですが、取り直すのもアレなので、そのまま続けます😉（めんどくさがり）
ここまできたらブラウザにURLを打ち込んでみましょう
この例でいくとhttps://osio-toshimasa.github.io/test/
に先ほど作成したCSSのファイル名を末尾に追加します。こんな感じです。
https://osio-toshimasa.github.io/test/follow.css
先ほど書いたCSSがブラウザに表示されれば成功です。
ちなみにですが、説明用に作ったリポジトリを消してしまったので、上のURLを打ち込んでも表示されません。どうせなら残しておけばよかった・・。
はてなブログのデザインCSSに設定
ここまできてやっとはてなブログに戻ってきます。
デザインCSSの画面に以下の記述を追加します。
@import url("https://osio-toshimasa.github.io/test/follow.css");
そして、今まで書いていたCSSたちをデザインCSSから削除しておきましょう。
で、ブログ記事を読み込んでみて、表示が変わっていなければ無事に外部からの読み出し成功です🎉
最初すこし大変かもですが、一度覚えたら結構便利かも。
作業だけなら、１時間もあればいけると思うので、デザインCSSが溜まってきて困っている方は試してみるとよいかもです。
個人的にはこの作業しながら、別のアイデアが浮かんできたのでまた色々弄って楽しんでみようと思います。前編、中編、後編と長いことお付き合いいただきありがとうございました。
では、また！