読者です 読者をやめる 読者になる 読者になる

スポンサーリンク

【初心者も必見】はてなブログを簡単にカスタム。この記事を参考にすればちょっとだけブログが変身(PC編)。

THINKs THINKs-ブログのこと

ブログ全体を大幅変更

f:id:wabisukenouta:20160123174542j:plain

 

 はてなブログをはじめて一年が経過しました。

 

 毎日欠かさず更新をするという目標を立て、そして達成。雑多な内容ばかりのブログでありながら、訪問してくれるかたも多くなり、読者になってくれた方にも感謝しております。

 

 しかし最近は、そのあまりにも多くなったカテゴリーの記事を書くことと、毎日更新ということが負担になり、少々記事内容が軽いものになってしまいました。

 

 いや、かなり軽い、内容のない記事ばかりになってしまったと反省しております。

 

 書き溜めておいた記事も、毎日の更新ですぐになくなっていく状態です。時間は有限でありますので、作業時間も決まってしまいます。そして内容が薄く、荒い記事になっしまう。

 

 そんな記事ばかり書いていると、読者の方にもわかってしまいます。

 

「こいつ、手を抜いているな」

 

 最近はPVもあきらかに減少の一途をたどっております。

 

 そこで、ブログを始めて一年が経った今、一つの記事内容を充実させることに焦点をあてることにします。

 

 そして増えすぎたカテゴリーも減らして、ブログ全体をシンブルにしていこうと思います。

 

 一つだけ注意があります。これはわたくしははてなブログProの有料版なので、もしかしたら無料版の人にはカスタムできない部分があるかもしれません。そのへんはご了承ください。

 

テーマストアで初期段階から作り直し

 はてなブログを始めると、最初にテーマを選びます。テーマとは簡単にいえば、これから書いていくブログの形です。

 テーマにはさまざまなものが用意されています。プレビューも可能なので、これから長いおつきあいになる人は、お気に入りテーマが見つかるまで試してください。

f:id:wabisukenouta:20160123175852p:plain

 

 そしてこのテーマ選びで大事なことがあります。それは、レスポンシブ対応か対応していないかです。

 

 はてなブログを始める人の中には、これがよくわからない人もいると思います。実際わたくしははてなブログをはじめて一年たった2016年に、はじめて「レスポンシブ対応」の意味が分かり、そして自分で設定しなければならないことを発見しました。

「レスポンシブ対応」のテーマを選んでいたのですが、選ぶだけじゃダメなのです。自分で設定しなければならないのです(こんな簡単なことだれでも知っているのですかね。もしかしてわたくしだけが知らなかったのかも)。

 

 その「レスポンシブ」を説明すると、PC、スマホ、タブレットなど、さまざまなデバイスで表示される画面の大きさに合わせてブログを表示してくれるというものです。

 パソコンではきれいに画面が収まっているのに、スマホでは形が崩れてしまって見づらいということがあると思います。そういった画面の大きさの変化にも対応しているということで「レスポンシブ対応」となっています。

 なので、パソコンで更新してしまえばあとはなにも気にしなくてもスマホでもタブレットでも適切な画面表示になっているのです。

 

 では、「レスポンシブ非対応」のテーマではスマホに表示されないのかといわれれば、そうではありません。スマホはスマホで縮小されて表示されるので問題はありません。

 わたくしは勘違いから自分で設定せずに勝手に「レスポンシブ対応」だからスマホにも更新記事があがっていると思っていました。対応でも非対応でも記事はアップされます。

 

 「レスポンシブ対応」にすることでなにがいいのか。よく巷でささやかれていることは、Googleがレスポンシブデザインを推奨しているとか。そういったこともありSEOに強いとかどうとか。

 

 わたくしはこの前、自分で設定して、はじめてプレビューなりで使ってみましたが、すでにスマホ画面を作り込んでいたこともあり、またGoogleアドセンスなどの設定から、レスポンシブにしたことでスマホ画面が崩壊してしまいました。のちのちGoogleアドセンスのことも書きたいとは思っていますが、さまざまなカスタマイズをしてからのレスポンシブ対応は難しいので、初期段階で設定しておいてください(設定方法は簡単です。のちの項で説明します)。

 

 では、話をテーマ選びに戻します。

 テーマストアでテーマをインストールしてください。今回わたくしはこちらを選ばせていただきました。

f:id:wabisukenouta:20160123184542p:plain

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

tsukuruiroiro.hatenablog.com

 

 こちらは以前の記事でも紹介しました。

wabisuke.hatenablog.jp

 

 CatNoseさんが作った『DUDE』です。一度見たときからこちらに決めていました。もうカッコよすぎて心が奪われました。

 一つだけ注意してください。こちらは先ほど説明した「レスポンシブ」には対応していません。非対応なので選択するときは注意してください。

 

いざっ、カスタム。しかしコピペでOK!

 さっそくカスタムをしていこうと思っても、実際はてなブログを使ってもらったらわかるのですが、インストールしたテーマでそれなりに画面を変えることができてしまいます。

 サイドの項目なんて特別な知識はいりません。感覚でできてしまいます。

 

 そこで今回はわたくしがカスタムしてよかったものを2つ取り上げたいと思います。

  1. シェアボタンの変更
  2. グローバルメニューの設定

 この2つだけでもカスタム感がでてきます。そしてうまくいくと、また次は違うもの、もっと高度なものとなっていきます。

 

 しかしわたくしはhtmlもcssの知識も持ち合わせていないので、参考にさせてもらったブログの記事に貼り付いているコードをまるっといただくしかできません。

 それでカスタムできるのですから、参考にさせていただいたブログ様様です。

 

注意:カスタムをおこなう前に、すでにある程度ブログをいじっている人は、万が一のためにコードなりCSSを保存しておいてください。

 

 

 まず、シェアボタンの変更からおこなっていきます。

 初期段階から用意されているものはシンプルでいいのですが、重いせいか表示までに時間がかかります。

f:id:wabisukenouta:20160123201233p:plain

 写真のように、左側にあるソーシャルパーツにチェックを入れたものが、右側にプレビューのように表示されます。

 なにも問題はないのですが、せっかくだから変えてみましょう。

 

 参考になるのがこちらの記事です。はてなブログを使っている多くの人が参考にしていると思われます。使いたくなるぐらい、多くのカスタムを実践されています。

www.yukihy.com

 修正されたような、似ている記事が複数見受けられますが、わたくしはこちらをコピペさせてもらって問題なく表示できました。しっかり動いています。

 

 PC、スマホに対応するコードとcssが掲載されていますので、わたくしがわざわざここに書く必要がありません。それだけ親切丁寧な説明とコピペコードが書かれています。

 

f:id:wabisukenouta:20160123202210p:plain

 うまくいけば、このようなソーシャルボタンになります。既存のソーシャルボタンのチェックははずしてくださいね。Yukihyさんありがとうございました。

 

 

 つづいて、グローバルメニューの設定をおこないます。

 実はこちらもYukihyさんの記事からコピペさせていただきました。

 

 グローバルメニューとはカテゴリーごとに分かれて表示させる機能です。

f:id:wabisukenouta:20160123212009p:plain

 こちらの画像のように黒ベースに白文字で表示されている部分です。小さくて見えづらいかもしれませんが、カテゴリーの数だけ作ることができます。

 

 ちなみにこのグローバルメニューがすぐれているのは、

f:id:wabisukenouta:20160123212357p:plain

 おわかりでしょうか。画面が小さくなれば、グローバルメニューが入りきらないので縮小されて「MENU」となります。

 

f:id:wabisukenouta:20160123212559p:plain

 そして、「MENU」にカーソルを合わせてクリックすると、収められているカテゴリーが表示させます。かっこいいですよね。

 

 こちらはスマホでも実装可能です。では参考にさせていただいたYukihyさんの記事を掲載しておきます。

www.yukihy.com

 説明書きの通りおこなっていけば問題なくできますので試してみてください。

 

「レスポンシブ対応」にさせるための簡単な手順

 最初に書きましたが、「レスポンシブ対応」のテーマを選択して、実際にレスポンシブ対応にするための工程を書いておきます。

 

 「レスポンシブ対応」のテーマをインストール

 はてなブログにログイン後、テーマストアにて「レスポンシブ対応」のテーマを探し、自分にあったいいデザインテーマをインストール。

 

 『Responsive: yes』を貼り付ける

 インストールができたら、CSSを貼り付けます。

f:id:wabisukenouta:20160123214405p:plain

 /* Responsive: yes */ ←こちらを、

 デザイン設定>スパナマーク>デザインCSS(ここにコピペしてください)

 

 レスポンシブデザインにチェック

 CSSを貼り付けたら、最後にチェックをいれます。

f:id:wabisukenouta:20160123215122p:plain

 携帯マーク>詳細設定>レスポンシブデザイン(ここにチェック!)

 

 以上で、レスポンシブ対応となります。

 ただ注意してほしいのが、レスポンシブ対応になることで、スマホのカスタムが崩れることがあります。

 また、Googleアドセンスでスマホ画面に対応していない広告を使用している人は広告だけがひどく長くなったりしてしまいます。ご注意下さい。

 それでは、たのしいブログライフを送ってください。

スポンサーリンク