Web制作に関して書いた記事の中から読んでほしいものを厳選!

こんにちは。とみっちです。

今でこそ雑多なブログと化してしまったんですが、当ブログは元々僕が会社員時代にWeb制作に関する情報を発信するブログとして開設したものだったのです。

WordPressで運営する前は、Seesaaブログだったんですよね。

2012年くらいのことだったと思うんですが、懐かしいです。

さて、過去に書いた記事がどうしても埋もれてしまいがちなので、これは読んでほしいという記事をピックアップしてまとめる試みをしてみます。

HTML、CSS、JavaScriptに関する記事

テキストエディタ「SublimeText」に関する記事が多いんですが、まだ愛用している人がいれば、是非参考にしてください。僕は今でもSublimeText3を使っています。

SublimeTextでCSSやJSファイルを圧縮する方法

CSSやJavaScriptをminimize化(圧縮)する際、最近はGulpなどのタスクランナーで自動処理するエンジニアが多いかと思います。

でも、皆が皆タスクランナーを導入しているかといえばそうでもないし、案件によってはちょっとしたファイルのmin化が簡単にできたら便利だなーと思い、調べて導入したのがSublimeText3のプラグインでショートカット一発で実行する方法。

Macなら「⌘(Command) + ⇧(Shift) + P」で、YUI Compressorを使って簡単に「style.css → style.min.css」みたいにしてくれます。

え!?わずか1秒でCSS / JavaScriptファイルを圧縮!Sublime Text3にYUI Compressorを入れてみた。
フロントエンジニアのみなさーん!今日もゴリゴリHTMLコーディングしてますかー!?本当はHTMLよりも、音の波形をずっと眺めていたいTomicciです。こんにちは。今回は、CSSや、JavaScriptのファイルの圧縮に関して、今やっている

SublimeTextで圧縮されたHTMLやCSS、JSファイルを整形

今度は、逆にminimize化(圧縮)されたファイルを、読みやすく整形してくれる方法に関して記事を書きました。

HTMLタグのインデントがめちゃくちゃなソースや、圧縮されたHTMLの可読性を高めるために使用できます。

これまたSublimeText3のプラグインでショートカット一発なのです!

ショートカット一発!圧縮(min化)されたCSSやJavaScriptのソースコードを見やすく整形しちゃうよ!
フロントエンジニアのみなさーん!今日も色んなサイトのHTMLを覗き見していますかー!!HTMLを見ていると、求人情報が書いてあったり、アスキーアートが書いてあったりすることがあって、こういうのを見つけると楽しいですね!アメリカのブログサービ

EmmetとLiveStyleを使って爆速コーディング

HTMLコーディングの効率・速度を格段に効率するために、EmmetとLiveStyleの導入をおすすめした記事。

僕はここのところ、サイト開発よりも記事を書くことの方が多くてタスクランナーは使ってないんですが、SublimeText3でEmmetとLiveStyleは相変わらず使って、ちょっとしたサイトやブログの修正をしています。

え!?まだHTMLコーディングでEmmet + LiveStyleを使ったことがないの?
HTMLやPHPを書いていることが多いとみっちです。みなさん、今日もせっせとHTML書いていますかー!?さて、今更ですが、EmmetとLiveStyleを使ってHTMLコーディングする方法を紹介します。もし、EmmetもLiveStyleも

SublimeTextでimgタグのwidthとheightを自動入力

imgタグのwidthとheightを指定しておくと、色々とメリットがあるんですが、入力手間はなんとかならないものか…。

そんな時にこのプラグインの出番ですよ!

imgタグで読み込む画像のサイズから、widthとheightを自動入力してくれるのです!

え!?まだimgタグのwidthとheightを手入力してるの?imgタグの数値を自動入力させる方法
こんにちは。フリーランスでweb開発をしている「とみっち」です。(2018年7月に法人化しました!)一人で数十画面のHTMLコーディングすることとか多いんですが、これほど孤独で辛い戦いはないですよ…。最近HTMLばっかり見ていて誰とも話しを

SublimeTextのEmmetで数値計算する方法

SublimeTextの「Emmet」プラグインを利用すると数値計算ができるので、これもかなり便利。

スマホ対応などで、横幅296pxの画像を半分に表示するには何pxにすればいいだろうかという時に、電卓を叩かなくていいわけ。

暗算が得意な人は不要かもしれないですが、できるだけ間違えないように正確に計算したい人にはおすすめですね。

四捨五入もできる点に感激。

便利!SublimeText3のEmmetで数値計算できるぞ!
Sublime Text3使ってるー!?どうも。ブログで記事を書くとき丁寧な口調をそろそろやめようかと悩んでいる@tomicciです。友達に話すように、優しく、そう、語りかけたい。さあ、今日は久しぶりのSublime Textネタ。HTML

CSSで未使用のセレクタを見つける

CSSを書いていて運用中に色々と設計が変わり、使わなくなるスタイルも多くありますよね。

そのまま放置しておくと、どんどん散らかって管理しづらいソースになってしまいます。

時々綺麗に整理して、管理しやすいソースを書きたいですよね。

Google Chromeの開発者ツールを使えば、未使用となっているクラス名などを見つけることができますよ!

CSSで未使用のセレクタを見つけて削除しちゃうよ!不要な記述をなくしてファイルサイズを減らそう
2019年1月記事更新当記事は2015年1月に公開した内容を元に、2019年1月最新の情報に変更しました。Chromeの仕様が変わり、開発者ツールの「Audits」項目から調べられなくなりました。現在は開発者ツールの「Coverage」機能

WordPress

プラグインでBASIC認証を設定

WordPressを使ったサイトやブログで、公開前にBASIC認証をかける際、プラグインで設定できたらいいなと思い、探したらいいものがありました。

「.htaccess」と「.htpasswd」をいちいち書き換えたりしなくていいので楽ですね。

今じゃこんなに文字数が少ない記事はなかなか出しませんが、超絶に短い記事ですw

WordPress プラグインでBASIC認証をかけちゃうよ
最近、WordPressで管理しているサイトで、リリース前にBASIC認証をかけたい場面がありました。「.htaccess」を直接修正しようかと思いましたが、やっぱりWordPressならプラグインを使うのがいいかなと考え、調べてみたところ

SEO

おすすめのキーワード選定ツール

アフィリエイトなどをする人向けに、キーワード選定をするためのツールをまとめた記事を書きました。

以前はトレンドキーワードを調べてブログの記事を書き、アクセスを狙うなんてことをやったりはしてたんですが、今はアクセス数を重視しなくなったので使うツールは限定的になってきました。

本当は教えたくない・・・けど、おすすめのキーワード選定ツールを紹介しちゃうよ!
Webサービスやアフィサイトを作る際、またブログにより多くの人に記事を読まれたいという方は、できる限りSEOキーワードの選定や競合サイトの分析、そして、果たしてそのキーワードが検索エンジンから検索ボリュームが見込まれるキーワードなのか、徹底

この記事で紹介していないツールなのですが、「おむすびサジェスト」というGoogleなどの検索サジェストをマインドマップのように表示してくれるので、直感的に分かりやすく、記事を組み立てる際にかなり活用しています。

関連語や共起語等を使って特定の記事やサイトを、どうやって特定のキーワードで上位表示させるか考えるのが楽しいです。

競合サイトのアクセス数や検索流入ワードの調査

この記事を書いた時は競合サイトの調査ツールをあまり知らなかった頃なので、こんなWebサービスがあるのか!と驚きましたね。

【SimilarWeb】競合サイトのアクセス数を調べたい時に使える無料サービスが凄いぞ!
こんにちは。@tomicciです。サイト運営していると、競合など他のサイトのアクセス数を知りたくなるよね。「SimilarWeb」というサービスを利用すれば、競合サイトの分析ができちゃうよ!SimilarWeb今日はSimilarWebを紹

現在では、「ahrefs」分析ツールとして日常的に使用しています。

Ahrefs - SEO Tools & Resources To Grow Your Search Traffic
You don't have to be an SEO pro to rank higher and get more traffic. Join Ahrefs – we're a powerful but easy to learn SEO toolset with a passionate community.

「ahrefs」の方が、ロボットが世界中のWebサイトを巡回して情報を収集しているため、精度が高いですね。

個人的には、

あまり分析に時間をかけすぎないようにする

というのが最近の課題です。

調査に時間をかけすぎて、作業すべきことがおろそかになっては本末転倒なので、ざっくり調べたら自分のブログやサイトでコンテンツを作る時間を確保するように心がけたいです。

まとめ

Web制作に関して役に立ちそうな情報があれば幸いです。

最近は以前ほど積極的に開発するというスタンスではなくなったことなどから、Web制作に関連した記事を書くことが減ってきてしまっているんですが、もしまた何かいい情報を当ブログで紹介した際には、このページを修正、追記したいと考えています。

タイトルとURLをコピーしました