はてなブログを始めた最初の四日間を使い、ガッツリと調べながらPC画面とスマホ画面をカスタマイズしたため、同志である初心者はてなブロガーさんのためにそのやり方や、どう変わるのかをまとめてみる。
ブログに慣れてきた方も、新しい発見があるかもしれませんので、要チェックです!!
ちにみに僕はブログの設定やアドセンス取得など、一切やったことは無かったがそんな状態でも問題なく出来たので参考にして貰えたら嬉しい。
- デザインはカスタムテーマの「Brooklyn」をベースに
- カスタマイズをするために、はてなブログproに登録する
- サムネイルアイコンを丸くしてみよう。
- Menuバーを付けてみよう
- 細かい部分を非表示にしよう!!
- PCの閲覧画面もカスタマイズ!!
- TOPページを「記事一覧のページ」にする!!
- PC版タイトルのフォントを変えよう!!
- 記事タイトルの下にラインを引いた
- ブログを始めて4日目の僕でも出来た!!
デザインはカスタムテーマの「Brooklyn」をベースに
デザインは公式のものではなく「カスタムテーマ」で。
これにした理由はシンプルで解りやすそうだったから。
このテーマを軸に「PC側」と「スマホ側」を変更していく。
勿論このテーマじゃないとこれから書く変更が出来ない訳ではないので、好きなテーマを選ぶと良いと思う。
こちらからDLが出来ます。
カスタマイズをするために、はてなブログproに登録する
はてなブログproというのは、はてなブログの有料版です。
登録する理由というのが、これから書いていく「スマホ版のデザイン変更」に必要だからである。
他にも「独自ドメインに設定できる」という事や「無駄な広告を非表示にできる」という便利な機能も使える。
参考にさせて頂いたサイト様はこちらです。
独自ドメインの設定の仕方まで詳しく書いてありますのでありがたい・・・!!
これからも参考にさせて頂きます!!
サムネイルアイコンを丸くしてみよう。
ブログの閲覧比率は6:4でスマホから見られているそうです。
そのためスマホの閲覧画面からテコ入れを行いました。
サムネイルアイコンを丸くしてみる!!
↑こんな感じ!!サイトの雰囲気が柔らかくなります!!
こちらのサイト様を参考にさせて頂きました。
物凄く解りやすくて一瞬でできました・・・！
Menuバーを付けてみよう
これを押すと・・・??
こんな感じでカテゴリーやトップ画面に飛ぶ事が出来ます。
目当ての記事を１つ見て帰ってしまう人を少なくするため、スムーズに他記事に誘導する事が狙いです。
参考にさせて頂いたサイト様はこちらです、ありがとうございました!!!
本当に「コピペ一発」で終わります!!
かなり丁寧に書かれているので是非ご参考にどうぞ。
細かい部分を非表示にしよう!!
細かい部分っていうのは具体的にいうと
だったり・・・
といった「はてなブログ」サイドの広告のようなもの。
いつもお世話になっている（4日間）はてなブログ様ですが、読者様のために消させて頂きました!!
参考にさせて頂いたサイト様はこちら
こちらのサイト様は他にも様々なカスタマイズの仕方を書いていますし、次に行った「タイトルのフォント変更」で参考にさせて頂いたサイトもこの方のブログです!!
他にもブログの説明文を非表示にしたりと散々活用をさせて貰いました・・・
ありがとうございました・・・!!
タイトルのフォントを変更するとこんな感じになります。
ポップで可愛い感じにしてみました。
先ほどのブロガー様のページをまた参考にさせて頂きました。
以上でスマホの画面編集は終わり!!
4月29日現状でのスマホ画面は上記の方法で変更致しました。
PCの閲覧画面もカスタマイズ!!
まだ続きます、今度はPCで見る場合の画面を変更していきます。
これはスマホも共通の変更なのですが「見出しのデザイン」を変更。
見出しとはタイトルを囲っている枠の事です。
PC版
スマホ版
見出しのデザインをハッキリとさせる事によって、読み手に今から何を書いて行くのかという事を「しっかりと伝えられる」
参考にさせて頂いたサイトはこちら。
1つのデザインだけではなく、複数のデザインを載せてくれているので、自分に合ったものを選ぶ事が出来る。とても助かりました、ありがとうございました!!
TOPページを「記事一覧のページ」にする!!
今まではブログトップに移動すると最新記事が出てきて、「次の記事を見るには沢山スクロール」しなくてはいけませんでした。
それがとても不便に感じ、大手ブログによくある「記事一覧とサムネイルがぶわっと出るように」設定がしたく調べて見ました。
変更後（スクロールせずにいくつかの記事が目に入りますよね）
こうする事によって「他の記事にも興味を持ってもらい、直帰率を下げる事が」狙いです。
参考にさせて頂いたサイト様はこちら。
とても解りやすく且つ簡潔に書かれています。
この方の他の記事も非常にオススメ。
特にこの記事。
「周りと比べるのではなく、比べるのは過去の自分」という部分が非常に納得出来ますので是非どうぞ。
PC版タイトルのフォントを変えよう!!
スマホ版タイトルのフォント変更は記載した通りですが、PC版も変更しました。
こんな感じのフォント。可愛い・・・!!
参考にさせて頂いたサイト様はこちら。
柔らかい文章ですんなりと頭に入ってきました。
ブログに対する考え方の面でも参考にさせて頂いております。
ありがとうございます!!
記事タイトルの下にラインを引いた
ラインというのはコレ
タイトルの下の斜線ラインの事です。
これがある事によって、タイトルと本文がしっかりと分けられメリハリが付き、解りやすいサイトとなります。
ブログを始めて4日目の僕でも出来た!!
変更はこれで終わりとなります。
ブログ初心者の僕でも、全て合わせて３〜４時間で出来たと思います（重要）
調べながらでその時間なので、この記事を見ながら参考サイトへ飛んでいけば１時間程で終わると思います（各解説者様本当に有り難いです・・・）
ブログのカスタマイズって大変そうだなーと思うかもしれませんが、やってみると案外簡単なので是非やってみてください!!
解らないことや質問があればコメントを下されば、僕の解る範囲で返信させて頂きますのでお気軽にどうぞ。
では、ここまで読んで頂きありがとうございました!!
【当ブログ注目記事】
ドメイン取得は30円で出来るこのサイトで