Webサイト改築計画 No.1

2023年11月23日

事の経緯

このサイトも徐々に内容が充実してきました。そこで視野に入れたくなるのが広告の導入です。

Webサイトの広告というと色々と種類があります。これについて多くは言及しませんが、難関広告のGoogleアドセンスの審査合格を目指したいと考えています。

既にAmazonアソシエイトに挑戦していますが、こちらは登録後180日以内に3件以上の購入実績(家族以外)が必要なようなので、直に友人にマーケティングすべきでしょう。

というわけで、Googleアドセンス合格に向けてWebサイトを改築していきます。

何を要求される？

Googleアドセンスの合格に必要なことを調べていると、以下のようなものがよく挙げられています。

とまぁ、色々とあります。

この中で特に重要なのは操作性と独創性でしょう。

独創性は置いといて、少なくとも操作性を良くする事はできます。

操作性の改善と言っても何をするのか。次項で述べていきます。

操作性の改善

操作性の改善。と言っただけではパッとしません。

ハッキリとこのサイトに追加したい、したほうが良い事を羅列してみます。

と、ざっくり挙げただけでもこれだけあります。

こういった実装を各ナンバリングの記事でやっていこうというのがこの連載記事の目的です。

ここまで考えると、このシリーズを続けていくにあたって重要な必要事項が一つ思い浮かびます。

「プログラムを分かりやすく提示する」という前提です。

つまるところ、codeタグとpreタグの整備が必要です。

前回更新記事のような表記だと、こうなっています。

#define SSD1306_SCL PC5
#define SSD1306_SDA PC4
        

これらのタグで囲まれたコードに対し、色付け等を行い読みやすいものに変えていきます。

私の扱うプログラミング言語は何か？

前提として扱う言語を確かめます。

始めは言わずもがなhtml/cssです。

次点でJS、PHP、C/C++、Pythonとなります。

レア枠としては、Ruby、Java、C#、Rust(やるかも)辺りが考えられます。

これらを網羅するサービスを使う必要があります。

Prism.js

JSのライブラリである、Prism.jsのサイトを見てみると、対応言語がズラリと並んでいます。先程挙げた言語は全て入っているので問題なさそうです。

こちらの記事を参考にしながら進めていきます。

ダウンロードページからテーマと利用言語、プラグインを選択し、ダウンロードを行います。

各プラグインの説明はこちらの記事が分かりやすいです。

私が導入したプラグインは以下の通りになりました。

ダウンロードしたファイルをこの記事に適用して使ってみます。

いい感じです。フォントをコードに適したものへ変更したいです。(↑この表記は変更後の表記になるはずですが)

prism.cssにて、pre[class*=language-]中の font-family にてフォントを先頭で指定できます。

これで記事連載のための準備が整いました。では次回から本格的に改築を行っていきます。