LIFE LOG

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

LIFE LOGS

スマホアプリゲーム、pcsoft、Business、レビュー、ライフ、まとめ、ネットで稼ぐ他、役立つ情報を記録するLOG

はてなブログ超初心者必見!行いたいカスタマイズと覚えておきたい基本的な事

f:id:netalife:20161107214629p:plain

皆さんこんにちわ!

頻繁にタンスの角に足の小指をぶつける天狗宇です。

今回は「はてなブログ超初心者」として行っておきたいことや覚えておきたいことを書きたいと思います!

自分自身がはてなブログを始めたばかりということもあり、言うならば初心者、レベルで言えば「LV.1」で町の外にすら出ていない状態とも言えるでしょう。

まずは落ち着いて自分の装備を見つめ直す必要があります。

偉い人が言っていましたよね?

「武器と防具は装備しないと意味がないよ」と(村人でしたっけ)

あくまで「超初心者」に向けた記事というか、自分の記録でもあるので、すでにはてなブログで記事を書いている方は暖かい目で見てやってください!

目次

はてなブログ超初心者が行っておきたいカスタマイズ

まずはブログのデザイン(テーマ)に関してです。

やっぱりデザインがカッコ良い方がいいっ!デフォルトだとシンプル過ぎるのでまずは公式テーマストアから好みのものを探しましょう。

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

はてなブログはカスタマイズがしにくいと言われていたようですが、先駆者の方々や専門知識を持った方がカスタマイズ例をブログにあげてくれています。僕のような超初心者には本当にありがたい話です!

 

ブログカスタマイズ、早くも挫折か?!

調べたところProではない無料ユーザーは一部デザインがいじれなかったり、スマホのカスタマイズも行うことができません。なんてこった・・・始めたばかりで最初からProにするのは悩みます。

ちなみにはてなブログProの料金に関してですが

1ヶ月コース
1,008円 /月(税込)


1年コース
703円 /月(税込)
合計支払額 8,434 円(30%割引)


2年コース
600円 /月(税込)
合計支払額 14,400 円(40%割引) 

http://hatenablog.com/guide/pro

上記の3パターンになっていて、まとめて購入する方が割り引かれてお得になりますね!2年とか書き続けられるんだろうか…?初心者には若干敷居が高そうです。少しずつ記事を増やして、タイミングをみてProに切り替えるのが良さそうですね!

 

無料ユーザーとしてできる限りカスタマイズをやってみる

今回は無料ユーザーとしてできる限りカスタマイズを行ってみます。ダッシュボードからデザインを選択して画面を進めます。

f:id:netalife:20161107143613j:plain

次にテーマ一覧が表示されますので、ここで基本のテーマの変更が行えます。

f:id:netalife:20161107144147j:plain

クリックするとそのテーマのプレビューが見れますので便利です。

 公式テーマも悪くはないんですけど、物足りない感じはしますよね。そう思ったら一番下の「テーマストアでテーマを探す」をクリックして検索を行いましょう。

f:id:netalife:20161107143634j:plain

テーマストアで人気No.1の「Innocent」を使ってみます!※追記:現在当ブログは違うテーマを利用しています

Innocent - テーマ ストア

選択すると右側に「プレビューしてインストール」という青いボタンがあるので押します、作成済みで適用させたいブログを選択します。

f:id:netalife:20161107155730j:plain

これだけでデザインの変更ができるので簡単ですね。シンプルすぎるので少しカスタマイズを行います。

見出しのカスタマイズをする

見出しとは↑にある「見出しのカスタマイズをする」のことです。ブログを書いていると長くなると思うのですが、その途中で区切りを付けて読みやすくしたり、SEO効果、検索エンジンに適切な文章の構造を伝えるなど様々な利点があります。※はてなブログProを利用していないとスマホのカスタマイズを行うことはできません。制約付の上で、PCのみカスタマイズが可能です。

 

このテーマですと、デフォルトの見出しは太字になっているだけです。下記ブログ、ゆきひーさんの記事を参考にカスタマイズを行いました。すごくわかりやすいです!

www.yukihy.com

上記の記事から「左だけど背景」のソースコード、英文字をコピーして

f:id:netalife:20161107162833j:plain

デザインCSSの部分にコピーしたソースコードを貼り付けるだけです。下記は実際に貼り付けた際の画像になります!

f:id:netalife:20161107162927j:plain

color = 文字の色
background = 背景色
border-left = 左側の線の色

このブログではcolor=#000000で黒色
背景色は#f3f3f3で薄めの灰色
左側の線の色は#000000で黒色になっています。

色を変えるには#の横にある英数字を変更する必要があります。何の英数字が何色かわからないよっ!という方はWEB色見本のサイトをオススメします!

www.colordic.org
自分好みの色にカスタマイズしてみてくださいね。

スマホのカスタマイズを行う

次はスマホのデザインなのですが、Proでないと全くと言って良いほどカスタマイズができません。画像はデフォルトの状態です。

f:id:netalife:20161107170427p:plain

はてなブログProでない場合はブログアイコンの変更と、スマートフォン用に画像を設定することしかできません。

f:id:netalife:20161107171026j:plain

ブログ名にちなんで「俺」という画像をアイコンにしています。何もしないと味気がないので、スマートフォン用に画像を設定しちゃいましょう。

f:id:netalife:20161107171448j:plain

画像をアップロードしてそのままプレビューで見れるので、気に入らなければすぐに外せますし、画像だけ表示させることも可能です。

パッとしない…ここは頑張ってオリジナルのロゴを作成してみます!

スマートフォン用の画像をCoolTextで作成してみよう

画像作成と言うと難しく聞こえるかもしれませんが、WEB上で簡単にロゴが作れるサイトがあるので、そちらを利用して作成してみたいと思います。

ロゴ及び画像ジェネレーター - Cool Text

使い方はめちゃくちゃ簡単!まずはじめに表示されている様々なロゴデザインの中から、気に入ったものをクリックして選択します。

f:id:netalife:20161107183517j:plain

ロゴテキストの部分に文字を入力するだけで反映されちゃいます。

 f:id:netalife:20161107183522j:plain

テキストサイズはデフォルトで70ですがもちろん変更可能です。フォントの部分をクリックすれば文字の種類を変える事ができますし種類も豊富ですよ!

f:id:netalife:20161107183526j:plain

Logoの部分では種類によってグラデーションをいじったりすることも可能。

f:id:netalife:20161107183529j:plain

Imageではサイズ調整やバックグラウンド、ファイル形式の指定なども行うことができますよ!

f:id:netalife:20161107183559j:plain

CompositeではNew Layerの機能も使えます。これらすべてWEB上で完結し後はCreateLogoをクリックするだけで完成です!

実際にCoolTextで作ってみたのがこちら!

f:id:netalife:20161107172949p:plain

何もないよりは良いかなってことで早速画像をアップロード。

f:id:netalife:20161107205525j:plain

ちょっと感じが変わりましたね。また時間のあるときに色々といじってみようと思います!さらにカスタマイズを行うのであればはてなブログProは必須になりそうですが… ※ごめんなさい、早くもブログ名変えました

覚えておきたい基本的なこと

記事投稿、写真を投稿、カテゴリー、編集オプションなど

はてなブログを書く上で覚えておきたい、基本的なことに関して書いておきます。メニューの「記事を書く」を押せば簡単にブログ作成に入ることができます。

ブログ記事の右上のメニューを活用しましょう。

f:id:netalife:20161107211222j:plain

ブログを書いてる途中で写真を挿入する際は、写真を投稿からファイルをアップロードします。また、アップロードした写真の中からアイキャッチ画像を選ぶ形になるので、忘れずに選択を行っておきましょう。

間違えてアップロードしてしまった、画像を削除したい!となった場合は「フォトライフ」をクリックしてHatenaFotolifeを開く必要があります。

f:id:netalife:20161107213856j:plain

今までアップロードした写真の一覧が見れるのと、上記メニューの「フォルダを編集」から画像を回転させたり、削除、他には画像をまとめてアップロードするなども可能です。

 

カテゴリー

増やす際はこちらから入力してEnterを押すだけで増やせます。

 

編集オプション

投稿日時の編集、もちろん指定日時での予約投稿も可能です。

 

カスタムURLは重要

記事を投稿する際にURLを任意の文字列に変更することができるのですが、忘れずに入力を行ったほうが良いです!

はてなブログは投稿する際にデフォルトのままですと自動的に日時の数字がつきます。これはURLが長くなり、不利と言ったら大げさかもしれませんが、検索エンジンに不親切といえます。

面倒かもしれませんが、たとえばこの記事だったらカスタムURLの部分に「hatenaburogusyoshinsya」などと入力した方が意味も伝わりますし、SEO的にも良くなります。

劇的な違いがあるかは定かではありませんが、WordPressで記事を書いている方の多くはカスタムURL(任意の文字列)の変更を行っているのが何よりの証拠ではないでしょうか。※SEOに関しては複雑かつ長くなってしまうため、ここでの説明は省かせていただきます。自分自身詳しくわかっていないので…

 

アイキャッチ画像に関して

更新する記事をあらわす画像を指定できます。たとえば誰かがあなたの記事をシェアして紹介してくれた際、注目のエントリーに掲載された際などに記事と一緒に表示される画像を決めておくことができます。

せっかく時間をかけて書いた記事なのですから、アイキャッチ画像も忘れずに設定しておきたいところですね。

記事を書いた後は目次を入れたかチェック!

見出しの設定を行っておけば、はてなブログ専用のショートコードで目次を自動的に作成してくれます。

staff.hatenablog.com

目次を挿入したい行に、次のように[:contents]と記述します。前後には文字や空白を入れず、1行で指定してください。staff.hatenablog.com

 使い方はとっても簡単!記事を改めてチェックするのにも良いですね。

ブログ記事の更新は何時がベストなの?

書いた記事を更新する時間はいつがベストでしょうか。

ある人は「朝が良いよ!」と書いていたり「昼の12時だ!」という意見もあれば「20時前後がゴールデンタイムだろ!」という人も居ます。

総務省のデータによるとインターネットの利用者は午前中は8時の時間帯がピークで少しずつ下がり、12時に上昇を行い、最大のピークは20時から22時の間というデータが出ています。

総務省|平成25年版 情報通信白書|トピック:情報通信メディアの利用時間と情報行動

データ上だけで見ると20時から22時の間が狙い目と言えますが、「毎日20時から22時の間に更新していたから、たまには朝の8時に更新してみようかな」など変則的に更新時間を変えてみるのも面白いかもしれません。

まとめ

自分自身学びながら書いていたので長くなってしまいました…。

ブログのデザインはテーマストアから簡単に変えられる。

はてなブログProでないと制約がありますが、無課金でも多少変えることができる。

記事投稿やメニューに関する基礎知識。カスタムURLの重要性、記事の更新時間など。

 

まだまだ、た~くさん掘り下げて学ぶべきところがあるので、これからも学んで行きたいと思います。見てくださった方、本当にありがとうございました。