Long tall base

Long tall base

女装と雑記とDisneyと

【初心者必見】はてなブログ歴4日の僕が各サイト様を参考にしてブログのデザインををカスタマイズしたのでまとめてみる

 

はてなブログを始めた最初の四日間を使い、ガッツリと調べながらPC画面とスマホ画面をカスタマイズしたため、同志である初心者はてなブロガーさんのためにそのやり方や、どう変わるのかをまとめてみる。

 

 

ブログに慣れてきた方も、新しい発見があるかもしれませんので、要チェックです!!

 

 

ちにみに僕はブログの設定やアドセンス取得など、一切やったことは無かったがそんな状態でも問題なく出来たので参考にして貰えたら嬉しい。

 

 

「5月1日追加更新」

この記事がはてブ新着に載りました!!

工夫した事などが書いてある記事がこちらになりますので、ご参考にどうぞ。

www.magicbase.xyz

 

 

 

 

 

 

f:id:yuzubaferret:20170429011632j:plain

 

 

デザインはカスタムテーマの「Brooklyn」をベースに

 

デザインは公式のものではなく「カスタムテーマ」で。

Brooklyn - テーマ ストア

これにした理由はシンプルで解りやすそうだったから。

 

 

このテーマを軸に「PC側」と「スマホ側」を変更していく。

勿論このテーマじゃないとこれから書く変更が出来ない訳ではないので、好きなテーマを選ぶと良いと思う。

 

 

こちらからDLが出来ます。

テーマ ストア - はてなブログ

 

 

カスタマイズをするために、はてなブログproに登録する

 

はてなブログproというのは、はてなブログの有料版です。

登録する理由というのが、これから書いていく「スマホ版のデザイン変更」に必要だからである。

 

 

他にも「独自ドメインに設定できる」という事や「無駄な広告を非表示にできる」という便利な機能も使える。

 

 

参考にさせて頂いたサイト様はこちらです。

www.mutant-tetsu.com

独自ドメインの設定の仕方まで詳しく書いてありますのでありがたい・・・!!

これからも参考にさせて頂きます!!

 

 

サムネイルアイコンを丸くしてみよう。

 

ブログの閲覧比率は6:4でスマホから見られているそうです。

そのためスマホの閲覧画面からテコ入れを行いました。

 

 

サムネイルアイコンを丸くしてみる!!

f:id:yuzubaferret:20170429014528j:plain

 

↑こんな感じ!!サイトの雰囲気が柔らかくなります!!

 

 

こちらのサイト様を参考にさせて頂きました。

www.tarappism.com

物凄く解りやすくて一瞬でできました・・・!

 

 

f:id:yuzubaferret:20170429014950j:plain

 

これを押すと・・・??

 

 

f:id:yuzubaferret:20170429015017j:plain

 

 

こんな感じでカテゴリーやトップ画面に飛ぶ事が出来ます。

目当ての記事を1つ見て帰ってしまう人を少なくするため、スムーズに他記事に誘導する事が狙いです。

 

 

参考にさせて頂いたサイト様はこちらです、ありがとうございました!!!

www.yukihy.com

本当に「コピペ一発」で終わります!!

かなり丁寧に書かれているので是非ご参考にどうぞ。

 

 

細かい部分を非表示にしよう!!

 

細かい部分っていうのは具体的にいうと

f:id:yuzubaferret:20170429021218p:plain

 

だったり・・・

 

f:id:yuzubaferret:20170429021239j:plain

 

といった「はてなブログ」サイドの広告のようなもの。

いつもお世話になっている(4日間)はてなブログ様ですが、読者様のために消させて頂きました!!

 

 

参考にさせて頂いたサイト様はこちら

d3dayo.hateblo.jp

 

 

こちらのサイト様は他にも様々なカスタマイズの仕方を書いていますし、次に行った「タイトルのフォント変更」で参考にさせて頂いたサイトもこの方のブログです!!

 

 

他にもブログの説明文を非表示にしたりと散々活用をさせて貰いました・・・

ありがとうございました・・・!!

 

 

 タイトルのフォントを変更するとこんな感じになります。

 

f:id:yuzubaferret:20170429022410j:plain

 

ポップで可愛い感じにしてみました。

 

 

先ほどのブロガー様のページをまた参考にさせて頂きました。

d3dayo.hateblo.jp

 

以上でスマホの画面編集は終わり!!

4月29日現状でのスマホ画面は上記の方法で変更致しました。

 

 

f:id:yuzubaferret:20170429145816j:plain

 

 

PCの閲覧画面もカスタマイズ!!

まだ続きます、今度はPCで見る場合の画面を変更していきます。

 

 

これはスマホも共通の変更なのですが「見出しのデザイン」を変更。

見出しとはタイトルを囲っている枠の事です。

 

PC版

f:id:yuzubaferret:20170429023733p:plain

 

スマホ版

f:id:yuzubaferret:20170429024012j:plain

 

 

見出しのデザインをハッキリとさせる事によって、読み手に今から何を書いて行くのかという事を「しっかりと伝えられる」

 

 

参考にさせて頂いたサイトはこちら。

www.yukihy.com

 

1つのデザインだけではなく、複数のデザインを載せてくれているので、自分に合ったものを選ぶ事が出来る。とても助かりました、ありがとうございました!!

 

 

 

TOPページを「記事一覧のページ」にする!!

 

今まではブログトップに移動すると最新記事が出てきて、「次の記事を見るには沢山スクロール」しなくてはいけませんでした。

 

 

それがとても不便に感じ、大手ブログによくある「記事一覧とサムネイルがぶわっと出るように」設定がしたく調べて見ました。

 

 

変更後(スクロールせずにいくつかの記事が目に入りますよね)

 

f:id:yuzubaferret:20170429025245p:plain

 

こうする事によって「他の記事にも興味を持ってもらい、直帰率を下げる事が」狙いです。

 

 

参考にさせて頂いたサイト様はこちら。

www.ito-tomohide.com

とても解りやすく且つ簡潔に書かれています。

 

 

この方の他の記事も非常にオススメ。

特にこの記事。

www.ito-tomohide.com

「周りと比べるのではなく、比べるのは過去の自分」という部分が非常に納得出来ますので是非どうぞ。

 

 

PC版タイトルのフォントを変えよう!!

 

スマホ版タイトルのフォント変更は記載した通りですが、PC版も変更しました。

f:id:yuzubaferret:20170429031124p:plain

こんな感じのフォント。可愛い・・・!!

 

 

参考にさせて頂いたサイト様はこちら。

lovdiv.hatenablog.com

柔らかい文章ですんなりと頭に入ってきました。

ブログに対する考え方の面でも参考にさせて頂いております。

ありがとうございます!!

 

 

記事タイトルの下にラインを引いた

 

ラインというのはコレ

 

f:id:yuzubaferret:20170429031555p:plain

タイトルの下の斜線ラインの事です。

これがある事によって、タイトルと本文がしっかりと分けられメリハリが付き、解りやすいサイトとなります。

 

 

 

 「5月1日更新」

グローバルナビを設置しよう!!

どういうものかというとコレ

f:id:yuzubaferret:20170501205950p:plain

PC画面のメニューバーの事ですね。

 

記事を見に来てくれた方がスムーズに他の記事へ移れるように設置しました。

 

 

参考にさせて頂いたサイト様はこちら

shiromatakumi.hatenablog.com

テーマが「Brppklyn」の方のための記事みたいです。

他にも「読者になるボタンの設置」なども分かりやすく説明して下さっています。

ありがとうございました!!

 

 

ブログを始めて4日目の僕でも出来た!!

 

変更はこれで終わりとなります。

 

 

ブログ初心者の僕でも、全て合わせて3〜4時間で出来たと思います(重要)

調べながらでその時間なので、この記事を見ながら参考サイトへ飛んでいけば1時間程で終わると思います(各解説者様本当に有り難いです・・・)

 

 

ブログのカスタマイズって大変そうだなーと思うかもしれませんが、やってみると案外簡単なので是非やってみてください!!

 

 

解らないことや質問があればコメントを下されば、僕の解る範囲で返信させて頂きますのでお気軽にどうぞ。

 

 

では、ここまで読んで頂きありがとうございました!!

 

 

 

 

 

【当ブログ注目記事】

www.magicbase.xyz

 

 

 

ドメイン取得は30円で出来るこのサイトで

 

 


日記・雑談ランキング