ANAと陸の魔王

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

ANAと陸の魔王

仕事・プライベートを666%充実させる方法

【初心者が10分でそれっぽくなる】ハテナブログの簡単カスタマイズ

f:id:rikunomaou:20161108210912p:plain

ブログのカスタマイズ楽しいですよねー

 

気づいたら2時間くらいたってて

肝心の記事全く作ってない!

なんて日もよくあります

 

反省してます

 

htmlとかわかんない初心者はどこまで、手を出すべきなのか?

 

コードの内容がわかんなくても、コピペだけですぐできる カスタマイズをまとめましたので、参考にしてください。

 

無料会員でもできるカスタマイズです

 

1.テーマを選択

パソコン版とスマホ版でデザインは分けられるのですが、問題があります。

 

無料会員はスマホの記事のhtmlが変更できないところです。

レスポンシブデザインのテーマを選択すると、スマホ画面でも同じように見ることが出来るので、レスポンシブ対応のテーマにしてください。

 

いまや時代はスマホです

電車の中は、みんなスマホ使ってますよね

デザインを変えるなら、スマホを優先したいです。

f:id:rikunomaou:20161106170603p:image

 http://markezine.jp/article/detail/22984

 

このブログでもレシポンシブデザイン対応の「innocent」をつかっています。

 

手順

①レスポンシブ対応のブログテーマを探す

②テーマを設定

③デザイン>スマートフォン>詳細設定>「□レシポンシブデザイン」にチェック

④変更を保存する

 

f:id:rikunomaou:20161108201609j:plain

 

テーマ「innocent」

moonnote.hateblo.jp

 

2.文字の大きさと行間

パソコンの文字小さすぎない?

スマホの行の間隔空きすぎじゃない?

 

こんな違和感ありませんでしたか

私はありました。

でも他のブログをみると、ちゃんと治っています

 

編集みたままで文章を作ってから、htmlの編集画面を見ると、文章が<p>で囲まれています。<p>は段落の指示なので1行分空いてしまいます。

<p>の設定を変えましょう。

 

行間の調整手順

  1. 下のコードをコピー
  2. デザインCSSに張り付ける

.entry-content p { margin:0}

http://web-ken.hatenablog.com/entry/2013/10/16/182058

 

f:id:rikunomaou:20161109204749j:plain

 

<p>と<br> の違い参考サイト

yossense.com

 

文字の大きさ手順

  1. 下のコードをコピー
  2. デザインCSSに張り付ける
  3. 文字の大きさを調節 (今20とある部分)

.entry-content {    font-size:20px;}

http://nukio0803.hatenablog.com/entry/2014/04/03/213944

 

 既存の設定は14になっています

15~16くらいが見やすいと思います。

 

3.オリジナル見出しをつける

 このブログでは大きな見出しと、小さな見出しの2つを使っています。

 

記事のhtmlを、毎回編集してもできますが、

見出しを、変えたくなったら、全部の記事を回って変更することになってしまいます。

 

ですので、cssにをかいて、どんな言葉でそのデザインを呼び出すか決めておきます。

 

そうすると、どんなに凝った見出しでも、記事中のhtmlは短くてすみます。

 

手順

  1. デザインcssに「.」の後に名前をつけて貼り付ける
  2. 指定した「.名前」を記事のhtmlに書きhで囲む

 (例)記事HTML編集画面:<h2 class="名前">見出し名</h2>

shiromatakumi.hatenablog.com

 

 

見出しの数字

見出しの<h○>←ここの数字が小さい方が重要です。

タイトルがh1になるので、見出しはh2〜つくれます。

  • <h1>タイトルに自動でついてる</h1>
  •        <h2>大見出し</h2>
  •                 <h3>中見出し</h3>
  •         <h2>大見出し</h2>

こういうイメージです

 

一つ注意する必要があります。

ハテナブログにも見出しボタンありますよね

でも大見出しがh3になってます

 

オリジナルの見出しを作るなら、h2から作っていきましょう

 

▽参考考察ブログ

hatena.aaafrog.com

 

 

4.目次をつける

見出しをつけたら、記事の中に目次を自動で作れます。

 

一言書くだけで完了です

 簡単だけど、長い文章はとても見やすくなります

 

手順

  1. [:contents]と書く、以上

staff.hatenablog.com

 

まとめ

  1. テーマ変更
  2. 行間と文字の大きさ
  3. 見出しとSEO対策
  4. 目次

紹介したこれらは、すごく簡単です。

この4つをやれば、まずはブログっぽくなるでしょう

 

せっかく内容がよくても、読みづらくて違うページに移動されてしまえば、勿体無いです

 

ブログカスタマイズに凝り始めると、終わりがありません。

たくさんの情報を記入すると、htmlの知識もないので、後から見たときにわからなくなってしまいます。

 

ブログ開設すぐは、ある程度のカスタマイズを整えたら、記事を書くことに専念するほうがいいと思っています。

 

おまけ

htmlなどを編集追加するときは、下のコードの中にメモを入れると、後から確認することができます。他のコードとは区別されて無効となります。

なんのコードなのか忘れないように、書いておきましょう

 

記事上下・ヘッダー・フッター

<!--メモ-->

 

デザインCSS

/*メモ*/

 

 

広告を非表示にする