2020年よく読まれた記事、エンジニアブログ運営50記事まとめ
レッスンの質問への返答や、案件での調べ物などメモがわりに始めた、当ABCウェブエンジニアblog。
10月初旬から2020年の大晦日の当記事執筆時点まで約3ヶ月。ぼちぼち更新して50記事弱となりました。
３ヶ月のアクセス合計は5000弱。
始めた当初はアクセスも少なく、一時はてなブログからのアクセスが一瞬増えた時期がありましたが、現在の流入の85%ほどはGoogleから。Yahooやその他も合わせると約90%が自然流入となっています。
Web技術のブログを書いてるので、何か困った際に検索してお越しいただき、お役に立ててるなら書き甲斐を感じますし、非常に嬉しいです。
今後もお役に立てるように、この３ヶ月の中でどういった記事に検索で調べて来られる方が多いのか、よく読まれてる記事などまとめて傾向など調べてまとめたいと思います。
2020年検索からよく読まれた記事
当サイトではGoogleアナリティクスやサーチコンソールを利用してアクセス元や読まれた記事のデータが詳しく見れるようになっています。
そのデータから見た「検索でよく読まれた記事」は以下の結果となりました。
3ヶ月トータルのアクセス解析なので、直近の記事はアクセスが少なく、ほぼ11月以前の記事となってる点はご了承ください。
【JavaScript】ウィンドウを閉じる動作はChrome等で動かない
この記事が一番検索流入が多いのは意外でした。
案件でクライアントから受けた質問への返答を自分なりに調べてまとめた内容で、執筆当初は本当に自分自身へのメモ感覚でした。
内容自体も他の記事と比べてシンプルで短いもの。
JSによるブラウザを閉じる処理が「動かない」という結論なので「動かしたい」という方への解決には至っていません。
ただ調べた結果「動かせない」という事がはっきりしたので、同じように困ってらっしゃる方の時間短縮になったのかもしれません。
JavaScriptとブラウザの挙動というのは、大きなアップデートがあるごとに今後とも需要がある分野と感じました。
【VScode】GitLensがサイドバーから消えた場合に復活させる方法
この記事もかなりニッチな内容かと思っていたので、かなり多くの方のアクセスがあり、驚きました。
内容は消えた拡張機能の復活方法という、これまたピンポイントな自分自身の困った時の解決メモ。
自分自身の困った内容というものは、同じように誰かが困っているんだなと思い知らされましたし、ふとした調べ物のメモでも積極的に記事にすることは大事だと気づかされました。
VScode以外にもコーディングエディタとしてはAdobe系のソフトやATOMなど色々なソフトウェアが存在する中で、VScodeがかなり定番化しているのだろうという点も印象的でした。
定番化しているソフトではありますが、操作方法など難しい部分も多いので今後もVScodeについて困ったことがあれば書いていこうと思います。
【CSS】2020年版ベンダープレフィックスの必要・不要&自動付与の方法
こちらはレッスンの生徒さんからの質問への返答の際に少し調べてまとめた記事。
CSSではブラウザによって対応していないプロパティがあるので、その際の対応方法としてベンダープレフィックスを用います。その際にどのプロパティにベンダープレフィックスを付けるべきかという内容です。
ベンダープレフィックス自動付与の方法や、CSSプロパティの対応確認の仕方などもご紹介しているので、きっとWeb制作学習中の方に役立つ記事ではないかと思います。
【HTML5】section？article？aside？違いと使い分け
HTMLのセクショニングは本当につまづきやすいポイントだと思います。
僕自身何度検索して調べたか分からない位です。
コーディングルールを明確にしてサイト制作するために、今後も見返すような記事だと思います。
【JavaScript】Swiper.jsを使ったスライダーデモ&カスタマイズ方法
JSのスライダー、Swiper.jsの記事も多くアクセスがありました。
この記事では英語の公式デモと同じ内容を試した結果と日本語の解説を掲載しています。
まだ全て網羅していませんが、日本語のSwiper解説記事を検索して来られた方が多かった模様。今後も更新して、しっかり網羅していきたいと思います。
▼Swiper.js関連で言うと以下が導入解説記事となってるので、合わせてご参考頂ければと思います。
▼こちらもSwiperと並んで定番のSlick.jsが動かなかったという実体験記事。こちらも検索流入でのアクセスが多くありました。原因も明らかになっているので同様にスライダーが動かないとお困りの方のご参考になれば幸いです。
【Wordpress以外もOK】TwitterやInstagramウィジェットをサイトに埋め込む方法 Part.3「Instagram プラグイン無し編」
こちらはサイトへのSNS埋め込み記事という事で初期にアクセスが多かった印象のあるシリーズ記事です。
特にインスタグラムの埋め込みは検索ワードとして需要が多くありました。
今後もSNSとサイトの連携需要は多いと思います。充実した記事を書けたらと思います。
▼シリーズPart.1のTwitterの埋め込み記事です。
▼こちらはシリーズPart.2、Wordpressプラグインを使ったインスタグラム埋め込み記事です。
【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1.「AOS編」
こちらはスクロールに合わせた様々な表示方法が簡単に実装できるJSライブラリ「AOS」の導入記事です。
公式と同様のデモも記事内で直接実装しているので、 見ていただくとどんな動作をするのかすぐ確かめていただけるので分かりやすくなっているんじゃないかと思います。
▼こちらはAOSのスクロール処理に合わせて他のJS処理を実行する方法を解説した記事です。英語の記事や公式Q&Aなども調べて実装出来た内容を記したものなので、他にあまりない記事だと思います。お役に立てば何よりです。
はてなブックマークやSNS流入、直近アクセスが多かった記事
アクセスが多かったのはGoogleやYahooなどの検索エンジンからだけではありません。
はてなブログの場合は他のブログサービスなどより読まれやすいように、はてなブックマークやはてなスターなどの機能があります。
他にもTwitterやInstagram、FacebookなどのSNS拡散など、外部リンクを獲得したことで一気にアクセスが増えた記事もあったのでそちらもご紹介したいと思います。
【SEO】URLの正規化、www有無・httpとhttpsの統一方法。エックスサーバー設定例有り
こちらはFacebookへの拡散や、はてなブックマークを頂き、本当に予想外に多くのアクセスがあった記事です。
URLの正規化というものはWebサイト制作で一度は通る道なので、見返せるようにブックマークしておこうという方が多かったのかもしれません。
やはり外部リンクの獲得はサイトへの流入を格段に増やすものだと実感しました。
またSEOとタイトルに入っているので、より検索流入を増やしたい多くの方に響いたのかなとも思います。
▼SEOに関連して続けて書いた記事です。個人的にちょうど調べたかった内容でもあり、当ブログのサムネイルはこの記事以降改善されています。
【HTML/CSS】ハンバーガーメニューPart.2「CSSのみでシンプル実装コード編」
こちらは12月の記事ではアクセス数が比較的多かった記事です。
ハンバーガーメニューについての実装コードということで、SearchConsoleでの検索キーワード分析でも多く検索されていました。
JSを使わずCSSのみでのシンプルな実装方法なので、はてなブロガーさんなど幅広い方にご参考いただけるのではないかと思います。
▼シリーズPart.1。ハンバーガーメニューのUI/UX的な視点から考察しています。
▼シリーズPart.0的な横並びメニュー実装記事です。ハンバーガーメニュー実装の前にまずはこちらからご参考頂くのが良いかもしれません。 こちらも割とアクセス頂いた記事です。
【CSS/Google Fonts】フォントが太字にならない場合の対処法。テキストシャドウ＆ウェブフォント。
こちらも12月執筆の中でアクセスの多かった記事です。
font-weightが効かない時、テキストシャドウとウェブフォントを使ったCSSでの太字などの文字ウェイト対応の内容となっています。
全く別の２つの対処方法をあげている記事なのでそれぞれもう少し深堀りした内容をまた改めて書こうかとも考えてるので、またその際にはご参考いただければと思います。
今後ともまたよろしくお願いいたします
振り返ると、たった３ヶ月足らずの間に多くの方見て頂けたんだなと、少しでも需要に応える記事が書けたのかなと嬉しく思います。
分析して見るとHTML/CSSの記事が一番多い中、よくアクセスされた記事はJavaScript関連の記事。
▼JSで参考になる定番書籍といえばこちら。
JavaScript コードレシピ集
▼Webクリエイターを目指す方向けの2020年ベストセラー書籍。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
▼HTML/CSSを一通り学べる個人的なおすすめな一冊。
HTML＆CSSとWebデザインが 1冊できちんと身につく本
HTML/CSSでつまづく初学者の方は、書籍や何かしらの講座やサービスで学ばれている方が多いのか、検索がそもそも少ないのか、まだまだ多くの方のお役には立てたとは言えない状況です。
ただ、初学者向けのレッスンをしているとつまづきやすいポイントなど共通している事も多いので、そういった内容の記事も執筆意義があるはず。
来年もレッスンによる質問や執筆内容は増えそうなので、自身のメモとしてはもちろん、Webデザイナー、エンジニアの方や勉強中の方のお力になれるような記事をより充実させていけたらと思います。
これからも色んな方のお役になれますように。
今後ともABCウェブエンジニアblogをよろしくお願いいたします。
最後までお読み頂きありがとうございました！
▼HTML/CSSを学んだら次はJSというのが定番ですが、Wordpress/PHPを学ぶのも非常におすすめです。
WordPressのやさしい教科書。 手を動かしながら学ぶ実用サイト作りと正しい運用 5.x対応版
