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」みたいにしてくれます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress

WordPressの有料テーマ「STORK(ストーク)」の紹介

ブロガーに人気のWordPressテーマ「STORK」を当ブログに導入したので紹介しています!

有料テーマですが、実際に導入してみて値段以上の価値を感じています。

スライドショープラグイン

以前受注した、とある学校のサイトリニューアル案件で、WordPressを使ったギャラリーページを作る必要がありました。

無料利用、スマホに最適化されていること、デザインがシンプルかつ綺麗に見えるギャラリープラグインをまとめた記事です。

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

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

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

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

SEO

Macで順位チェック - SERPOSCOPE

現在m、僕がMacで順位チェックする際に使用しているソフトが「SERPOSCOPE」です。

WindowsならGRCがいいけれど、Macはなかなかいいソフトがないんですよね。。

ブラウザ順位の確認ができるフリーソフトです。

Macで順位チェック - RankGuru SEO

SERPOSCOPEがうまく動かないとか、導入が難しいという人にオススメなのが「RankGuru SEO」です。

こちらは有料アプリですが、840円程度で購入可能です。

ランキングの推移などの表示などは物足りないんですが、とりあえず順位をチェックできればいいやという人向けです。

導入もてっとり早いのが特徴。

オススメのキーワード選定ツール

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

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

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

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

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

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

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

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

個人的には、

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

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

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

まとめ

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

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