【初心者が１０分でそれっぽくなる】ハテナブログの簡単カスタマイズ
ブログのカスタマイズ楽しいですよねー
気づいたら2時間くらいたってて
肝心の記事全く作ってない！
なんて日もよくあります
反省してます
htmlとかわかんない初心者はどこまで、手を出すべきなのか？
コードの内容がわかんなくても、コピペだけですぐできる カスタマイズをまとめましたので、参考にしてください。
無料会員でもできるカスタマイズです
1.テーマを選択
パソコン版とスマホ版でデザインは分けられるのですが、問題があります。
無料会員はスマホの記事のhtmlが変更できないところです。
レスポンシブデザインのテーマを選択すると、スマホ画面でも同じように見ることが出来るので、レスポンシブ対応のテーマにしてください。
いまや時代はスマホです
電車の中は、みんなスマホ使ってますよね
デザインを変えるなら、スマホを優先したいです。
このブログでもレシポンシブデザイン対応の「innocent」をつかっています。
手順
①レスポンシブ対応のブログテーマを探す
②テーマを設定
③デザイン>スマートフォン＞詳細設定＞「□レシポンシブデザイン」にチェック
④変更を保存する
テーマ「innocent」
2.文字の大きさと行間
パソコンの文字小さすぎない？
スマホの行の間隔空きすぎじゃない？
こんな違和感ありませんでしたか
私はありました。
でも他のブログをみると、ちゃんと治っています
編集みたままで文章を作ってから、htmlの編集画面を見ると、文章が<ｐ>で囲まれています。<ｐ>は段落の指示なので１行分空いてしまいます。
<ｐ>の設定を変えましょう。
行間の調整手順
- 下のコードをコピー
- デザインCSSに張り付ける
.entry-content p { margin:0}
http://web-ken.hatenablog.com/entry/2013/10/16/182058
▽<ｐ>と<ｂｒ> の違い参考サイト
文字の大きさ手順
- 下のコードをコピー
- デザインCSSに張り付ける
- 文字の大きさを調節 （今20とある部分）
.entry-content { font-size:20px;}
http://nukio0803.hatenablog.com/entry/2014/04/03/213944
既存の設定は14になっています
15～16くらいが見やすいと思います。
3.オリジナル見出しをつける
このブログでは大きな見出しと、小さな見出しの2つを使っています。
記事のhtmlを、毎回編集してもできますが、
見出しを、変えたくなったら、全部の記事を回って変更することになってしまいます。
ですので、cssにをかいて、どんな言葉でそのデザインを呼び出すか決めておきます。
そうすると、どんなに凝った見出しでも、記事中のhtmlは短くてすみます。
手順
- デザインcssに「.」の後に名前をつけて貼り付ける
- 指定した「.名前」を記事のhtmlに書きhで囲む
（例）記事HTML編集画面：<h2 class="名前">見出し名</h2>
見出しの数字
見出しの<h○>←ここの数字が小さい方が重要です。
タイトルがh1になるので、見出しはh2〜つくれます。
- <h1>タイトルに自動でついてる</h1>
- <h2>大見出し</h2>
- <h3>中見出し</h3>
- <h2>大見出し</h2>
こういうイメージです
一つ注意する必要があります。
ハテナブログにも見出しボタンありますよね
でも大見出しがh3になってます
オリジナルの見出しを作るなら、h2から作っていきましょう
▽参考考察ブログ
4.目次をつける
見出しをつけたら、記事の中に目次を自動で作れます。
一言書くだけで完了です
簡単だけど、長い文章はとても見やすくなります
手順
- [:contents]と書く、以上
まとめ
- テーマ変更
- 行間と文字の大きさ
- 見出しとSEO対策
- 目次
紹介したこれらは、すごく簡単です。
この4つをやれば、まずはブログっぽくなるでしょう
せっかく内容がよくても、読みづらくて違うページに移動されてしまえば、勿体無いです
ブログカスタマイズに凝り始めると、終わりがありません。
たくさんの情報を記入すると、htmlの知識もないので、後から見たときにわからなくなってしまいます。
ブログ開設すぐは、ある程度のカスタマイズを整えたら、記事を書くことに専念するほうがいいと思っています。
おまけ
htmlなどを編集追加するときは、下のコードの中にメモを入れると、後から確認することができます。他のコードとは区別されて無効となります。
なんのコードなのか忘れないように、書いておきましょう
記事上下・ヘッダー・フッター
<!--メモ-->
デザインCSS
/*メモ*/
