BabyJ's Diary: グローバル思考で行こう!

英語を使って働くこと、自分らしい仕事生活、外国人とのつきあいや異文化体験、役立つ学びの紹介など

ブログ模様替え 英語とHTML&CSS習熟への道は同じ【学び 19】

f:id:bjlewis4u:20180505164548j:plain

こんにちは、BabyJです😊。

GWも後半に入りましたね。皆さんはいかがお過ごしですか?

私は、会社の人からヒンシュクを買いつつも、9連休にし、前から予定していたブログの振り返りと今後の計画、そして、今までできなかったブログカスタマイズに没頭しております。たまにぼちぼち出かける以外は。

今日は、そんなカスタマイズの試行錯誤についてお話ししたいと思います。

ブログのデザインを好きなように変えたい

他の人のブログで、クールな記事タイトルやキーワードのアンダーライン、吹き出し、プロフィール、自然でかっこいい広告配置など、いろいろ見るにつけ、私もあんな風にしたいと思っていました。

当然ながら、たくさんの方が、ブログデザインのカスタマイズ方法やコピペすれば使えるコードを載せている。

けれども、昔からITが大好きで、Macのカスタマイズなんかをやっていた自分としては、ちゃんと自分でコードが書けるようになりたいと思っていたのでした。

コピペするにしても、なんだか分からないままでは、自分が気持ちが悪いから。

HTMLとCSSの勉強を続けたけれど

そうは言っても、普段は会社から帰ったら、ブログを書くのがやっと。じっくり勉強する時間がない。朝が早いので遅くまで起きていられない。洗面所でオンラインスクールSchooのHTMLとCSS講座を何度も視聴したり、いろいろと買った本を電車の中で読んだり、隙間時間に勉強するだけだった。

自分で実際にコードを書いてみる、英語で言えばアウトプットする機会がないままだった。

けれども、英語が分かるから、HTMLやCSSのタグの意味も見ただけで分かるので、結構簡単かも、などと思っていた。

HTMLタグはウェブの構成要素の名前と機能を表すコード。送りタグ<h3>と返しタグ</h3> の間に文字を書く。タグは英単語やその頭文字だから分かりやすい。

<h3>女課長に嫌な顔される</h3>

 * "h3"header 3 記事の中見出し

<p>休むべき事情とされない</p> 

* "p"paragraph 段落

CSSタグは、HTMLタグに対するデザインを表すコード。「どのHTMLタグ」の「何を」「どうする」かを決める。

 タグ要素 (どのタグの?)  { プロパティ(何を) :   (どうする)  ;   } と記述する。

p {color: blue;}  

 どのタグの?→ 段落タグの

 何を?→ 色を

 どうする?→ 青にする

#title {font-size: 35px;}

 どのタグの?→ タイトルタグの 

 何を?→ フォントのサイズを

 どうする?→ 35px にする

英語だし、論理的でとても分かりやすい。簡単そう。

CSSコードでカスタマイズ 簡単そう

上を基本に、はてなブログをカスタマイズするためのステップは4つだけだと書いてあった。

はてなブログカスタマイズのステップ

  1. 自分のブログをGoogle Chromeで表示して、変えたい部分をクリックしハイライトする。
  2. ハイライトした状態で、右クリック→「検証」をクリックする。
  3. HTMLとCSSコードの窓が開く。1で選択した部分のHTMLコードとCSSコードがハイライトされるので、CSSの方をテキストエディタにコピペする。
  4. コードに必要な修正を加える。例えばcolor: blue→redにする、font-size: 12px→15pxに変更するなど。修正したこのコードをはてなブログのデザイン→カスタマイズ→デザインCSSという場所に貼り付ける。

f:id:bjlewis4u:20180503091303p:plain

変えたい部分をクリックしハイライトする。

f:id:bjlewis4u:20180503092230p:plain

ハイライトした状態で、右クリック→「検証」をクリックする。

f:id:bjlewis4u:20180503091355p:plain

選択した部分のHTMLコードとCSSコードがハイライトされている

ふーん、分かりやすくて簡単そう。

ちなみに私は、オンラインスクールSchooの講師が推薦していたAtomというフリーのテキストエディターを使っています。

atom.io

Google Chromeの「検証」の見方が分からない

ところが全然簡単ではなかった。

Google Chromeの「検証」で表示されるCSSコードの見方が分からない。HTMLの方は確かに該当の箇所、例えば、"h3"がハイライトされている。けれども、ハイライトされているCSSコードには、色を変えたくても"color"の記述がない。

なので、CSSコードの窓のあちこちをスクロールして探しても、該当の"h3"タグがない。

色や大きさ配置などデザインの情報については、たくさん記述があって、どの部分が該当するのか分からない。色も大きさも異なるものが複数存在する。その上、あちこちに取り消し線が引かれていている。

結局、CSSの方は、ハイライトされていなかった”entry-content h3"という部分にcolorの記載があるので、これかな、と見当をつける。

f:id:bjlewis4u:20180503093801p:plain

こんな風に、ちゃんとズバリの箇所がハイライトされないので、該当箇所を探さなければならない。

英語を勉強し始めでJapan Time読むのと同じ

これは、英語を勉強し始めて「I like an apple. 私はりんごが好きです。」という文章がわかるようになったばかりなのに、いきなりJapan Timesの英語の海に投げ出されるのと同じ状態。

"I"は「私」、"like"は「好き」、"an apple"は「りんご」。英語の語順は、「主語」+「動詞」+「目的語」という構造なのね。と知っているからといって、いきなり英字新聞は読めない。

自分が知っている単語や表現はとても限られているのに、見たこともないネィティブ風の表現や構文に溢れた新聞。どこに何が書いているかも分からない。

諦めて一括デザインテーマ変更

結局、お手上げとなった私は、既にはてなで用意されているデザインテーマのうち、自分が「こうしたい」と思うデザインがあらかじめ装備されているものを選んで、それで一気に変えることにした。

人気のテーマのうち、シンプルでクールなデザインの"Contents"を選んだ。基調色はもともと好きだったダークブルー。実は、会社で作成する文書は、何でもタイトルを白抜きのダークブルーにしている。

CONTENTS - テーマ ストア

このテーマの作者、JOE AOTOは、「はてなブログ Perfect GuideBook」の著者なのですね。

それにしても、これに限らず、開発した素晴らしいデザインテーマを無料で配布だなんて。懐が大きいと思います。皆が無料にしている以上、料金は課せないというのもあるとは思うけれども。

気に入らないところをカスタマイズできた!

いずれにしても、全体的にクールな感じが気に入っている。

けれども、ブログタイトルの大きさ、記事の中見出しのデザイン、キーワードのハイライトなど、そのままではしっくりこない部分もあったので、自分で変えてみた。上に書いたような手探りの方法で。

Google Chromeの「検証」コードを目を皿のようにして見て、該当のCSS情報はこれかな?と見当をつけて変更してみて、本当にデザインが変わったらやっぱりここだ、という手探りで突き止める。

結局、今のところ、ブログタイトルや説明のサイズと、大見出しと中見出しのデザインを変えて、キーワードのハイライトをアンダーラインにして色を変えただけ。

それでも、段々と、コードの意味や書き方がわかってきた。自分が手探りで書いたコードで、ちゃんとデザインを変えることができるのは嬉しい。

まだ分からないことだらけ

そんな訳で、まだまだHTMLもCSSも初心者中の初心者で試行錯誤だけれども、これからも実際にやりながら、少しずつでも学んでいきたいと思う。

英語だって、学び始めがあって、今では仕事ができるほどになったのだ。HTMLやCSSも英語でできているのだから、ある程度使いこなせるレベルまで頑張ろう。

そう闘志を燃やすのでした。

ではでは😊👍🏻。

Schooで紹介していたHTMLとCSSのポケットリファレンス。カラーで見やすい

もう1つ、以前に紹介した役立つはてなブログカスタマイズの本