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

【はてなブログ初心者必見】 最初にするべきカスタマイズ・デザイン設定 まとめ




スポンサードリンク



この記事をシェアする

このブログを本格的に運営し始めて、1ヶ月と少し経過しました。

大学生活が予想以上に忙しく、またこの暑い季節、自分の体調が優れない事もあり、なかなかブログに集中出来ていないのが現状です。

ブログやホームページなどの知識が”全くのゼロ”からスタートした僕でしたが、一応ブログの方針は決まり、基本的なデザインの設定はだいたい終わりました。もちろん、まだまだ改善の余地はあると思うので、今後も修正はしていきますが。

ということで今回は、僕がブログの設定・デザインを色々考えた上で、はてなブログ初心者が絶対に最初に知っておきたい基本的な事や、やっておくべき設定などをまとめて記事にしてみました。

完全なる初心者からスタートした僕だからこそ、気が付いた点などもあると思うので、是非ブログ完全初心者の人参考にしてみて下さい。 

 

 

まずはコピペで人の真似をしよう

もう上の見出し見てもらえればわかりますよね。コピー&ペースト、これ最強です。 

完全ブログ初心者の人は、ネット上で紹介されているデザインなどを真似してしまえばいいんです。

『ブログ デザイン』『ブログ コピペ』『css ブログ コピペ』などでテキトーに検索すれば、色々と紹介してくれているサイトがあります。

「これ使いたい!」と思うやつをガンガン盗んで取り入れてみましょう。

(※cssについては次の章で説明します。)

 

完全な初心者ならどこに何をコピペするのかすら分からないですよね。僕もそうでした。

ですが、紹介してくれてるサイトはだいたい丁寧に説明してくれているので、そこまでつまずく事は無いと思います。

よく、『ブログは何の知識も無くても、誰でも簡単に運営する事ができる!』みたいな事を目にします。確かに誰でも簡単にブログを作って記事を書いて投稿して、って出来ますよ。

出来ますけど、それだけだとブログの見た目はかなり味気ないです。やはり運営し始めて自分のブログを見てみると、デザインとかカスタマイズしたくなっちゃうんですよね。

 

ブログの見た目や第一印象って、読者を意識するにしても、自分のモチベーション的にも大事だと思います。

自分なりのデザインがある程度決まってくると、そこに必然的に個性も出てきますし、自然と愛着も湧いてきます。

ですが、ブログ初心者にはデザインを自分でカスタマイズするのは骨が折れます。僕も始めた頃はさっぱりわかりませんでした。

 

だからコピペで良いんです。

コピペするためブログのデザインをいじっている内に、分かってくる事も多々ありますからね。

どうしても最初から自分で勉強して一からやってみたい!という人は、やってみても良いかもしれませんが、はっきり言ってシャレにならないくらい効率悪いです。コピペで真似をしながら、少しずつ学んでいけばいいと思います。

 

”CSS”とは何だろう?

はてなブログの”デザイン”という欄を選択すると、ページ左側の1番下に”デザインCSS”というのがあります。

ここに様々な文字列を打ち込むことによって、ブログのデザインや文字の大きさ、書体、そのほか様々な設定をする事ができます。

 

▼下の画像は僕の今のデザインCSSです。なんか文字がいっぱい書いてありますよね。これ、ちょっとだけイジったりはしましたが、ほぼ全部コピペです。

f:id:shibaccho:20160810011935p:plain

 

”HTML”・”タグ”とは何だろう?

 

HTML (エイチティーエムエル)

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略

「HTML」とはブログサイトやホームページなどウェブサイトを作成する際に使用するコンピュータ言語の一種。

「タグ」はウェブサイトの文字サイズやレイアウト、リンクなど様々な表示や効果を決定する為の文字列。

 

▼はてなブログには記事管理画面に“HTML編集”という記事編集方法があります。

f:id:shibaccho:20160810012008p:plain

 

<strong></strong>とか、<span style="font-size: 150%;"></span>とか。この青色の文字がすべてタグです。

タグにはそれぞれ意味があり、例えば上にあげたstrongタグを用いると文字を太文字にしてくれます。

やり方は<strong>顔面崩壊ブロガーしばっちょ</strong>

と入力すれば、 

顔面崩壊ブロガーしばっちょ

という風に表示されます。

 

見出しをオシャレにしよう

”見出し”とはまさに上の、『見出しをオシャレにしよう』と書いてある部分のことです。ここが見やすいと、記事の文章にメリハリが付いてとても読み易くなります。

 

▼はてなブログでは、記事を書く画面の左上にあるので、非常に便利ですね。

f:id:shibaccho:20160810012056p:plain

このブログを運営する前にseesaaブログで少しだけ記事を書いた事があるのですが、seesaaブログには見出し機能はありませんでした。

 

見出しの設定方法

(⇧これも見出しです)

ブログを作りたてで、まだ何もイジっていない時であれば、記事の文字に見出しの設定をしてもただ単に文字が少し大きくなる程度で、記事にメリハリが出ません。

どーせ見出しを使うのであれば、オシャレにしちゃいましょう。

設定方法ですが、もちろんこれもコピペで簡単にできます。

 

▼ネットではいろんなサイトが見出しの見本を公開しているので、それを参考にしてみてください。

www.nxworld.net

 

サイトで気に入ったデザインがあれば、文字列をコピーして、先ほど上で説明した“デサイン”➡“デザインCSS”の欄に張りつけます。

 

※ここで少し注意しないといけない事があります。

1か月前の僕のような、ブログ完全初心者の方なら知らないと思うのですが、見出しには<h>タグを用います。

はてなブログの見出しには、「大見出し」「中見出し」「小見出し」があり、それぞれ順番に<h3></h3>、<h4></h4>、<h5></h5>と番号が振られています。

 

だから例えば「大見出し」を、“デザインCSS”に張り付けた文字列に対応するデザインにしたい場合、文字列の左端にある“h~”の“~の部分の数字”を“3”に変えないといけません。「中見出し」なら“4”に、「小見出し」なら“5”に、ということです。

 

見出しをオシャレに変更する手順を再度まとめると、

  1. 上に載せたサイト(もしくは他のサイトで好きなのを探してみて下さい)で、自分の好きなデザインを探す
  2. 文字列をコピーする。
  3. ブログの“デザイン”➡“デザインCSS”を開いて張り付ける。
  4. 大、中、小見出しのどれにするか決め、文字列のh~の部分の数字を変更する。

 

やってみれば簡単だと思います、数分あれば出来ます。

 

【記事下】にプロフィール・あわせて読みたいを設置

まずは記事の下にプロフィールを設置する方法。

だいたい、なんでプロフィールを記事の下なんかに設置する必要があると思いますか?答えは簡単、記事を読み終えた人が、もしかしたら画面をそのまま下へ下へとスクロールするかもしれません。

その時に自分のプロフィールがあれば、「へえー、この記事はこんな人が書いてるんだー。」と印象に残りやすいからです。僕は結構目立ちたがり屋なので、自分の顔写真をデカデカと貼ってあります。

今この画面を見ているあなたは、「画面の右にもデカデカと貼ってるやん。。。」と思っているかもしれませんね(笑)その方法はこの記事の最後で紹介しています。

 

記事下への“プロフィール”設置方法

“デザイン”➡“記事”の中の“記事下”という欄を開き、HTML形式(つまりタグを用いて)で表示したい内容を書き込むだけです。

面倒な人は、”サイドバー”のプロフィールを丸まるコピーして貼り付けてもいいかと。

 

記事下への“あわせて読みたい”設置方法

“あわせて読みたい”って何だよ、と思うかもしれませんが、その名の通り、その記事に関連する記事などを自動で表示してくれる機能です。

これも“記事下”に貼るだけです。何を貼るか、ですが、以下の記事の中盤ほどにある文字列をコピペするだけです。 

「あわせて読みたい」の文字は、もちろん自分の好きな文字に変える事ができます。

 

SNSボタンを設置しよう

自分のブログ・記事を多くの人に見てもらいたいと思うのであれば、ツイッターやフェイスブックに記事を投稿しましょう。

ツイッターのRTやフェイスブックにシェアをしてもらえれば、自分の記事が拡散していく可能性があり、より多くの人が読んでくれることになります。

 

僕はまだSNSは本格的に利用していないのですが、もう少しブログの記事増えて来たら、徐々に利用頻度を増やしていこうと思っています。

 

SNSボタンをつくるのにメジャーなのが、“忍者ツールズ”というサイトです。

簡単な登録ですぐにボタンを作ることができます。もちろん無料です。

 

画面右の僕の『フォローする』というツイッターのボタンも忍者ツールズで作りました。

今そこを見たあなた、是非フォローボタンをポチッと押して僕に絡みに来てください!!(笑)

 

忍者さん以外にも、オシャレなSNSボタンを作って公開してくれているサイトなども多々あるので、是非調べてみて下さい。

 

サイドバーに好きな要素を固定

サイドバー固定は、僕もつい最近設定したところです。

今この記事を読んでいるあなたの画面右には、ずっと僕のプロフィールが表示されていますよね。これの事です。

追記:現在このサイトでは、サイドバー固定はやめました。

びっくりするくらい簡単なので、是非やってみて下さい。以下の記事の文字列をコピーして、“デザイン”➡“フッタ”に貼るだけ!コピペ一発!

 

▼こちらの記事を参考にさせて頂きました。

blog.yutorigoto.com

 

▼記事の文字列をコピーしようとすると、一番左の必要ない数字までコピーされてしまいます。

f:id:shibaccho:20160621213656p:plain

 

▼“フッタ”にコピペが完了したら、一番左の必要のない数字を消してしまいましょう。

f:id:shibaccho:20160621213927p:plain

 

ちなみにサイドバーに固定で表示されるのは、“デザイン”➡“サイドバー”と表示した時に、一番下に設置したモジュールです。

 

だから、僕の場合はプロフィールになっています。このモジュールの順番はドラッグで自由に並び替えられるので、自分がサイドバーに固定したいものを一番下にしておきましょう。

f:id:shibaccho:20160621214000p:plain