syu_rei’s weblog

30代ワーママ。育児と仕事と趣味、その他日常。

MENU

ブログ初心者はコピペでカスタマイズする前にメモの仕方を知るべき

f:id:syu_rei:20190623103125j:plain


こんにちは。カスタマイズが楽しくて仕方ないsyu_reiです。

メニューバー設置してみました!

はてなブログは検索するといくらでもカスタマイズが出てくるので、とても楽しいです。

先輩方ありがとうございます。

 

はてなブログ超初心者に伝えたい!

 

コードは分からなくても、メモの書き方だけは覚えよう!

htmlだと <!--メモ-->

CSSだと /*メモ*/

 

コピペでいくらでもカスタマイズできるけど、コードを管理するのは自分!

 

メモが書けると以下のように便利に使えます。

 

メモを書くことでコードの区切りを明確にできる

コピペばっかりで作られた私のコード。わからないままに貼るので、ごちゃごちゃに。

境目が分からなくなりました!(+_+)

メモすることでなんのコードだかわかるようになります。 

f:id:syu_rei:20190623105231p:plain

 ※ちなみに/*サルワカさん*/枠の上は、はてなブログのスタイルと壁紙についてのメモのようです。最初から記入されていました。

 

どこのサイトからのコピペか書いておけば後々修正しやすい

ちょっと色だけ変えたいな、幅を少し変えたいなってとき、どこを直したらいいかわからないことありませんか?私はあります。

コピペ元のサイト様に戻って、どこを変えたらいいか確認しようと思っても、そもそもどこから持ってきたコードなのかわからない…なんてことにならないように、キーワードくらいはメモしておくべきだと思います。

 

あと、カスタマイズの中で、htmlとCSS両方にコードを記入する場合があります。

ちゃんと引用元をメモで書いておけば、もし、そのカスタマイズを修正したり、削除したくなったときに、どのhtmlとCSSがセットになっているのかを知ることができます。

 

リンクの境目を明確にできる

メモ書きを覚えると、広告のリンク貼るときにも便利です。

私はサイドバーのリンクを貼り替えるのに、結構苦労しました。

 

コピペで張ったリンクがズラーッ

どこからどこまでが1つのバナーなのか分からん…

 

バナーを貼るときに、メモで「楽天ママ割」とか書いておくだけで管理が格段に楽になります。もともと、改行で分けてたつもりでしたが、バナーのコードの中で改行されてるものがあったようで途中で分からなくなりました。日本語で書けるメモって大事。

f:id:syu_rei:20190623103237p:plain

 

htmlとCSSの区別がつく

コピペするにあたって、貼り付け場所がよく分からないときがあります。

はてなブログの設定画面で、htmlとCSSの区別がつかないことがありますよね。機能を理解していれば迷うことはないのかもしれませんが、私は、分かりませんでした。

そんなとき、メモ書きを書いてみれば、htmlとCSSどちらなのか一目瞭然です。

間違ったメモはそのまま表示されます。

f:id:syu_rei:20190623105847p:plain

html記述のところにCSSメモ書き(/*メモ*/)を使ってもコードとして認識されないため、そのまま表示されます。 

 

勉強すると楽しい

全くわからないままコピペするよりも、ちょっと分かってコードを張り付ける方が楽しいです。

はてなブログは貼った瞬間に反映されるので、長いコードは分割していれてみたりしています。どのコードが何に対応しているのか分かって勉強になります。

サルワカさんのサイトで勉強中です。とてもおしゃれで見やすいです。Webデザイン入門がとても分かりやすくて、これが無料で公開されてるなんて信じられない気持ちです。まだステップ3あたりをウロウロしていますが、少しずつ分かってきて楽しいです。

saruwakakun.com

 

ブログが自分好みになっていくのは楽しいものです。

はてなブログは本当に先輩方がたくさんの種類のコードを無料で公開してくださっていて、本当に何もわかっていない超初心者でもカスタマイズができます。

 

あなたも是非カスタマイズ挑戦してみてください。