IT女子ちーさんのwebろぐ

面白いwebサービス・アプリの紹介を中心に、ユーザー目線でITな情報を発信!エンジニアではないですがweb広告メディア営業が本業のインターネット大好き女子。広く浅く情報収集も好きなので日々の学びもシェアします。主に週末に更新です。

たった3つの設定ではてなブログのデザインをいい感じにカスタマイズする方法

f:id:i-chihiro93115:20180414120511p:plain

こんにちは!IT女子のちーさんです。

最近ブログのデザインをリニューアルしました。

以前のデザイン(PC)

f:id:i-chihiro93115:20180407154048p:plain

以前のデザイン(スマホ

f:id:i-chihiro93115:20180407154129p:plain

スマホの方イケてないですねー。

今回、簡単な設定で、かなりいい感じになりましたので、この記事では、3つのデザイン変更の方法について解説します。

無料会員でもできるのでご安心ください!

 

  

スマホ対応させる

はてなブログはデフォルトの設定だと、PCのデザインがスマホに反映されないというワナがあります!

これから紹介するロゴバナーや目次のデザイン変更は、スマホ対応をしないと反映されないのでご注意ください。

 

【ステップ1】スマホ対応のテーマ(テンプレート)を選ぶ

はてなブログが提供しているテーマにはスマホに対応しているものとしていないものがあります。

現状のテーマが対応していなければ、スマホ対応のテーマを選びましょう

私は「Minimal Green」というテーマを採用しています。

シンプルで色味もキレイなのでおすすめですよ。

ワードプレスのデザインにかなり近いと思います。

 

【ステップ2】CSSに「/* Responsive: yes */」と記載する

スマホ対応にするには、CSSをいじらないといけません。

CSSと聞くと難しそうですが、コピペするだけなので大丈夫です!

管理画面の「デザイン」→「カスタマイズ」→「デザインCSSと開いてください。

f:id:i-chihiro93115:20180407161445p:plain

デザインCSSの一番上に先ほど選んだテーマについての記述があるので、その下にでも「/* Responsive: yes */」と記載しましょう。

 

【ステップ3】レスポンシブデザインにチェックする

管理画面の「デザイン」→「スマートフォン」→「詳細設定」を開きます。

「レスポンシブデザイン」というのが表示されるのでチェックしましょう。

f:id:i-chihiro93115:20180407161852p:plain

 

これで、スマホ対応設定完了です!

 

自作ロゴバナーを設置する

サイトトップにサイト名のロゴがあるだけで、なんとなく信頼感アップしますよね!

ということで、今までただの文字だったブログ名をオリジナルの画像にすることにしました。

作成に使ったツールは「Canva」というツールです。

Amazingly Simple Graphic Design Software – Canva

記事のアイキャッチ画像もこのツールで作っています。

Canvaは、綺麗な写真が無料(一部有料)で手に入るのと、図形の透過が簡単にできるなどとても使いやすいです。

写真や字体のセンスもいいので、おすすめですよ!

 

次に、作った画像を設置する方法です。

管理画面の「デザイン」→「カスタマイズ」→「ヘッダ」を開きます。

「タイトル画像」で作った画像をアップロードして位置を調整します。

また、表示設定で「画像だけ表示」を選びましょう。

f:id:i-chihiro93115:20180407155313p:plain

画像が設置できました!

f:id:i-chihiro93115:20180407155715p:plain

 

 

目次のデザインを変更する

Minimal Greenテーマのデフォルトの目次はこんな感じでした。

f:id:i-chihiro93115:20180407162910p:plain

これをもう少しかわいくカスタマイズしていきます!

まず、ネット上でCSSのコードを手に入れます

「ブログ 目次 CSS」などで検索すると出てきます。

私はこちらのサイトを参考にしました。

kimix.hatenablog.com

お気に入りのデザインが見つかったら、コピーします。

「Responsive:yes」を入れたときと同様、デザインCSSを開きます。

「Responsive:yes」の下あたりに、コピーしたCSSコードをペーストします。

f:id:i-chihiro93115:20180407163241p:plain

すると、目次が反映されます。

ちなみに、はてなブログで目次を入れるには、編集画面上の「ツールバー」の「目次」をクリックすればOKです!

f:id:i-chihiro93115:20180407164150p:plain

 

この3つの設定変更をするだけで、サイトがだいぶ見やすくなります。

特に、スマホについては今まで閑散としたデザインだったので、これによりかわいいデザインにすることができました。

レスポンシブにすると、今までスマホはできなかった、サイドバーの編集やメニューの作成なども可能になるので、ぜひ試してみてください!

広告を非表示にする