はてなブログ(PRO)を初めて使う人が通る、CSSデザインカスタマイズ&設定&参考サイト

スポンサーリンク
はてなブログ(PRO)を初めて使う人が通る、CSSデザインカスタマイズ&設定&参考サイト

無料ブログは幾つか使ったことがあるが、はてなブログを初めて使ってみた。

はてブロはSEO対策に強いと聞いていたので、以前から使ってみたいとは思っていたものの、ついついおっくうになっていたけれど、ようやく着手する機会が出来たので、備忘録としてカスタマイズ方法(大変お世話になったページ)をメモしておきます。

今回は、はてなブログプロの方を使ったけれど、無料版でもカスタマイズできるとの事。

初心者は慣れるまでは使い方が難しい

はてなブログを使っている方の事前調査をしてみると、デザインや使い方が簡単と言っている方も多いが、いざ使ってみると、慣れるまでは意外に難しいことに気が付く。

簡単そうだとタカをくくっていたけれど、いざ申込み、独自ドメイン設定、最低限のデザインカスタマイズ、最初のこの記事を書くまでに1週間かかってしまった。

個人用に日記にするためならともかく、ある程度しっかりとした記事を書いていこうと考える場合、最初の段階で、最低限のデザインはカスタマイズしておきたい所。

はてなブログ初心者の方は誰もが通る道だと思うので、今回色々調べて参考になった方々のカスタマイズ方法へのリンクなどをまとめておくので、作業効率化の為に是非参考にして頂ければと思います。 

はてなID取得、プロの申込みについて

まずは何よりもはてなIDを取得しないと話は始まらない。

新しいIDを取得する場合、はてなユーザー登録 からはてなIDを取得することができます。

ブログの開設についてはこちらを参考に。

はてなブログを始める(ブログの開設)

はてなブログは無料ブログからProにアップグレード出来ます。

はてなブログPro(有料プラン)

私の場合は独自ドメインでプログを書くつもりだったのでID取得後すぐにPROにアップグレードしました。

ドメインの取得と割り当て

はてなぶろぐPROは独自ドメインで運用する事が出来ます。

私は、普段はバリュードメインでドメインを一括して取得しているので、取得したドメインを管理画面から割り当てると簡単に設定できます。

バリュードメイン

はてなブログPROで収益を目的とした運用を使う際は、デザインの前に最低限のPRO申し込みと独自ドメインは取得しておくと良いです。

デザイン開始:ブログテンプレートを選ぶ

先述したようにブログを運営するにあたっては、最低限のデザインは必要。

かと言っても最近のアクセスはスマホ流入が圧倒的に多いので、シンプルで読み安いデザインを選べば良い。

色々調べてみると、人気なレスポンシブレイアウトの「Brooklyn」と「DUDE」というテーマは使っている方が多い。

ちなみにこちらのテーマを使っている方達のアクセスをSimilarWeb(crome拡張機能でボタン一つで見る事が出来る)で見ていると、SEO検索流入で月数万~数十万のアクセスを集めているブログでも使われていたので問題無いと思います。

「Brooklyn」と「DUDE」ともデザインは既に素晴らしくカスタムされていて、見出しやメニュー、ロゴ周りなどをテンプレートインストール後に好きな配色にすると、さらに自分のサイトテーマに合ったものになります。

記事の見出しをカスタムする

記事の見出しはテンプレートのままでも勿論良いのだか、少しCSSを足すだけでさらにオシャレな見出しになる。

こちらのブログを参考に見出しをデザインすると簡単にできる。
下のリンクはBrooklyn作者様のページ。

こちらも参考になる。

目次を作る

ブログの記事にとっての目次は、もはや当たり前かもしれません。

今は「はてな記法」と呼ばれるもので、記事の目次を入れたい箇所に、

[:contents]

と入力すると目次が自動で出力されるので活用しましょう。

そのままだと小見出しまで出力されるので、こちらのブログを参考にデザインを調整すると、目次の見た目がスッキリするのでご参考に。

シェアボタンをカスタマイズする

シェアボタンはデフォルトだと読み込み速度が遅いので、カスタムすると高速に表示できます。

こちらのブログを参考にすると、コピペするだけで一瞬でおしゃれなシェアボタンを作ることができるのでとてもありがたい。

他にも沢山のブログで、シェアボタンのカスタマイズ方法を公開しているブログがあるので「はてな シェアボタン カスタマイズ」でググると沢山出てきます。

グロ―バルナビを作成する

ブログのカテゴリ(方向性)がある程度決まった段階で、グローバルナビメニューも是非取り入れたい所。

グローバルナビは意外に上手く動かない事も多いけれど、サイト内の導線を増やすためには必須と言えるので是非チャレンジしたい所ですね。

読者ボタンをつける

はてなの一番のポイントは、やっぱりはてなブックマーク。

読者になるボタンはプロフィールの箇所に付いてはいるけれど、読者の方を増やすためにも、記事下のシェアボタンと一緒に目立つように配置しておきたいです。

こちらのブログが参考になります。

コピペでオシャレなボタンを付ける事が出来ます。

はてなブログのWEBアイコンフォントを使う

はてなブログではWEBアイコンが使えるとの事。しかし、コード一覧が良く分からないので探してみると、こちらのブログで一覧が紹介されていました。

例えばデザイン編集画面のHTMLコードに、

<i class="blogicon-home lg"></i>

と書くだけでアイコンが表示される仕組み。

もしこのブログのタイトルの様に

要素のIDかclassに差し込みたい場合、

#title:before{
font-family: "blogicon";
content: "\f028";
color:#669999;
}

この様に書けば差し込みされます。

スマホ版のデザインをカスタマイズする

「Brooklyn」と「DUDE」ともレスポンシブレイアウトになっているのでそのままでも良いのだけれど、スマホ版のデザインも少し編集できないか調べていると、ひつじの雑記帳様のサイトで最強カスタマイズがを公開されていたので早速実装。

 一つ一つコピペするだけで、あっという間におしゃれなスマホデザインが出来上がったのには感動。

 

AMP(Accelerated Mobile Pages)ページを使ってみる

AMPはgoogleが推奨している高速表示できる仕組みの事ではてなPROはAMPが使用できるとの事なので早速試してみる事にしました。

AMP設定は、管理画面⇒設定⇒詳細設定タブをクリックし、「ベータ版機能: Accelerated Mobile Pages (AMP) を配信する」にチェックを入れるとAMP対応になります。

はてなブログのAMPの表示確認は、

http://www.○○○.com/xxx/xxxxx?amp=1

とURL末尾に?amp=1と付けるとAMP対応した表示を確認できます。

ページの表示はAMPならではの快適な表示速度だけれど、残念なことに現状、肝心なデザイン面(拡張性)に難がある。

デフォルト表示範囲はヘッダーから本文、最後にはてな標準のツイッター、facebook、シェアボタン、ブックマークが付く所まで。

CSSによるカスタマイズが出来るのは、見出しやレイアウトまで。通常のPCページやスマホページで表示される、プロフィールなどは表示されない。

また、記事下などのHTMLを挿入できるスペースが用意されていない為、直帰率が高くなることが想定できる。

アドセンスコードも入れられる様だけれど、記事本文中に組み込まないと出来ない様子。

CSSカスタマイズは出来る様になっているけれど、AMPのHTML部分のカスタマイズは現状できない。

ワードプレスはAMPの拡張性が高い

ワードプレスでは「AMPプラグイン+Accelerated Mobile Pagesプラグイン」をインストールする事でアドセンスの設定からデザインの設定、メニューの配置も管理画面から比較的簡単に行える。

javascriptが使えない事、画像タグが専用になっている事、一部CSSに制限があるが、直接テンプレートファイルにサイドバーにある情報をHTMLコードやPHPコードを埋め込む事によって、ほぼ同じ見た目にする事が可能。

私も他サイトではテストでAMP対応しているが情報が増えても表示速度は高速になるのではてなブログでも是非対応したい所だけれど、現状では難しい。

現状、一般ブログの場合、AMPにしても検索順位自体はさほど変わりが無い(検索結果のカルーセル表示は別)なので、はてな側が対応してくれるまで待ってからでも遅くなさそう。

記事編集に役に立つCROME拡張機能

デザインが終わり、早速記事を書くにあたって、便利なプラグインがあったので紹介します。

SEO関連の問題で、通常の記事を書く時の「大見出し」は「h3」になるけれど、ボタン一つでh2に変換してくれるcrome拡張機能。他にも左・中央・右揃えや、記事を囲った部分をグレー表示できるのでとても便利。 

もう一つは画像タイトルとALT属性を編集できるcrome拡張機能。

画像のALT属性は編集した方がSEO対策的にも有利なので是非使いたいですね。

余分な広告やリンクを非表示にする

はてなブログPROはデフォルトで広告非表示が出来ます。

管理画面⇒設定⇒詳細設定タブをクリックし、「はてなによる広告を表示しない」にチェックを入れる広告が非表示になる。

また、「記事にキーワードリンクを付与しない」、「ブログにヘッダとフッタを表示しない(PC版のみ)」もチェックしておきましょう。

携帯版のデザインのヘッダとフッタ表示については、先ほど紹介したスマホデザインで非表示のCSSコードが紹介されているので対応できます。

尚、無料版では広告を非表示にするのは規約違反になるそうなので注意。

アドセンスを配置する

はてなブログPROを始めるにあたってはadsense広告は必須。

タイミングとしては5記事程アップしたところで申請すると通りやすいです。無難に申請が通れば晴れてアドセンスを貼ることができます。

広告を貼る場所は基本的には記事上と記事下の共通デザインカスタマイズ欄にアドセンスコードを張り付ければ動作します。

ただ、この先規約違反の警告で対象のページのみアドセンス広告を表示させたくない場合は記事下の共通広告コードだけでは非表示に出来ない為、こちらで紹介されているコードを使うと良さそう。

もちろん規約違反になるような記事を書かなければよいのだけれど、予期せぬ可能性もあるので、今後の参考にしたいですね。

記事中にソースコードを貼り付けする方法

こちらはあまりデザインとは関係ないのだが、記事中にHTMLやCSS、PHPなどのプログラムコードを記載する時の手順が幾つかあるので紹介します。

はてなブログを使っている方はブログ上級者の方も多いので、ソースコードを張り付ける際は参考になります。

後は記事を更新するのみ。

上記一連の作業を終えると、ブログデザイン&最低限の記事を書く為の環境が整うので、後は記事を更新するのみです。

はてなブログが初めての方は、必ずと言って良い程通る道なので、ハードルが高いとあきらめずに、記事を書き始める最初の段階で是非設定しておきたいですね。

一度設定すれば、後は記事を書く事に専念できますから・・・。

スポンサーリンク