Life is alright。

しろくまがいるブログʕ·ᴥ·ʔฅ

PCとスマホのブログテーマを変更する時の手順や注意点。テストブログが大事!

f:id:bucchiz:20170524010725j:plain

こんばんは、しろくまですʕ·ᴥ·ʔฅ

やろうやろうと思って放置していたブログテーマをやっと変更しました。

しかもPCとスマホ両方。シンプルでカスタマイズしやすいので色々いじりたい自分にはぴったりでした。

ただ導入には結構時間がかかりました。元々あるCSSの一部も生かしたかったので重複しないようにするのが大変でした。

今日はそんなテーマ変更に関して手順と注意する点を紹介します。

導入したテーマ

導入したテーマはこちら「ひつじの雑記帳」のid:codomisuさんからいただきました。

hitsuzi.hatenablog.com

最近ホッテントリ入りもされていたのでご存知の方は多いんじゃないでしょうか。まさか高校生だとは思いませんでしたので驚きです。このセンスの良さと文章の落ち着き、只者ではないですね。

PC版、スマホ版それぞれ紹介します。

PC版

hitsuzi.hatenablog.com

まずはPC版、シンプルフラットな感じが今風でとても良いですね。

カスタマイズする余地が多いという点も気に入りました。ランキング上位のテーマはすでに完成されており、見出しのデザインもすでに決まったものが多いですが、「Codomisu Flat」は見出しやシェアボタンはデフォルトのままなので、自分でカスタマイズする必要があります。僕は自分で色々いじりたかったのでこのカスタマイズ性が高いというところに惹かれました。

ちなみにヘッダ部分はまだヘッダ画像がないのでなくしています。今後ヘッダ画像が作れたら設置したいと思います。

スマホ版

hitsuzi.hatenablog.com

そしてこちらはスマホ版、正確にはスマホ版はテーマじゃなくてスマホデザイン集かな。

こちらも洗練されていてセンスが光ります。スライダーなんか憧れでしたよ。どうやって設置するのか知りませんでしたが、こんなに簡単にできるのか!ってくらい簡単でした。

ただ後で説明しますが、もともとあったものを生かして一部だけ導入したのでちょっとした注意が必要でした。

導入手順

それでは簡単な導入手順を紹介します。

テスト用ブログを作る

まずテーマを変更する時やCSSをいじる時は事前にテスト用ブログを作っておくと便利です。

www.foxism.jp

詳しくはこちらが参考になります。目から鱗の話で非常にためになります。テスト用ブログで変更をやっておけば、いざ変更した後で表示されないとか形が崩れるといったことがあっても取り返しが効きますのでおすすめです。

テスト用ブログを作ったら、PC版、スマホ版それぞれ変更していきましょう。以降の作業は全てテスト用ブログで行います。(最悪壊れてもメインサイトには影響ないので)

PC版

デザインCSSのバックアップをとる

テーマを変えるとCSSが全て消えてしまいますので、まずはデザインCSSの内容を全てバックアップしましょう。全選択コピペしてメモ帳などに貼って保存で良いです。

テーマを変更する

バックアップをとったら先ほどのcodomisuさんのサイトからテーマストアに移動して、テーマを変更します。

デザインCSSの内容を元に戻す

テーマを変更するとデザインCSSの内容が全て消えているので、先ほどとったバックアップの内容をコピーします。

ナビゲーションの項目を更新

デフォルトだとこの項目なので https://cdn-ak.f.st-hatena.com/images/fotolife/c/codomisu/20170422/20170422163138.png

自分のブログ用に変更します。 f:id:bucchiz:20170524000006j:plain

ポイント

CSSを修正するとき、アイコンを指定する箇所があります。

class=“fa fa-info-circle”

上の fa-info-circle がアイコンの名前なのですが、このアイコン実は他にもいっぱいあります。なので好きなアイコンを選んで文字を指定してください。アイコンはこちらのサイトから見れます。

Font Awesome Icons

f:id:bucchiz:20170524001341j:plain

こんな感じでいっぱいありますよ!

例えば「子供」のアイコンにしたい場合、childのアイコンを選びます。

f:id:bucchiz:20170524001525j:plain

そして赤枠の部分をclass=に指定すれば子供のアイコンになります。

ヘッダ画像を設定する(今回は設定せず

ヘッダ画像があれば設定したのですが、なかったので一旦はずしました。外す時は、以下のCSSを削除すればよいです。

f:id:bucchiz:20170524002000j:plain

スライダーを設定する

スライダーは説明通りに設置すればよいので省略します。

その他余計なものを削除する

重複するものは削除しましょう。例えばスライダーや記事下の関連記事表示などです。

ポイント

もしCSSの内容が煩雑になっていてよく分からない場合は一度整理したほうがよいです。テスト用ブログなので何してもよいので、削ってみたりして本当に必要なものだけを残しましょう!

スマホ版

スマホ版はテーマが特にないので、好きなデザインだけを適用していきます。

僕が今回もらったのはヘッダーフッターのみです。シェアボタンや見出しデザインは元々使っているものを残しました。

ヘッダー

codomisuさんのサイトを参考にヘッダー部分のコードをデザイン→スマートフォン→ヘッダ→タイトル下に書いていきます。

コツは本当に手順通り上から順にコピペしていくことです。

タイトル・ロゴ→スライドメニュー部分→トグルメニュー→細いオススメ記事(単なるブログ説明コメントにしています)→スライダー

ここは特に注意点はなく、コードを挿入してURLなどを自分のものに変えていきます。

f:id:bucchiz:20170524003728j:plain

完成したのがこちら。スマホ版もヘッダー画像はなしにしています。

フッター

続いてフッターを、デザイン→スマートフォン→フッタ→ページャ下に挿入していきます。

こちらもコード挿入は手順通りでよいのですが、1点どうしてもうまくいかないことがありました。

それはフッターが正常に表示されないのです。

https://cdn-ak.f.st-hatena.com/images/fotolife/c/codomisu/20170506/20170506080629.png

本来であれば↑のように表示されるはずですが、なぜか表示されません。

色々調べたところ、原因は下記のCSSでした。

f:id:bucchiz:20170524004257j:plain

そう、フッタの非表示のCSSです。これが残っており、いくらフッタの設定をしても表示されませんでした。削除することで正常にフッタが表示されるようになりました。

やはりCSSの内容は整理して把握しておかないとダメですね。

テスト用ブログの設定をメインブログに移す

今までテスト用ブログで作業してきましたが、これをメインブログにも反映させます。

やり方はテスト用ブログでやってきたことと同じことをすればよいです。テーマを反映させて、CSSやHTMLを書く。すでにテスト用ブログで試しているので気楽にできるはずです。

あとがき

いかがだったでしょうか。

これでかなりすっきりした見た目に生まれ変わりました。これからさらにカスタマイズして遊んでみようと思います。

そしていつかはヘッダ画像を作ります。自分は絵心がないのでどこかに頼もうかなと考えていますが、それはまた今後のお話。

テーマを変える時にはここで書いたこと以外にも注意が必要なことがあります。なのでHTMLやCSSの知識が少しでもあったほうがよいと思いますので、本を買って勉強してみるのもいいかもしれませんよ。

それではʕ·ᴥ·ʔฅ