いずみの秘密基地 

「いずみの韓流房」の姉妹ブログです。雑記記事をこちらに移しました。

【はてなブログ 】 デザインテーマを「ニューモーフィズム」「Cappuccino」に変えるときに注意すること【初心者向き】

こんにちは、いずみです。年末に「Cappuccino」がリリースされた時からテーマを変えたかったのですが、毎回何か間違えてしまうので年明けまで我慢していました。

先に変えた方のブログ記事も読んで臨みましたが、グローバルナビゲーションバーが反映されませんでした。詳しい方なら自然に出来ることが私には分からず、制作者のフジグチさんにお尋ねしてやっと変えられました。

自分のための備忘録と兼ねて、カスタマイズがよくわかっていない人がテーマを「ニューモーフィズムNeumorphism」、「Cappuccino」に変えるときに注意することをまとめました。

 

スポンサーリンク

 

 

ブログテーマ「ニューモーフィズムNeumorphism」「Cappuccino」

メインブログを「ニューモーフィズムNeumorphism」、サブブログを「Cappuccino」に変えました。どちらもフジブロっ!のフジグチさんが作られたテーマです。

 

「ニューモーフィズムNeumorphism」

Neumorphism - テーマ ストア

はてなブログテーマ変更

 

「Cappuccino」のカラーを水色グラデーションに着せ替えています。

Cappuccino - テーマ ストア

 

ブログテーマを変える前に準備すること

「ニューモーフィズムNeumorphism」、「Cappuccino」共通です。

まずテーマストアで「テーマの説明」をちゃんと読みましょう。私はフジグチさんのブログ記事を斜めに読んで変えてしまったので、ナビゲーションバーも全部自動で表示されると勘違いしていました。

 

①デザインCSSをメモ帳などにコピーしておく

テーマを変えると今までのデザインCSSは全部消えます。吹き出しやステップバーなど、過去記事で使っていたデザインCSSはテーマ変更後に入れなおさないと元通りに表示されなくなります。復元できるように必ずコピーを取っておくこと。

 

②新しいテーマのグローバルナビゲーションバーのHTMLを入れる

テーマを変えてもHTMLは残ります。前のテーマで使っていたグローバルナビゲーションバーのHTMLが残っているとテーマを変えてもバーの部分が反映されません。

デザイン→カスタマイズ→ヘッダ→「タイトル下」に新しいテーマのHTMLを入れます。

グローバルナビゲーションバーを表示させる場合、通常はHTMLとデザインCSSを入れなければ表示されません。「ニューモーフィズムNeumorphism」「Cappuccino」にはCSSが組み込まれているのでHTMLを入れるだけでOKです。

③新しいテーマをプレビューで確認してインストール

これでテーマの着せ替えが完了です。

 
④コピーしておいたデザインCSSを入れる

過去記事をチェックして必要なデザインCSSを入れなおします。新しいテーマでは必要ないものもあるので確認しながら戻してください。

 

テーマを変えてみた感想

見出しや目次をバラバラに設定していてセンスに難のあったブログが、テーマを変えただけで見違えるほどすっきりして大満足です。ブログ全体がグレードアップした気になり、また頑張ろうと思えました。

「ニューモーフィズムNeumorphism」、「Cappuccino」にはテーマに見出しや目次も組み込まれているので過去記事も自動で美しく整いました。これは本当に嬉しい機能です。

「Cappuccino」では出遅れたのでメインブログの「ニューモーフィズムNeumorphism」は速攻で変更しました。グローバルナビゲーションバー設置ではもたついてしまいましたが、無事に変更できました。

 

テーマを作られたフジグチさんのブログはこちら

プロフィールを拝見して驚きました。HTML,CSSを勉強されてまだ1年!なのにもうテーマが作れるって??すごい方です。

テーマだけでなく、ステップバーなどブログパーツも使いやすいので以前からいろいろお世話になっていました。

「ニューモーフィズムNeumorphism」は2歳の娘さんのつぶやきがヒントになって生まれたテーマだそうです。とても素敵なテーマで大満足です。ありがとうございました。

 

www.fuji-blo.com

f:id:subiizumi:20200719100555p:plain
いずみ

最後までお読みいただきありがとうございました。

スポンサーリンク