在米主婦のお仕事

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

専業主婦、初心者ブロガーがブログを始めてから、色々と独学でプログラミング(言いすぎか)ブログの知識を付けています。

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

htmlとかCSSとか分かってしまった自分に自惚れ中です。初心者・ママブロガーの励みになれば嬉しいです!海外(アメリカ田舎)から頑張ってます!

https://belllifeusa.com/americausa/html-blog2/

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

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

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

ここはh3見出しです。

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

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

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

ラインの緑はこんな感じ

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

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

全部BELLのスキな色だね!

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

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

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

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

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

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

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

します!

.

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

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

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

https://belllifeusa.com/americausa/html-blog2/

WEB色調べのサイト

www.colordic.org

参考にしたブログ(THNKAS)

ameblo.jp

www.notitle-weblog.com

saruwakakun.comameblo.jp

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

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

note.mu

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です