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

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

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

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

5年くらい前だったと思うんですが、懐かしいですね。

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

最近、丁寧な口調でブログを書いていく方針に戻ったので、過去記事はタメ口だったりすることもあるんですが、気にしないでくださいね。

HTML、CSS、JavaScriptに関する記事

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

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

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

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

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

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

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

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

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

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

フロントエンジニアのみなさーん!今日も色んなサイトのHTMLを覗き見していますかー!! HTMLを見ていると、求人情報が書いてあったり、アスキーアートが書いてあったりすることがあって、こういうのを見つけると楽しいですね!アメリカの

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

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

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

皆さんこんにちは。Tomicciです。今日もせっせとHTML書いていますかー!?フロントエンドエンジニアっていう名称にものすごく違和感を感じるのは僕だけっすか??フロントなの?、エンドなの?、そもそもエンジニアなの?

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

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

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

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

こんにちは。フリーでWeb開発をしているとみっちです。一人で数十画面のHTMLコーディングとか、これほど孤独で辛い戦いはない・・・。今日は1日HTMLばっかり見ていて誰とも話しをしてないぞ。気晴らしに喫茶店に仕事しに

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

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

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

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

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

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

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

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

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

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

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

一度リリースしたサイトがほったらかで済むならいいんですけど、度重なる仕様変更や機能追加でCSSがカオスにしてしまう人っていますよね〜。はい、僕です!Tomicciです!綺麗に書かれていないCSSに手を加えるとき、かなり大変だ

WordPress

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

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

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

WordPressのテーマをSTORK(ストーク)に変更してみたので紹介してみるよ!
こんにちは。フリーランスエンジニアからブロガー/アフィリエイターへと移行中のストーカーとみっちです。先週(2016年9月15日)から、当ブログのWordPressテーマを話題のSTORK(ストーク)に変更してみました!

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

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

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

こんにちは。@tomicciです。最近は企業や店舗、学校のWebをWordPressで作る案件が多いですね。さらに、ほぼレスポンシブデザインでの構築を指定されます。作るのは結構大変だったりします・・・笑WordPressで構

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

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

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

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

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

SEO

Macで順位チェック - SERPOSCOPE

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

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

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

こんにちは。最近mineoにしてiPhone6の利用料金が2,000円台になって歓喜しているとみっちです。さて、ブログやサイトを運営していると、検索エンジンに表示される順位が気になるよね〜!WindowsならGRC イチオ

Macで順位チェック - RankGuru SEO

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

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

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

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

今回は、Macで検索エンジンの順位をチェックする方法を伝授します!RankGuru SEOの動作状況を、当記事で時々更新しているので、購入検討中の方は参考にしてくださいね。【随時更新】動作状況Wind

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

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

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

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

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

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

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

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

こんにちは。@tomicciです。サイト運営していると、競合など他のサイトのアクセス数を知りたくなるよね。「SimilarWeb」というサービスを利用すれば、競合サイトの分析ができちゃうよ!SimilarWeb

他にも、「ahrefs」も分析ツールとして優れています。

どちらも有料版だとより沢山の流入キーワードや、アクセスの多いページなどを調べることができます。

個人的には、

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

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

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

まとめ

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

最近は受託開発をやめてしまったので、以前ほどWeb制作に関するインプットを怠っているので、書く記事が減ってきてしまっているんですが、もしまた何かいい情報があった際にはこのページを修正、追記したいと考えています。