飛人のサイト工房

これからWEBサイトを作ってみよう!というブログです。

はてなブログProで一番最初にするデザイン設定

 ~専門ブログを作る!vol.4~

シリーズ記事

前回、はてなブログProの簡単な基本設定をしました。

今回は、基本的なデザイン設定をします。

ブログを作り始めた最初のころは記事数や訪問者数が少ないので、グローバルメニューやシェアボタンは必要ないです。

まずは記事が見やすくなるような設定をします。

はてなブログProのデザイン設定

ダッシュボード>>デザイン

まとめ
  1. 背景画像
  2. 背景色
  3. ヘッダ
  4. 記事
  5. サイドバー
  6. フッタ
  7. デザインCSS

参照:ログイン - はてな

1.背景画像

お好みで設定してください。

真っ白より色味があったほうが見やすいと思ったので、僕は変更しました。

柄付きなのは、殺風景だとさみしいから。(*´▽`*)

2.背景色

背景画像はいらないから、色だけ変えたいときはこちらで設定。

3.ヘッダ

タイトル画像

画像を1000×200で作成しました。

ザックリ作ったので作り直すと思います。

画像だけ表示に設定しました。

 

タイトル下

タイトル下にCSSを記入して、記事の文字サイズを変更しました。

記事の文字を大きくする

ポイントは記事だけの文字サイズを変更するところです。

 参考にさせてもらった記事:「はにわ」さんのブログ

最後に、これ↓をコピペ。
<style type="text/css">
.entry-content { font-size:◯◯px; }
</style>

はてなブログで文字を大きくする方法【ブログ初心者向け】 - おちこぼれビジネスマンの初心者ブログ

 〇〇部分の数字を変更すると、文字サイズを変更できます。

多くの場合16~17程度だと思いますが、僕は少し大きめの18pxに設定しました。↓

gist.github.com

4.記事

今はデフォルトのままにしておきます。

5.サイドバー

「リンク」と「月間アーカイブ」を削除

 

「カテゴリー」を追加

6.フッタ

今はデフォルトのままにしておきます。

7.デザインCSS

  1. 画像に影を付けて境目をハッキリさせることで見やすくしました
  2. ヘッダー画像をレスポンシブ(スマホ対応)にしました
  3. 見出しデザインを変更して、文章の区切りをハッキリさせました

1.画像に影を付ける

参考にさせてもらった記事:「うり」さんのブログ

.hatena-fotolife {
margin-top: 5px; /* 画像の上の余白*/
display: inline-block;
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向 下方向 ぼかし 広がり 色 */ }

【CSS】ブログ画像周辺に影(ドロップシャドウ)を付けてみた - うりだよ。

以下のCSSを、デザインCSSにコピペします。

gist.github.com

 画像の貼り付けにGoogleフォトを使っている場合はこちら

gist.github.com

2.ヘッダー画像をレスポンシブにする

参考にさせてもらった記事:ブログ運営のためのブログカスタマイズ

2.スマホ対策用のCSSを追加する @media (max-width: 480px){ #blog-title-inner,#title a{ height:100px!important; } #blog-title-inner { background-size: contain!important; } }
引用:はてなブログに、タイトル画像(ヘッダ画像)を入れる【レスポンシブデザインでのスマホ対策】 – ブログ運営のためのブログカスタマイズ

 

以下のCSSを、デザインCSSにコピペします。

gist.github.com

 

3.見出しデザインの変更

「見出し CSS」とか「はてな 見出し」で検索すると山盛り出てくるので、お好きなものをコピペして使いましょう。

僕が好きなのはサルワカさんの記事です。

参考にさせてもらった記事:

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

こんな感じになりました。

 

あとがき

 最後に

「設定を変更する」を押しましょう。

 いや~、結構忘れがちです。

 

次からは画像の作り方について書いていきますー。

 

シリーズ記事