これは、無料版はてなブログを、ブログ超初心者がカスタマイズしていく記録です。
今回は、ブログの更新日を手動で表示させます。
- 今回のカスタマイズを選んだ理由
- なぜ手動？
- 今回、メインで参照させていただいたブログ
- 行うことは、２か所にコードを張り付けるだけ！
- 初心者が無謀にもコードの中身に興味をもったら
- headに張り付けるコードの中身を学習
- 私が行いたいカスタマイズ一覧
今回のカスタマイズを選んだ理由
この記事でついにブログも４０記事に到達です！
ブログのカスタマイズシリーズも７項目目になりました。カスタマイズを完了したら、実施した項目をまとめてある記事にリンクさせています。
超・初心者がブログをカスタマイズしていく記録！【行いたいこと一覧】
しかしです。おっちょこちょいな私は、リンクしたかがわからなくなってしまい、結局何度も確認をすることに…；
そこで、私はかんがえました。
記事の更新が分かるように更新日を表示したい！！と。このような理由で今回は更新日表示のカスタマイズを行うことにしました。
なぜ手動？
更新日表示は、自動で行う設定方法もありましたが、私は手動で更新日を表示させる方法を選びました。
私が手動の方を選んだ理由は、自分の性格をふまえた結果です。
あわてんぼうのうっかり属性の強い私。今までのブログ記事を書いた際も、誤字や改行間違え等々の、内容には関わらない部分の手直しを多発させます。
「公開する」ボタンを押す前にしっかり確認すればよいのに、したはずななのに！とほほ。
私のブログにおいては、更新日の表示の目的は内容の変更を示すことです。
そのため、内容が変更されていない手直しは更新日に反映させない方がよいと、私は考えたのです。
今回、メインで参照させていただいたブログ
今回は主にこちらのブログを参考にさせて頂きました。本当にありがとうございます！
nanikara-nanimade.hatenablog.com
こちらのブログ内では、手動のメリットで「AMPではないこと」を挙げられています。AMPってなんだろう。。？相変わらず知識不足を痛感。今後そのあたりの知識も学んでいきます！
行うことは、２か所にコードを張り付けるだけ！
設定自体はとても簡単でした。参考にさせて頂いたブログにコードも貼りける場所も丁寧に書いてくださっています。なので私は、headとcssにブログ内からコピーさせて頂いたコードを張り付けるだけで完了です！ありがたい。
これで、これから私が記事の更新を行ったら、HTML編集画面の一番上に、日付をいれた下記のコードを付け加えれば、目的の更新日が表示されるというわけです。
＜HTML編集画面に付け加えるコード＞
<p><time class="entry-updated updated" datetime="YYYY-MM-DD">YYYY-MM-DD</time></p>
一度コードをHTMLに付け加えてしまえば、再度記事の更新を行った時は、日付を変更するだけでOKです。お手軽です。
初心者が無謀にもコードの中身に興味をもったら
コードにはどのような指示がかかれているのだろう。そんな疑問を持った私は、張り付けたコードの中身について、調べてみることにしました。
その際、今回もいろいろなブログから学ばせて頂きました。ありがとうございます。
以降、学んだことを書いていきます。もしも理解が間違っていたら、都度直していきます。
headに張り付けるコードの中身を学習
基本の形：
対象要素. addEventListener（ 種類,，関数，false）
対象要素の中から，種類のことが起きたら，関数の処理を行います。
という意味だと捉えました。
基本の形に添って、今回のコードを見ていきます。
<今回のコード>
document.addEventListener('DOMContentLoaded', function(....), false)
対象要素は「document（HTML内の文書）」で、種類は「DOMContentLoaded（HTML内の初期文書の読み込みと解析を完了）」です。
これをふまえて、全体のコードが伝えてくれていることを意訳すると、こんなかんじでしょうか。
「HTML内の文章の読込と解析が完了したら、 functionを行うよ。写真や画像は読込が完了しなくても functionしちゃって大丈夫だよ」
ここまでわかったら、残すはfunctionの中身だけです。
functionの中身を、一行ずつ意訳していきます。
★一行目
var entry = document.getElementsByClassName("page-entry");
意訳）documentの中にある、page-entry の要素をもつものを全て集めてentryというグループにするよ。
★二行目
if(entry.length >=1){
意訳）もしも entry の長さが１以上だったら
★三行目
var x = entry[0].getElementsByClassName("date entry-date first");
意訳）entry中にある、date entry-date first の要素をもつものを集めてｘというグループにしますし、
★四行目
var y =entry[0].getElementsByClassName("entry-updated updated");
意訳）entry中にある、entry-updated updated の要素をもつものを集めて y というグループにします。
★五行目と六行目
if(x.length >=1 && y.length >=1){
x[0].appendChild(y[0]);
意訳）もしもｘの長さが１以上でYの長さも１以上だったら、
Xの後ろにYを追加します。
※ここで一度力尽きたので、ｃｓｓに張り付けるコードの中身を学習は後日upします。すみません。。
私が行いたいカスタマイズ一覧
- ブログトップページを記事一覧で提示したい！
- 更新日を提示したい！←今回！
- ブログ内の文章を、四角で囲みたい！
- 文字の大きさを、もう少し大きくしたい！
- ブログのトップページの背景を変えたい！
- Googleアドセンスを設置したい！
-
ブログ内に図を入れたい！
- 今までのブログ内容を推敲したい！ 他
超・初心者がブログをカスタマイズしていく記録！【行いたいこと一覧】
※上記のサイトに、行いたい事を思いつきしだい追記しています。
