ゲーム好きがなんか色々書く

主にゲームについて色々と書いていきます。

【はてなブログ】ブログを見やすくするためにとりあえずしたこと、参考記事【初期設定】

スポンサーリンク

f:id:SternQ:20190724040718j:plain

ブログを書き始めてから1週間。合計アクセス数が100になりました。

アクセス解析を見る度に増えていく数字が嬉しくて何回も見てしまいます。

 

なのでこれを機にブログを見やすくするため設定や全体のデザインを少し変えてみました。

 

記事内の見出しを変えたり目次をいい感じに調整して少しは見やすくなったかなって思います。

 

変更したものや参考にした記事を載せておきます。

 

 

はてなブログの設定

キーワードリンクの消去

www.inside-shiina.com

キーワードリンクについてこちらを参考にさせてもらいました。

 

記事内のキーワードにURLが付くのを消します。

記事を見直してる時に下線が付いてるのを見てなんだこれはとなり気付きました。

 

 

カスタムURLの設定

Googleアナリティクスを見た時にアクセスページが数字だけのURLになっていてこれじゃ分からないなと思いました。

(Googleアナリティクスについては後に説明します)

 

数字だけではURL的にも分かりにくいしSEO的にも微妙。

そこでカスタムURLの設定方法を知りさっそく変えました。

 

カスタムURLの設定は記事を書く時の右側の歯車アイコンをクリックした所にあります。(今すぐ変えようと思ってる人は少し待ってください)

 
misosuke-toreca.hatenablog.com

ところが問題が起きました。

上の記事を見る前に投稿済みの記事のURLを変えてしまい少し面倒な事になってしまいました。

 

投稿済みの記事のカスタムURLを変更すると、変更前の記事が「存在しないページ」となり変更後の記事はしばらくGoogleの検索に引っ掛からなくなってしまいます。

 

変更前のURLがGoogleにあるのでせっかくクリックしてくれたのに何も無い記事が表示されてしまいそのまま帰ってしまう…なんてことに。

 

放置していても勝手に直るのですが、3日から7日程かかるらしいです。

早急に直したかったので上の記事を参考にして実行しました。

自分の場合24時間以内には直りました。

 

 

アイキャッチ画像を設定

アイキャッチ画像で記事の印象が決まると言われるほど大事です。

自分も最近少しずつ画像を作っています。

 

サイズは16:9の448×252がPC、スマホ両方に最適らしいです。

 

アイキャッチ画像の設定は記事を書く時の右側の歯車アイコンをクリックした所にあります。 

 

 

デザインのカスタマイズ

スマホの表示をPCと同じにする

スマホの表示をPCと同じにするデザインにするにはレスポンシブデザインをオンにします。

これを設定していないとせっかくデザインしたものがスマホからでは表示されなくなってしまいます。

 

設定の仕方は、まずレスポンシブデザイン対応のテーマに設定します。

テーマをインストールする時にデザインCSSが消える事があるのでインストール前にどこかへコピーしておきましょう。

 

happylife-tsubuyaki.hatenablog.com

こちらの記事でレスポンシブデザイン対応の好みのテーマを選ぶとよさそうです。

 

次にデザイン→スマートフォンのアイコン→詳細設定のレスポンシブデザインチェックを入れます。

f:id:SternQ:20190726020838j:plain

 

これでスマホからでもPCと同じデザインが適用されます。

 

テーマによって文字が小さいままの状態になる場合があります。

その時はデザイン→カスタマイズ→デザインCSSに下のコードを入れます。

 

/* Responsive: yes */

 

 

サイドバーのカスタマイズ

www.myfirstclasstrip.com

サイドバーについてこちらを参考にさせてもらいました。

 

色が付いただけでもいい感じになった気がします。

 

 

見出しのカスタマイズ

saruwakakun.com

見出しについてこちらを参考にさせてもらいました。

 

おしゃれで見やすい見出しのデザインが紹介されています。

全てコピペをする事が出来るので簡単に取り入れる事が出来ます。

 

シンプル系やおしゃれ系、グレデーションやアイコンを使った見出しもあるので好みのデザインが見つかると思います。

 

 

目次のカスタマイズ

www.yukihy.com

目次についてこちらを参考にさせてもらいました。

 

コピペで背景色表示するものなどが変えられます。

今回背景色が欲しいと思っていたので助かりました。

 

 

ブログのアクセス分析

Googleアナリティクス

psn.hatenablog.jp

こちらの記事を参考にさせてもらいました。

 

Googleアナリティクスという分析サイトを導入しました。

Googleアナリティクスを使うとサイトに来てくれた時間や元サイト、デバイス、直帰率などの情報を見る事が出来ます。

 

はてなブログのアクセス解析でも見れるのですが、Googleアナリティクスの方が細かく情報が分かるので今後のブログをやっていくのに役立ちます。

 

 

感想

少し変えただけで何もしないよりは断然見やすくなりました。

 

とりあえず初回設定としてはこれでいいかなと思いました。

こういうものは早めにしておいた方がいいですね。

 

まだまだカスタマイズし甲斐がありHTMLやCSS面白いなと感じつつあるので少しずつ勉強していきたいですね。

 

今回は軽くコピペしただけで細かい所などは変えてないので、今後より見やすいデザインにしてオリジナリティも出せるように変えていきたいです。