テーマの変更手順と申しましても、私が今回やってみて『今後もこれなら変更しやすくていいな』と感じた方法です。
昨日は、ブログのデザインを「Thumbnail2」に変えたご報告をしました。
見に来てくださった方々ありがとうございます。
１週間もブログの更新を止めていたので、アクセス数も100をきって、ドキドキしちゃいました。
こういう時、検索からの流入って大切なんだな～と感じます。
今日は、テーマ変更をする際の変更手順を備忘録的に記事にしました。
次に変更する時もまた苦戦しない為に（苦笑）
私の知識でどうにかなった事ではないので、偉そうなことはもちろん言いません。
すべてブログの先輩方のおかげです。
ありがとうございます。
昨日の記事はこちら🔻
広告
テーマ変更の手順
今回のテーマ変更は、通常ははてなブログのデザインCSSのボックス内に入れるコードの内容を、オンラインストレージサービスのDropbox内にCSSファイルとして置いて、このファイルをはてなブログに直リンクすることで、カスタマイズした内容が自分のブログに適用される方法を利用しています。
くわしくは、参考にさせていただいた、はるなぴさんのブログを見てください。
はるなぴさんの外部CSSファイルの記事はこちら🔻
初心者からは難しそうに見えますが、CSSの知識のない私でもできました。
もちろんはるなぴさんのおかげです✨
外部CSSファイルを直リンクして、カスタマイズするメリットについても、はるなぴさんの記事に丁寧に書かれています。
ホントにカスタマイズが楽で感激しています！
通常の手順通り、はてなブログのデザインCSSのボックス内で、カスタマイズされるコードを入れる場合は、以下の手順の2、3、4、8は必要のない作業です。
手順 1 新しいブログを非公開で開設
今の時点で、当ブログは50記事以上になっています。
テーマ「Thumbnail2」はカード型の斬新なデザインで、いきなり適用するのは、こわすぎてチャレンジできなかったので、まずは新しいブログを非公開で作り、ここである程度カスタマイズして確認しました。
本当はこの方法ならメインブログに影響がないので、記事の更新も続けられるんですけど、まだまだ1記事3時間以上はかかるので、ここは諦めて、一時ブログ更新ストップ。
新しく作った非公開のサンプルブログで、テーマ「Thumbnail2」をインストール。
サンプルにいくつか記事や画像をアップします。
手順 2 CSSファイルを作る
私は『CSSファイルって、なんのソフトで作るの？？』という程の、初心者のところから始まっています。
単純に、Windowsのメモ帳で作れるのですね。
新規のメモ帳に、CSSのコードをいれて、ファイル名の拡張子を「.css」にしたら、DropboxでCSSファイルとして認識してくれました。
私は自分でわかるように、ファイル名を「hatenaCSS.css」にしました。
手順 3 Dropboxをダウンロード
ここでも私は「Dropboxって何？高いの？？？」というところから始まっています。
Dropboxとは、簡単に申しますと、インターネット上に写真やテキストなどのデータファイルを置いておくことができるサービスで、ネット環境があれば自由に自分のファイルにアクセスできるサービスです。
よく考えたら、私はiPhoneユーザーなので、iCloudを利用していました。
ここでやっとDropboxが、どういったものかつながりました（汗）
Dropboxのサイトはこちら🔻
Dropboxは2GBまで無料で利用できます。
新規登録しなくても、Googleアカウントでログインできました。
エクスプローラーを開くと、ダウンロードしたDropboxがあるので、自分で作ったCSSファイルをコピペしてDropbox内に置きます。
手順 4 はてなブログにDropbox内に置いたCSSファイルと直リンクする
ここからははるなぴさんの画像付きのページが大変参考になります。
はるなぴさんの直リンクの方法に関する記事はこちら🔻
カスタマイズはこのDropbox内に置いたファイルにコードを追加や削除して上書き保存すれば、すぐにサンプルブログに適用されます。
私は、直リンクをしたにもかかわらず、コピー元のCSSファイルをいじっており、「あれー、直リンクしたのに反映されないなー？？」としばらくカチカチやってました（涙)
初心者さん（私なんですけど）もう1度言います。
コードを変更するのはDropbox内に置いたCSSファイルです（汗）
手順 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」のカスタマイズした箇所は次の記事で残しておくことにします。
私と同じ、ブログ初心者の方に、多少なりとも参考になれば幸いです。
こういったデザインやカスタマイズにくわしい方には「初心者ってここでつまづくんだ！」と笑っていただけたら嬉しいです。
本日も読んでいただきありがとうございました。
広告