過ぎし子育ての日々はほぼ笑い話

放っておきたいのに、放っておけない。憎たらしいのに何よりも大切。他人の子のしぐさはほほ笑ましいのに、わが子はハラハラ。まだまだ子育て真っ最中。その場は怒って泣いてと激しいですが、振り返れば笑い話。心配性なアラフォーシングルマザーが子供たちと格闘する日々をつづった雑記ブログです。あと、趣味のイラストを少々。

はてなブログのスムーズなテーマ変更手順を書いてみました。これで次もバッチリ!

テーマの変更手順と申しましても、私が今回やってみて『今後もこれなら変更しやすくていいな』と感じた方法です。

昨日は、ブログのデザインを「Thumbnail2」に変えたご報告をしました。
見に来てくださった方々ありがとうございます。

1週間もブログの更新を止めていたので、アクセス数も100をきって、ドキドキしちゃいました。
こういう時、検索からの流入って大切なんだな~と感じます。

今日は、テーマ変更をする際の変更手順を備忘録的に記事にしました。
次に変更する時もまた苦戦しない為に(苦笑)

私の知識でどうにかなった事ではないので、偉そうなことはもちろん言いません。
すべてブログの先輩方のおかげです。
ありがとうございます。

昨日の記事はこちら🔻

www.hobowarai.com

はてなブログのテーマ変更手順のイラスト1

広告
 

 

テーマ変更の手順

今回のテーマ変更は、通常ははてなブログのデザインCSSのボックス内に入れるコードの内容を、オンラインストレージサービスのDropbox内にCSSファイルとして置いて、このファイルをはてなブログに直リンクすることで、カスタマイズした内容が自分のブログに適用される方法を利用しています。

くわしくは、参考にさせていただいた、はるなぴさんのブログを見てください。
はるなぴさんの外部CSSファイルの記事はこちら🔻

www.halu7.com

初心者からは難しそうに見えますが、CSSの知識のない私でもできました。
もちろんはるなぴさんのおかげです✨

外部CSSファイルを直リンクして、カスタマイズするメリットについても、はるなぴさんの記事に丁寧に書かれています。

ホントにカスタマイズが楽で感激しています!

通常の手順通り、はてなブログのデザインCSSのボックス内で、カスタマイズされるコードを入れる場合は、以下の手順の2、3、4、8は必要のない作業です。

手順 1 新しいブログを非公開で開設

今の時点で、当ブログは50記事以上になっています。

テーマ「Thumbnail2」はカード型の斬新なデザインで、いきなり適用するのは、こわすぎてチャレンジできなかったので、まずは新しいブログを非公開で作り、ここである程度カスタマイズして確認しました。

本当はこの方法ならメインブログに影響がないので、記事の更新も続けられるんですけど、まだまだ1記事3時間以上はかかるので、ここは諦めて、一時ブログ更新ストップ。

新しく作った非公開のサンプルブログで、テーマ「Thumbnail2」をインストール。

サンプルにいくつか記事や画像をアップします。

手順 2 CSSファイルを作る

私は『CSSファイルって、なんのソフトで作るの??』という程の、初心者のところから始まっています。
単純に、Windowsのメモ帳で作れるのですね。

新規のメモ帳に、CSSのコードをいれて、ファイル名の拡張子を「.css」にしたら、DropboxCSSファイルとして認識してくれました。
私は自分でわかるように、ファイル名を「hatenaCSS.css」にしました。

手順 3 Dropboxをダウンロード

ここでも私は「Dropboxって何?高いの???」というところから始まっています。

Dropboxとは、簡単に申しますと、インターネット上に写真やテキストなどのデータファイルを置いておくことができるサービスで、ネット環境があれば自由に自分のファイルにアクセスできるサービスです。

よく考えたら、私はiPhoneユーザーなので、iCloudを利用していました。
ここでやっとDropboxが、どういったものかつながりました(汗)

Dropboxのサイトはこちら🔻

www.dropbox.com

Dropboxは2GBまで無料で利用できます。
新規登録しなくても、Googleアカウントでログインできました。

エクスプローラーを開くと、ダウンロードしたDropboxがあるので、自分で作ったCSSファイルをコピペしてDropbox内に置きます。

手順 4 はてなブログDropbox内に置いたCSSファイルと直リンクする

ここからははるなぴさんの画像付きのページが大変参考になります。
はるなぴさんの直リンクの方法に関する記事はこちら🔻

www.halu7.com

 

カスタマイズはこのDropbox内に置いたファイルにコードを追加や削除して上書き保存すれば、すぐにサンプルブログに適用されます。

私は、直リンクをしたにもかかわらず、コピー元のCSSファイルをいじっており、「あれー、直リンクしたのに反映されないなー??」としばらくカチカチやってました(涙)

初心者さん(私なんですけど)もう1度言います。
コードを変更するのはDropbox内に置いたCSSファイルです(汗)

はてなブログのテーマ変更手順のイラスト2

手順 5 外部CSSファイルでカスタマイズ

無事に直リンクできたら、非公開のサンプルブログで、カスタマイズを散々ためして自分のイメージに近づけました。
たまに公開設定を「すべて公開」にして、他の複数の端末で見た目をチェック。

手順 6 メインブログのバックアップ

デザインCSSは、テーマを変更すると破壊されますが、ヘッダやフッタに入れたHTMLのコードはそのまま残ります。
念のため、それぞれメモ帳などでバックアップをとりました。

手順 7 メインブログでテーマの変更をして、ヘッダとフッタのHTMLをコピペする

いよいよメインブログでテーマの変更の時です。

すでに非公開のサンプルブログで、テーマをダウンロードしてあるので、ダッシュボード→デザインのダウンロードしたテーマから「Thumbnail2」を選びます。

テーマの変更ができたら、デザインの設定から、ヘッダとフッタのHTMLのボックスに、サンプルブログで入れた、HTMLのコードをコピペします。
グローバルメニューや、トップに戻るボタンのコードが多いのかな?

はてなブログの通常のデザインCSSで、カスタマイズしている場合は、ここのコードもメインサイトのデザインCSSのボックスにコピペします。

手順 8 メインブログにDropboxに置いたCSSファイルを直リンクする

ダッシュボードの設定→詳細設定の「headに要素を追加」のボックスに、サンプルブログでカスタマイズしたDropboxに置いたCSSファイルのリンクを貼ります。
※この時点で、2つのブログの両方に、同じ直リンクのURLが「headに要素を追加」に入っている事になります。

手順 9 微調整して完成!!

サンプルブログとは記事数が違うので、もう少し微調整をして完成!
メインブログをいじっての変更時間は10分もかかりませんでした。

最後に

はてなブログのProだと、ブログが10個まで開設できますよね。
『そんなにたくさん必要なの??』と思っていましたが、開設しても非表示にできるので、こういった使い方も有効だと思いました。


「Thumbnail2」のカスタマイズした箇所は次の記事で残しておくことにします。

私と同じ、ブログ初心者の方に、多少なりとも参考になれば幸いです。
こういったデザインやカスタマイズにくわしい方には「初心者ってここでつまづくんだ!」と笑っていただけたら嬉しいです。

本日も読んでいただきありがとうございました。

広告