たぬき猫マロン

大怪我を負った保護猫の記録と働く主婦の雑記ブログ

【初心者向け】はてなブログ デザインテーマカスタマイズ その1《準備編》

アクセスありがとうございます。

マロニーです。

 

今回ブログをリニューアルしました!

 

デザインテーマを変更しました!

f:id:marondiary:20200531001005p:plain

ブログアイコンも変更しました!

いつも読んでくださってる方は既にお気づきかと思いますが、今回ガラッとデザインを変更してみました!

 

ついでにブログアイコンも変更しましたよ。

 

今まではマロンの写真をブログアイコンに使ってたのですが全く目立たなかったので、ヘッダーのタイトル画像と同じにしてみました。

 

これではてなスターの小さい表示でも少し目立つようになったかなぁ?

 

デザイン変更の理由

はてなブログを始めて7ヵ月。

 

毎日みなさまのブログを読ませていただいて、レベルの高い記事を読んだりデザインセンスの良いブログに感心したり。

 

私の前のデザインは見やすくてかわいくて素敵なデザインなのですが、なんか私に合っていないなとずっと違和感を感じていて…。

 

いつかは自分のブログも手直ししたなと思っていました。

 

でもカスタマイズって難しそうだし、記事を書く、はてなブロガーさんの記事を読むということだけで時間がなかなか取れず先送りにしていました。

 

きっかけは最近、読者のみなさまがブクマを付けてくださるおかげで、割と高確率ではてなブックマークの新着エントリーに載せていただくことが増えて、PV数が少し増えてきたのです!

 

みなさまのおかげです!

どうもありがとうございます!

(そんな大っぴらに言うほどのPV数ではないのですが(^-^;でも嬉しい\(^o^)/)

 

たくさんの方に見ていただけるのならば、自分が納得したデザインにしたいなと思い、頑張ってカスタマイズしてみました!

 

先人のご意見を参考にしながら、webデザインなんかやったことのないど素人の私でもある程度のカスタマイズはできましたので、今後私のカスタマイズ方法を記事にしていきたいと思っています。

 

まず今回はその1として準備編をお伝えします。

 

デザインテーマ選び

f:id:marondiary:20200603165604j:plain

変更前のデザインテーマ

今までのテーマは『Natully』を利用していました。

blog.hatena.ne.jp 

タイトルがピンクメインでかわいらしい感じのデザインテーマ。

 

ブログを立ち上げた当初は猫ブログ1本で行こうと思っていたので、かわいらしい方がいいかなと思ったのですが、すぐに猫だけではネタが尽きて今は雑記ブログとなりました。

 

仕事関係のシリアスな内容も書いていたりするので、なんだか記事とデザインが合っていないなと思っていました。

 

変更後のデザインテーマ

今回私が選んだのは『Minimalism』。

f:id:marondiary:20200603153604p:plain

人気No.1の人気テーマです。

 

前は「人と同じなんてつならない!シンプルすぎる!」

と思っていたのですが、

シンプルで人気=カスタマイズしやすい。

ググれば情報がたくさん出てきます。

 

そしてあまり凝ったテーマで記事が壊れてしまうのも怖かった。

 

実際少し表示がおかしいところもありますが、徐々に記事のリライトも含めて修正していくつもりです。

 

ということでMinimalismを選択しました。

 

ピンクのかわいい感じから、緑を基調としたシンプルなデザインになりましたよ。

ガラッとシンプルになったので寂しい気もしますが。

結構気に入っています^ ^

 

ちょっとモバイル(スマホ)のヘッダーが小さいのが気に入らないとこだけど、そのうち直します^_^;

 

 

デザインテーマ変更の前に注意すること

f:id:marondiary:20200603165735p:plain

バックアップは必ず取りましょう

まずは、バックアップを必ず取ることを忘れないようにしてくださいね。

 

ダッシュボード

デザイン

スパナのマーク

一番下のデザインcssをクリックして全選択しコピー

メモ帳などのテキストファイルに貼り付けて保存しておきましょう。

 

テスト用にブログを新規で取得しよう 

はてなブログは複数のブログを作ることができます。

無料版で3つ、有料版で10つまで。

 

いきなりのデザインテーマを変更してカスタマイズはかなり厳しいので、テスト用ブログで試してから変更をしましょう。

 

ダッシュボードのマイブログのバーの左下に『新しいブログを作成』と青字で書いてああるので、そこをクリックすると作成できます。

テスト用とわかるタイトルにしましょう。

公開の範囲を『自分のみ』に限定することを忘れずに!

 

 

メインブログの内容をエクスポートする

①設定

②詳細設定

f:id:marondiary:20200603162611p:plain

③下の方にスクロールすると『エクスポート』があります。

青字の『記事のバックアップと製本サービス』をクリック。

f:id:marondiary:20200603163139p:plain

④下の画像では完了後になっていますが、その前段階で「〇〇〇(ブログ名)をエクスポートする」という青いバーがあるのでそれをクリックすると、テキストデータがはき出されます。

f:id:marondiary:20200603162703p:plain

⑤『ダウンロードする』をクリックすると、ご自分のPCの指定の場所にダウンロードされます。

 

これでエクスポートが完成です。

 

※テーマ変更でなくても、定期的にバックアップを取っておくと安心ですね。

 

テスト用ブログに今までの内容をインポートする 

ダッシュボード

①インポート

②『ブログデータをアップロード』の『ファイルを選択』で先ほどPCにエクスポートしたファイルを指定

③『文字コード選択へ進む』をクリック

f:id:marondiary:20200603164755p:plain

④文字コードは一番上の『utf-8』を選択し『インポート』。

これで新しいテスト用ブログにインポートされました。

 

さあ、この作業が終わったら早速テスト用ブログをテーマストアで新しいデザインテーマに変更していきましょう。

 

デザインを変更する前の準備

デザインcssのバックアップを取る

テスト用のブログを新規で作る

今の内容のデータを移しておく

 

はてなブログのデザインテーマカスタマイズ その1《準備編》はここまでです。

その2~もわかりやすく記事を書いていきますね。

 

いやー、こだわるときりがない。まだ納得してないところもあるが…。沼だな。疲れた(*_*;

 

 

今日のにゃんこ♪マロンコーナー

最近暑くなってきましたね。

もうちょっと首元マフラー抜けると思ったんだけどな。

 

暑そう(;´д`)

マロンも早くリニューアルしようよぉ。

 

地下室は割と涼しいので、最近は地下の階段でよく涼んでいます。

f:id:marondiary:20200603205924j:image
f:id:marondiary:20200603205927j:image

留守中の冷房問題、真剣に考えなければ。

 

 

今日も最後までお付き合いいただきありがとうございました。

 今後とも新生たぬき猫マロンをよろしくお願いいたします!

 

 

にほんブログ村 猫ブログへ
にほんブログ村  

 

にほんブログ村 主婦日記ブログへ
にほんブログ村