英語とHTML&CSS習熟への道は同じ学びTweetこんにちは、BabyJです😊。GWも後半に入りましたね。皆さんはいかがお過ごしですか?私は、会社の人からヒンシュクを買いつつも、9連休にし、前から予定していたブログの振り返りと今後の計画、そして、今までできなかったブログカスタマイズに没頭しております。今日は、そんなカスタマイズの試行錯誤についてお話ししたいと思います。ブログのデザインを好きなように変えたい他の人のブログで、クールな記事タイトルやキーワードのアンダーライン、吹き出し、プロフィール、自然でかっこいい広告配置など、いろいろ見るにつけ、私もあんな風にしたいと思っていました。当然ながら、たくさんの方が、ブログデザインのカスタマイズ方法やコピペすれば使えるコードを載せている。昔からITが大好きで、Macのカスタマイズなんかをやっていた自分としては、ちゃんと自分でコードが書けるようになりたいと思っていたのでした。コピペするにしても、なんだか分からないままでは、自分が気持ちが悪いから。HTMLとCSSの勉強を続けたけれどそうは言っても、普段は会社から帰ったら、ブログを書くのがやっと。朝が早いので遅くまで起きていられない。洗面所でオンラインスクールSchooのHTMLとCSS講座を何度も視聴したり、いろいろと買った本を電車の中で読んだり、隙間時間に勉強するだけだった。自分で実際にコードを書いてみる、英語で言えばアウトプットする機会、がないままだった。英語が分かるから、HTMLやCSSのタグの意味も見ただけで分かるので、結構簡単かも、などと思っていた。HTMLタグはウェブの構成要素の名前と機能を表すコード。タグは英単語やその頭文字だから分かりやすい。段落CSSタグは、HTMLタグに対するデザインを表すコード。「どのHTMLタグ」の「何を」「どうする」かを決める。する英語だし、論理的でとても分かりやすい。簡単そう上を基本に、はてなブログをカスタマイズするためのステップは4つだけだと書いてあった。Chromeで表示して、変えたい部分をクリックしハイライトする。ハイライトした状態で、右クリック→「検証」をクリックする。HTMLとCSSコードの窓が開く。1で選択した部分のHTMLコードとCSSコードがハイライトされるので、CSSの方をテキストエディターにコピペする。コードに必要な修正を加える。12px→15pxに変更するなど。修正したこのコードをはてなブログのデザイン→カスタマイズ→デザインCSSという場所に貼り付ける。変えたい部分をクリックしハイライトする。ハイライトした状態で、右クリック→「検証」をクリックする。選択した部分のHTMLコードとCSSコードがハイライトされているふーん、分かりやすくて簡単そう。ちなみに私は、オンラインスクールSchooの講師が推薦していたAtomというフリーのテキストエディターを使っています。Chromeの「検証」の見方が分からないところが全然簡単ではなかった。Chromeの「検証」で表示されるCSSコードの見方が分からない。HTMLの方は確かに該当の箇所、例えば、"h3"がハイライトされている。ハイライトされているCSSコードには、色を変えたくても"color"の記述がない。CSSコードの窓のあちこちをスクロールして探しても、該当の"h3"タグがない。色や大きさ配置などデザインの情報については、たくさん記述があって、どの部分が該当するのか分からない。色も大きさも異なるものが複数存在する。その上、あちこちに取り消し線が引かれていている。h3"という部分にcolorの記載があるので、これかな、と見当をつける。こんな風に、ちゃんとズバリの箇所がハイライトされないので、該当箇所を探さなければならない。私はりんごが好きです。Timesの英語の海に投げ出されるのと同じ状態。apple"は「りんご」。英語の語順は、「主語」+「動詞」+「目的語」という構造なのね。知っているからといって、いきなり英字新聞は読めない。自分が知っている単語や表現はとても限られているのに、見たこともないネィティブ風の表現や構文に溢れた新聞。どこに何が書いているかも分からない。結局、お手上げとなった私は、既にはてなで用意されているデザインテーマのうち、自分が「こうしたい」と思うデザインがあらかじめ装備されているものを選んで、それで一気に変えることにした。人気のテーマのうち、シンプルでクールなデザインの"Contents"を選んだ。基調色はもともと好きだったダークブルー。実は、会社で作成する文書は、何でもタイトルを白抜きのダークブルーにしている。GuideBook」の著者なのですね。それにしても、これに限らず、開発した素晴らしいデザインテーマを無料で配布だなんて。懐が大きいと思います。皆が無料にしている以上、料金は課せないというのもあるとは思うけれども。2016-07-22Amazon気に入らないところをカスタマイズできた!このテーマは、全体的にクールな感じが気に入っている。ブログタイトルの大きさ、記事の中見出しのデザイン、キーワードのハイライトなど、そのままではしっくりこない部分もあったので、自分で変えてみた。上に書いたような手探りの方法で。Chromeの「検証」コードを目を皿のようにして見て、該当のCSS情報はこれかな?と見当をつけて変更してみて、本当にデザインが変わったらやっぱりここだ、という手探りで突き止める。結局、今のところ、ブログタイトルや説明のサイズと、大見出しと中見出しのデザインを変えて、キーワードのハイライトをアンダーラインにして色を変えただけ。それでも、段々と、コードの意味や書き方がわかってきた。自分が手探りで書いたコードで、ちゃんとデザインを変えることができるのは嬉しい。分からないことだらけそんな訳で、まだまだHTMLもCSSも初心者中の初心者で試行錯誤だけれども、これからも実際にやりながら、少しずつでも学んでいきたいと思う。英語だって、学び始めがあって、今では仕事ができるほどになったのだ。HTMLやCSSも英語でできているのだから、ある程度使いこなせるレベルまで頑張ろう。闘志を燃やすのでした。Schooで紹介していたHTMLとCSSのポケットリファレンス。はてなブログProはじめまして、BabyJです。50代の英語ができるシングルマザー。30年以上、英語を使って海外や外国人を相手に仕事をしてきました。英語学習や英語を使って働くこと、異文化体験、そして、好きなこと・好きなものだけを選んで、自分に正直に、自分らしく生きる生き方・働き方、恋愛などについて書いています。ついてのお問い合わせやご相談を常時受け付けています。Messengerからお気軽にご連絡ください。Messenger広報担当おふなのご紹介お知らせ現在、全ての記事のリライト&更新を進めています。映画更新)こんにちは、BabyJです。忙しい日々のルーティンから解放され、お家でゆっくり過ごせる週末。映画を観ながら過ごすのも良いですね。(2020年1月17日更新)友達レンタルのお仕事を未遂で辞めたちょっとショッキングな話について3回に分けて書いています。スタッフの報酬は時給...2020-01-17【おもしろ副業・バイト】レンタル友達|寂しすぎる孤立無援のスタッフ(2020年1月17日更新)友達レンタルスタッフデビューは、雇用契約問題によって未遂に終わりました。(2020年1月16日更新)先日、友達レンタルの会社の面接に行ってきました。収入補助の副業として。心理学が好きで、カウンセラーを目指して勉...関連記事2019-09-01人を動かす文章の書き方7つのポイント|人を操る禁断の文章術ブログで、ちゃんと伝わる面白い文章を書いているつもりなのに読者が増えない。商品やサービスを紹介しても、全然収入に結びつかない。マインドマップの効果的な使い方(2019年10月16日更新)こんがらがった頭の中を整理して、問題解決や目標達成のために使える便利なツール、マインドマップ。思ったことをただ書き...2019-03-21創造力豊かな人の共通点・クリエイティブになるには?【TEDトークから学ぶ】(2020年1月22日更新)こんにちは、BabyJです。Talkで、とてもためになることを学びました。Talkは様々な分野の英語のスピーチを無料で視聴できるオンラインサービスです。多種多様な国籍、人種、バッ...2018-06-18パーソナルブランディングの方法|まずパーソナルイメージを発見(2020年1月22日更新)こんにちは、BabyJです。個人情報のお取り扱いはてなブログをはじめよう!bjlewis4uさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。