nofanの日記

ー初心者DIYと日々の日記ー

テーマの変更を実践して、スッキリな見た目にしてみた

はてなブログのテーマ変更。

1年前の始めた状態から、見出しやナビゲーションバーの追加など、CSSで試していましたが、今回、

初めてテーマ変更をやってみました

シンプルな「Silence」(クリックすると、制作者のページにいきます)

ずっと、デフォルトの「smooth」で頑張ってましたが、デザインテーマを使えば、お手軽に色々とできたんですね・・・。しかも、ナビゲーションバーやシェアボタンなども、URLを入れたりするだけでCSSやHTMLに張り付けるコードまで作ってくれるようにしてくれてる超親切設計!!

ありがたいですね~。

テーマ変更する際に、今までのCSSやHTMLが残るのか?それともリセットされるのか?不明だったので、CSSの編集をする際に作ったテストブログで試しました。

自分が行った手順です

記事のエクスポート(バックアップ)を実行

ダッシュボード→設定→詳細設定→「エクスポート」

です。

特に難しくもなく、手順通りに行えばOKです。

テストブログに本ブログの記事をインポート

ダッシュボード→インポート→ブログデータのアップロード→文字コード選択

「文字コードの選択」が目立っているので、先にクリックしてしまいますが、まずはインポートする「ファイルの選択」でファイルを選んでから、文字コード選択です。

これで本ブログの記事がテストブログにコピーされました。

記事をインポートする必要は無いのですが、今までの記事がどういった感じで見えるのかを確認したかったのでインポートしました。

テストブログで編集したCSS・HTMLのバックアップ

テーマを変更した際に、CSSやHTMLがどうなるのか不明だったのでメモ帳に張り付けて、もとに戻せる準備をします。

また、新テーマに変更したときに、今までの編集したCSSなどを添削した時の表示の仕方を確認するためです。

新テーマを選択して「変更を保存する」

一瞬にして変わりました。

見た目が新しくなると、気分も新たになりますね。

肝心の今までのHTMLやCSSは消えました。はっきりと覚えてないのですが「リセットされます」みたいな警告が出たので、やっぱり消えるんだ。と軽く考えて即クリックしたので。しかし、本ブログでテーマ変更したときは、警告が出なかったのです。あれ?と思い、HTMLやCSSを確認してみると、そのまま残ってました。

なぜだろう?

テスト用は消えて本ブログは消えず。

まぁ、消えても消えなくてもバックアップは取ってるので、どちらでも構わないのですが・・・。

今までのHTML・CSSをそのまま張り付けて編集

上記では「テストブログのCSS・HTML」のバックアップと書きましたが、今回は本ブログがどうなるのかの実験なので、HTMLとCSSは本ブログの物をコピペしました。

新テーマになると、当然、見出し・タイトルなどのフォントなどが変更されます。自分は今使ってるフォントが好きなので、そのまま使ってますが、今回のテーマでフォント変更すると、


    /*フォント変更*/
    body {
    font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiry,sans-serif;
    }
    

このCSSをいれてあげるだけで、すべてのフォントが変更されました。

テーマによって色々と違うんだなーと実感。

なので、フォント変更のCSSは上記以外をすべて削除。

その後は、今まで試行錯誤して編集したCSSとHTMLを削除しては新テーマと見比べてを繰り返し、とりあえず完成しました。

細かい部分は後日に試していこうと・・・。

そして

本ブログのテーマ変更に着手

手順とすれば、テストブログと同じですね。違ったところと言えば、テストブログのCSSとHTMLを本ブログにコピペした事です。ここでの注意事項は、カテゴリーなどのリンクのURLの確認を必ずすること。ですかね。

テストブログのリンクがそのまま残っていると「自分のみに公開」設定しているので、クリックしても表示されない事態が起きると思いますので。

なんだかんだでテーマのお引っ越しが完了です。

しかし、自分が気に入って作っていた物のほんとんどが残っていない・・・。

気分一新でうれしいやら悲しいやら・・・。

やっぱり本職さんが作った作品は素晴らしい!!

ということですね。

ではでは