Bell Life USA

国際結婚・子育て中!アメリカ生活ブログ

移転しました。

約3秒後に自動的にリダイレクトします。

はてなブログでもできる!タイトルや記事デザインの変え方!!

f:id:bellmamakell:20190227141220p:plain 

 

2日くらいかけてブログ記事やタイトルデザインなどの変更を調べていました!家事も子育てもほっぽらかして、米旦那に怒鳴られながら(本当に怖かったよ~!)頑張った成果を、ここに発表します!

 

 

 目次
ここには目次をいれようと思います。しっかり見れていますか?

.

.

ここにはh2見出しです。ブルーにしました!

シンプルなのが結構好きです。

デザインは沢山ネットにあふれているので、自分の好きな物を探します!

 

ここはh3見出しです。

h2見出しとh3見出しは同じ色にしました。色でゴチャゴチャしたり、あとで自分で何色か分からない・・なんて事を防ぎたかったからです。

 

文章にラインマーカーを入れる事もできます

ラインのピンクはこんな感じ

ラインの緑はこんな感じ

ラインのオレンジはこんな感じ

ここは文章中にラインを入れるHTMLでデザインしました。

 

全部BELLのスキな色だね!

ポイントを分かりやすく!まとめます!!

 だらだら話されるより、箇条書きで、補足説明を読むくらいが人間の脳にはちょうどいいはずです!

ここら辺でポイントをまとめましょう!

■ポイント
  • 初心者はシンプルが一番!
  • HTMLをネットでコピーしたら保存してからアレンジしよう!
  • こうやってそれぞれの枠の役割を決めておくとデザインに困らないよ!

どうですか?見やすいですか?ここら辺で前回学んだことを挟んでみました!

 

belllifeusa.hatenablog.com

 

言いたい事を強調するための枠

見出しと同系色にして、ここで言いたい事をできるだけ簡潔にまとめられるようにしました。例えば・・・

①こんな風に割と見出しのすぐそばとか
②見出しの一番したの要約とか
③手順の説明を枠付けで見やすく

します!

.

ブログ管理に必要なひと手間!

自分の言いたいことだけではなく、どこから引用・参照したのかを明記する必要があるときに、これを使おうと思います!
 
 参照(あわせて読みたい・関連記事・引用・参考にしたブログ)

.では、実際に参照したブログの数々を貼っていきます!

.

WEB色調べのサイト

www.colordic.org

参考にしたブログ(THNKAS)

ameblo.jp

www.notitle-weblog.com

saruwakakun.com

.

ameblo.jp

 

■ポイント
  • CSSによるデザインの変更ばかりでHTMLは探しにくい!
  • HTMLの編集だけでもここまでアレンジできた!

 

やりかたについては、これ以上パソコンをいじっていると、再び夫婦喧嘩勃発しそうなので、自分のブログでの使い方になれてきたらHTMLコピーなどを貼ろうと思います!

 

次は『真ん中に画像やリンクを貼る方法』『リンクのボタンの作り方?』を勉強していこうと思います!

マミーを応援してあげてね!

 

note.mu