プログラミング達人の友人がブログのデザイン修正とプログラミングの基礎を教えてくれた話

専門知識を持った友人て、頼りになるよね。 

こんにちは、ポニーです。

ブログデザインで数日頭を悩ませていた悩みのタネがありました。

それは、ヘッダ画像が右にずれる！なんでやねん！

こんな感じでずれていたんですw

まじ原因不明。

私の乏しい知識では、いくらコードをいじってもうんともすんとも言ってくれませんでした。悲しいよコードちゃん。

ついにギブアップしたので、もうかれこれ十年来の友人に助けを求めました。この人、プログラミングの達人（私の中で）。

そして、やってくれました達人。しかも、プログラミング知識が乏しい私に、コードの基礎までも教えてくれました。勉強になったーーー。誰かの参考になれば嬉しいので、まとめておきたいと思います。

本当は会って飯でも食いながらやりとりしたかったんだけども、予定が合わずskypeの画面共有で遠隔講座になりました。Skypeの画面共有とか初めてやったわ・・・すごいね、この機能。便利。

なんやかんやで、時間が遅くなり、なんと開始は深夜０時！

そこから午前３時半ごろまで頑張りましたよ。

（いや、頑張ったのは達人なんですが）

以下、やったことをまとめまっす。

ブログの基礎 SEO対策

達人が私のブログのコードを見ながら、SEOの話をしてくれた。

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。

要は検索結果で露出を高めることだね。

やはりブログをやっていて、検索上位を狙っているならSEO（検索エンジン最適化）は欠かせないよと。

広告業界だと検索上位に引っかかるためには、1ページ800文字が理想とされているそう。これはブログには当てはまるかは知らんとは言っていた。

また、htmlやcssのコードが汚かったり、余計なものが入っているとSEO対策としてはダメダメで、やはりきれいなコードが検索上位に入りやすくなるとのこと。

もう少しSEOを意識して、コードやら綺麗に書かないとなあ。と思いました。が、
そんな技術ありません。。

HTMLとCSSとJavaSprictの言語の違い

私はよくわかっていなかったのです。「ふーんいろんな言語があるのね」程度。何にどんな特徴があるなんて、知らんし特に考えていなかった。ダメやん。

そこで、達人が分かりやすく教えてくれた。

HTMLは「構造」　CSSは「修飾」　JavaScript は「動作や機能」を表す

ふーん。ドユコト？

家を例えに教えてくれた。

• HTMLは間取りのこと。＝「構造」

例えば、3LDKなどの大きさのことね。

• CSSは部屋の配置のこと。＝「修飾」

どこにどんな部屋があるか、どんな形なのかってこと。

• JavaScript はキッチンがIHだとか機能のこと。＝「動作や機能」

ウォシュレットが付いているとかジェットバスが付いてるとかね。



なるほど分かりやすい。ということは、例えば何か動きをつけたいときはJavaScriptをいじる必要があるということか。

また、Javaという言語もあり、JavaとJavaScript はインドとインドネシアくらいの違うらしい。いい例えやなこれ。

セレクタの種類による優先順位の話

私の（コピペを乱用した）コードにはimportantという優先に表現されるコードをいくつか使用している。他にも優先順位の種類があることを教えてくれた。

p#xyz {color:blue;} /*要素を特定したidセレクタ*/
#xyz {color:green;} /*要素を特定しないidセレクタ*/
p.abc {color:yellow;} /*要素を特定したclassセレクタ*/
.abc {color:orange;} /*要素を特定しないclassセレクタ*/
p {color:red;} /*タイプセレクタ*/
* {color:purple;} /*全称セレクタ*/

まあたくさんあってよくわからんのだけども、ポーカーでいうと一番上に表記されている「p#xyz」がロイヤルストレートフラッシュで最強とのこと。

優先順位はとりあえずパワポでいう最前面、最背面表示で順番が変わるよと解釈した。（私のレベルにゃニュアンスがあっていればオーケーオーケー^^）

一番の課題！「ヘッダ画像修正」

そして、私のここ最近の最大の悩み、ヘッダ画像のズレ。

達人は私のコードがめちゃくちゃで汚すぎて、何が何を邪魔しているのか悩んでました。（すんません。）

しかしさすがの達人。問題点を発見。そしてそもそもヘッダ画像サイズもおかしいとのこと。

「このサイズで作って」

「はい」

私はCanva（キャンバ）でヘッダ画像を作っていたのですが、サイズの指示をされその場でCanvaで作成し、画像URLをSkypeで送信。遠隔操作でヘッダ画像の位置や大きさの修正をしてくれました。達人、やる〜〜。

そして、無事ヘッダ画像の修正完了！！

じゃーーーん！！！！

変じゃないでしょ？

今まではせっかくブログに来てくれた人も、変なズレとか見て「うわあ・・・」てなってたもん。

そう思う人はいなくなったんだきっと。よかった、よかった・・・。

調子に乗って追加のお願い（おねだり）

「画像を引き締めるために、ヘッダ画像の下に横棒を入れたいんだけど」

「はいはい」

今までなかった横棒が一瞬で出現。
CSSコード打ち込むの速すぎるでしょ。俺のコピペより速かったよ。

他にも、色々と修正やらしてくれました。

(が、パソコンの動きが速くてよくわからんかった)

まとめ

途中、共通の友人のトークや海外で暮らしたいなど雑談を挟みながら、楽しくプログラミング講座&修正をしてくれた。深夜０時に開始して、午前３時半までかかったけど楽しかったよ。終わったらすぐ寝ました。

達人、ええやつや。

報酬は、ブログが軌道に乗ったら奢るということで。

何か個人で活動してたら紹介するんだけども、何もやってないっぽい。活動したら、改めて紹介したろっと。

とりあえずここ最近の悩みのタネ、ヘッダ画像の修正ができてよかった…

達人、本当にありがとう！！

それでは！