留年回避と謎の言語の話


留年は免れた

無事留年回避したt0hcaです。

眠れなかったせいなのか案の定いくつか単位を落としてしまいました。落とすと留年が確定するやつは無事だったので休学や中退ルートは今回は免れましたね。

講義が始まったらまた眠れなかったり食べたものを吐いてしまう症状が復活しないか心配です。間違いなく復活してしまうとは思いますが。

しかしただでさえGPAが低いのにそれを下げてしまったので、後期はGPAを回復できたらいいなと思います。


謎の言語の話

私のブログは背景が#00ccffから#ffffffのグラデーションになっていて、記事やブログパーツなどのところの背景が半透明になっていて、更に影がついていますね。

これはCSSという謎の言語を使ってやっています。

たとえば背景はこのようになっています。

#container-inner {
  background: -moz-linear-gradient(top, #0cf, #fff);
  background: -webkit-gradient(linear, center top, center bottom, from(#0cf), to(#ffffff));
  background-attachment: fixed; }

正直よく分かんないです。私は忘れっぽいのになかなかソースにコメントを入れませんからね。

で、記事やブログパーツなどのところのはこうなっています。

#blog-title, #top-editarea, article, .hatena-module, #bottom-editarea, .breadcrumb {
  background: rgba(255, 255, 255, 0.75) !important; }

背景を白背景で透明度?を0.75に設定しています。アルファ値とかアルファ成分とかってやつらしいけどよく分かんないですね。

!importantってついていますが、スタイルを適用するときには優先順位があり、それを無理矢理変えて最優先にしちゃうやつです。あんまり使っちゃ駄目らしいです。

トップページや普段の記事ならこれで問題ないのですが、たとえばhttps://t0hca.hateblo.jp/archive/category/ODみたいなページだとうまいこといきません。

というのも、普段の記事ならarticle要素の中に記事があるので、article要素を指定してやればいいわけです。しかし、カテゴリ別の記事のページとなるとarticle要素はなく、id属性がmainのdiv要素の中にいろいろ入っています。

ならCSSで背景を半透明にするところとか影をつけるところのセレクタに#mainとかって書きゃいいかと思いました。が、他のページではid属性がmainのdiv要素の中にid属性がmain-innerのdiv要素があって、更にその中にarticle要素が入っているので、#blog-title, #top-editarea, article, .hatena-module, #bottom-editarea, .breadcrumb, #main {~}とかって書いてしまったらarticle要素の間のとこも背景が半透明になっちゃうし、article要素の背景が#mainの背景と合わさって不透明になっちゃうので、よろしくないんですよね。

セレクタを工夫すれば解決できたのかもしれませんが、結局JavaScriptという謎の言語を使って無理矢理解決しました。

カテゴリ別の記事のページではパンくずリストが表示されていること気づいた私は、その部分のソースコードを見てみました。そうするとclass属性がtest-breadcrumb-json-ldのscript要素があることが分かりました。それに目をつけて以下のように書きました。

$(function() {
  var a = document.getElementByClassName("test-breadcrumb-json-ld")[0];
  if (a != null) {
    var b = document.getElementById("main");
    b.style.background = "rgba(255, 255, 255, .75)";
    b.style.boxShadow = "1px 2px 8px 0px rgba(0, 0, 0, .25)";
  }
});

実際には使いませんでしたが、これをもっとイケイケな感じに書くとこうなります。

$(function() {
  if (document.getElementByClassName("test-breadcrumb-json-ld")[0]) {
    var a = document.getElementById("main");
    a.style.background = "rgba(255, 255, 255, .75)";
    a.style.boxShadow = "1px 2px 8px 0px rgba(0, 0, 0, .25)";
  }
});

最初はパンくずリストが出るページはカテゴリ別の記事のページだけだった気がするんですが、設定を弄ってたら普通の記事のページにも出るようになってしまいました。

それで以下のように書き換えました。

$(function() {
  if (location.pathname.match(/category/)) {
    document.getElementById("main").style.background = "rgba(255, 255, 255, .75)";
    document.getElementById("main").style.boxShadow = "1px 2px 8px 0px rgba(0, 0, 0, .25)";
  }
});

location.pathname;ってありますが、これは今開いているページのURLのうち、ドメインを取り除いたやつを取得するやつです。

現在のページはなのでlocation.pathnameはになります。

で、if (location.pathname.match(/category/))はそこにcategoryが含まれたらそのブロックの中の処理をするってことだと思います。


これで私の思ったようにスタイルが適用されてくれるわけですが、CSS側で設定を変更したときにJavaScriptの方も自分で書き換えなければならないという問題があります。

それでは怠いので、もっといい手段があればいいんですけどね。

画面の前の豚ちゃんは月間PV数が100~200くらいのくせに何でこんなことしてんのって思うかもしれませんが、私は一応高校と大学でWeb系のことを習ってオモシレ…と思い、習ったことをアウトプットしたり深めたりしたいからこういうことをしています。このブログ開設した当初は死にたくないけど死にたいと思ってる自分がいる、そいつが自殺しないか怖い、だから生きている証拠を残したい(?)みたいな支離滅裂で面白いこと書いていましたが、今ではブログに記事を載っける過程でHTMLやCSSJavaScriptのお勉強もしていきたいなと思っています。

因みにいつもはHAMLという言語で記事を書いてそれをHTMLに変換して載っけていて、CSSも最初から書いているわけではなく、SCSSという言語で書いて、それをCSSに変換して使っています。

多分この辺まで読んでる人はReactとかVue.jsとかモダンでイケイケなやつ知っているでしょう?私はまだ知らないのでこれから勉強できたらいいなと思いますが…

次回は静岡に行ったことでも書こうと思います。

今回はここまで