ぷちゅ的

工業高校生ですが何か?

【はてなブログ】GitHubPageからCSSを読み込むと管理が楽になるぞ!

【スポンサーリンク】

f:id:ktrw3200:20171107004016j:plain

どうもぷちゅんです。

 実はこのブログの「デザインCSS」なのですが...

 

f:id:ktrw3200:20171107003201p:plain

 

このように、なにも書き込んでないんですよね。

 

これは、もとのテーマから全くカスタマイズしていない訳ではなく、このブログでは他のところからCSSのファイルを読み込ませるようにしているのです。

 

外部からファイルを読み込むサービスは色々あるのですが、このブログで利用しているのは "GitHub Pages" です。

 

 

 

GitHubPagesを使うメリット

無料で使える

f:id:ktrw3200:20171109230545j:plain

GitHubPagesはGitHubのアカウントを取得すれば、誰でも無料で利用することができます。

さらに、GitHubPages専用ドメイン.github.ioも無料で付いてきます。

わざわざサーバー借りて...ドメイン取得して...ってしなくても、誰でも簡単に使い始めることができます。

 

高性能

f:id:ktrw3200:20171109230559j:plain

無料だから、使える機能とか制限されるんじゃないの??って思うじゃないですか。

実はそうでも無いんですよ。

ダウンロード速度もかなり速いので、ブログの読み込み速度を気にしている方にも持って来いのサービスです。

さらに、今問題視されつつある「https」ですが、なんとGitHubPagesでは対応しています

無料でこんなに高性能なら、使うしか無いですよね~!

管理が楽

f:id:ktrw3200:20171109230618j:plain

もともとGitHubはプログラムコードなどを公開や共有、保存するサービスですから、CSSなどのコードの編集ツールなどは、はてなブログのデザイン編集機能と比べ、かなり使いやすいです。

さらに、GitHubで作成したファイルは、編集しても、変更履歴が残るので、誤ってコードを書き間違えて上書き保存してしまっても、編集履歴から前のデータを復元することができちゃいます。

 

GitHubPagesを使うデメリット

反映に時間がかかる

GitHubで作成/編集したデータですが、GitHubPagesに反映するまでに多少時間がかかります。時間によっては、タイムラグがなく、すぐに反映されることもありますが、長いときでは5分ほど経ってから反映されるときもあります。

 GitHubのサーバーが落ちると、ファイルが読み込まれない

もし、GitHubのサーバーが落ちていたり、メンテナンスで繋がらなくなると、ファイルを読み取ることができないので、ブログのCSS等をGitHubから読み込んでいる場合、ブログのデザインがおかしくなったりしてしまいます。

GitHubPagesを使おう!

これだけメリットを紹介すれば、すこしでも使って見ようって気になったでしょ!

では、実際に使う手順を教えます。

※画像(スクリーンショット)はクリックで拡大します。

 ※GitHubを全く触ったことない人でも理解できるように難しい言葉には説明を付けています。

 

まず、GitHubのアカウントを持っていない方は作成しておいてください。以下のページのSignUpからアカウントを作成することができます。

Join GitHub · GitHub

 

もう、アカウントを持ってるよって方はGitHubにアクセスし早速作業開始です。

レポジトリ*の作成

GitHubのトップページ (https://github.com) を開きます。

 

f:id:ktrw3200:20171106233500p:plain

右上の+の右側の下三角からNew repositoryを選びます。

*repository(レポジトリ): ファイルの保管場所のこと。ここにCSSのファイルなどを突っ込んでいくよ!

 

f:id:ktrw3200:20171106233729p:plain

新規レポジトリの設定画面が開くので、Repository nameに[ユーザー名].ioと入力します。

僕のアカウントのユーザー名は"puchutech"だから「puchutech.io」と入力することになりますね。

 

f:id:ktrw3200:20171106234323p:plain

他には特に設定を変える必要なないので、そのままCreating repository...をクリックしてください。

 

f:id:ktrw3200:20171106234509p:plain

このようなページが表示されますが、書いてあることをする必要はないので、見なかったことにします。

 

GitHubPagesの有効化

f:id:ktrw3200:20171106234731p:plain

GitHubPagesの設定をするためにSettingを選択し、設定画面を開きます。

 

f:id:ktrw3200:20171106234916p:plain

「GitHub Pages」の項目にあるChoose a themeをクリックします。

 

f:id:ktrw3200:20171106235031p:plain

様々なテーマから好きなものを選ぶことができますが、今回の作業には関係ないので、特にデフォルトのままで、Select themeをクリックしてください。

 

f:id:ktrw3200:20171106235235p:plain

GitHubPagesのファイルが生成されますが、特にこれを変更する必要はないので、Commit changes*をクリックします。

*commit(コミット): 作業を確定するという意味。「commit changes」で変更を確定するという意味になる。

 

f:id:ktrw3200:20171106235511p:plain

2つのファイルが生成されていたらOKです。

もう一度Settingをクリックして設定画面を開きます。

 

f:id:ktrw3200:20171106235752p:plain

GitHubPagesの項目をみると、「You site is publish* at ~」となっているので、そこのリンクをクリックします。

*publish(パブリッシュ): ここでは、ファイルを公開し、外部から閲覧・利用できるようにすることを意味する。

 

f:id:ktrw3200:20171107000252p:plain

リンクをクリックし、このようなページが表示されていれば、GitHubPagesの設定は完了です。

設定完了を確認できたら、このページから戻って構いません。

 

CSSファイルの作成

f:id:ktrw3200:20171107000731p:plain

設定は終了したので、Codeをクリックし、次は、CSSのファイルを作成してみましょう。

 

f:id:ktrw3200:20171107000839p:plain

Create new fileをクリックし、新規ファイルを作成します。

 

f:id:ktrw3200:20171107000950p:plain

エディター画面が開くので、まず、ファイルの名前にstyle.css*と入力しておきます。

*.css[拡張子]: CSSのファイルの拡張子には.cssを付けます。他にも、japvscriptなら.jsと付けたりします。

 

f:id:ktrw3200:20171107001317p:plain

このように、CSSのコードを入力していきます。

 

f:id:ktrw3200:20171107001505p:plain

入力し終わったら、Commit new fileをクリックします。

 

f:id:ktrw3200:20171107002001p:plain

先程作成したファイルが表示されています。

 

CSSファイルを読み込む

まず、先程作成したファイルがアクセスできるかどうかチェックします。

https://[ユーザー名].github.io/[ユーザー名].io/style.css

とブラウザのアドレスバーに入力してみます。

 

f:id:ktrw3200:20171107002512p:plain

先程作成したstyle.cssの中身が表示されていれば、読み込みの準備は出来ています。

表示されない場合は、少し時間を置いてから、チェックしてみましょう。

 

f:id:ktrw3200:20171107002734p:plain

はてなブログの ダッシュボード>設定>詳細設定 の「headに要素を追加」に

<link rel="stylesheet" type="text/css" href="https://[ユーザー名].github.io/[ユーザー名].io/style.css">

と追加しておきます。

 

これで、GitHub上の「style.css」がはてなブログで読み込まれるようになります。

 

編集後記

GitHubPagesいかがでしたでしょうか?

GitHubのファイルはスマホからでも操作できるので、スマホからブログをカスタマイズすることもできます。

それより日本語でGitHub使いたい...