Web関連の記事

Tips

submitボタンのデザインがiPhoneだけおかしい!でハマった時の対処法

最近、ウェブサイト制作時に実機で確認する事が少なくなってます。 Chromeデベロッパーツールが便利すぎて、もうスマホのデザインもほぼデベロッパーツールだけで確認して済ませてたのですが、先日それで問題が発生し対処に時間がかかったのでメモ。...
Tips

【デモあり】YouTubeの読み込みを軽くする!複数動画埋め込みページを高速化

YouTubeの動画を1ページに複数埋め込む事があり、埋め込んだ後ページを見てみたらビックリするほど重くなってました・・・ 動画を読み込むのに時間がかかっているもよう。 いくら面白い動画をたくさん貼っても、読み込みが遅いと閲覧してく...
HTML&CSS

【コピペでOK!】デモあり YouTubeの動画をレスポンシブでブログやサイトに埋め込む方法

ブログやサイトにYouTubeの動画を埋め込む機会が最近増えてきました。 YouTubeはすごく親切で、埋め込む際に「このコードだけ貼ったら埋め込めるよ。」ってコードを表示してくれます。 が!! このコードをそのままコピぺしたら、...
Tips

Font Awesomeで特定のアイコンだけ表示されない時の確認方法

ウェブサイトでアイコンを使う時、Font Awesomeを利用されている方がかなり多いと思います。 僕も多用するのですが、最近Font Awesomeがアップデートされていて有料版なるものも出てきました(前からあったのかな?)。 で...
HTML&CSS

【デモあり】AMPでも大丈夫!CSSだけで要素をアニメーションさせる

サイトに動きを持たせたい場合、よくJavaScriptを使ったりしていました。 が、AMPの登場により、できるだけJavaScriptは使いたくない今日この頃。 そこで、CSS3のアニメーションをうまく使いこなせるようまとめてみまし...
HTML&CSS

AMP対応は今行うべき!?3つのメリットとデメリット、今対応すべきサイトと待つべきサイト

最近スマホで何か検索を行った時、いくつかのサイトの横にカミナリマークが付いていますよね。 これは、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク「AMP」に対応したページという印です。 ...
Tips

WordPressの開発や確認は「Local」で決まりっ!無料ローカル環境構築ツールLocalのつかいかた

WordPressで、カスタマイズしたりサイトを制作したりする場合や、社内ポータルサイト等ローカルサイトを作る時に便利なツールのご紹介です。 ローカル環境とは、そのまんまですが自分のPC内に仮想サーバーを作ってしまい、公開サーバーでは...
SNS

Twitterでフォロワーを外す方法 iPhoneアプリ版

ブログを始めた頃、たくさんの人に読んでもらいたくてTwitterも一緒に始めました。 が、使い方がイマイチ良くわからず、でもフォロワーは増やした方が良いんだろうと思いガンガン色んな人をフォローしたりしていたら、アラビア語みたいなユーザーば...
Tips

ソースコードの表示はCodePenで!プラグインを使うよりCodePenをオススメする3つの理由

今更ながら、HTML、CSS、JavaScriptなどをプレビュー表示できるWebサービス「CodePen」のご紹介。 CodePenは、ブラウザ上でソースコードを書いてプレビュー表示しながら編集できたり、他の方々のコードをダウンロードで...
Tips

WordPressのサーバー移転!Xserverでの手順

サーバーを移転する作業が発生したのでメモメモ。 移転するキッカケとなったのは、別の記事でまた詳しく紹介したいと思っていますが、XserverでSSLが無料化されたという事を知ったからです。 今まで僕は、SSLを使いたいがために別のサーバ...
Tips

おすすめレンタルサーバー!ブログやサイト運営にピッタリのサーバーは?

僕は、趣味でも仕事でもサイトやブログを作っているのですが、その際はレンタルサーバーを使っています。 元々SEなのでサーバーは自作もできます。が、自作したところで落ちるリスクやメンテの時間を考えると、レンタルサーバーを使うのがコスパ的にもだ...
SEO

ブログ運営は目標が大事!Google アナリティクスで目標設定をしよう!

ブログを運営している人は、だいたいの人が「Google アナリティクス」を利用してアクセス解析をしていますよね。 僕も、このアナリティクスを設定はしていますが、今までうまく活用できていませんでした。 解析する為のトラッキングコードを...
SEO

WordPressのパーマリンク設定!基礎知識とおすすめ設定

WordPressでは、「パーマリンク設定」という設定があるのはみなさんご存じだと思いますが、この設定どうしてますか?? 変更されている方も多いと思いますが、その変更、バッチリですか?? 初期設定のまま使っている方、いませんか?? ...
SEO

リファラスパム対策!ちゃんとアクセス解析したい人へ。スパムは除外しよう

サイトやブログのアクセス解析にGoogle Analyticsを利用している人は多いですが、最近、意味のわからないドメインから多数のアクセスが残っていたりしませんか? これは、リファラスパムといわれているもので、このアクセスがあると正確な...
SNS

色んな情報あり過ぎてワケわからなくなった人へ。最新版!OGPのfb:app_idとfb:adminsの必要性と確認方法

ウェブサイトを多くの人に見てもらう為に、SNSを利用して広めていく事は必須ですよねって話を以前させて頂きました。 その際、とても重要となるのがウェブサイトにOGPの設定をすることで、All in One SEO Packというプラグインを...
Tips

【Pixabay】アイキャッチなどサイトに無料で使える画像をお探しなら!

サイトやブログを運営していたら、イメージ画像などを使う機会がたくさんありますよね。 ネット上にはたくさんの素敵な画像がありますが、それらには著作権というものがあり、無断で使用するとえらい事になったりします。 有料で販売していたり、使...
SEO

Googleの「パンダアップデート」と「ペンギンアップデート」ってなに?

ここ数年、ご存じの方も多いと思いますがSEOの内容が変わってきました。 以前は、SEO対策と言えば相互リンクを増やしたり、文字数の少ない薄っぺらな記事をただひたすら更新したり、キーワードを無理矢理metaに含めたり等、サイトが良質なもので...
Tips

タスクランナーGulpを使ってウェブ制作を効率的に!

Sassを使ったCSSコーディングの効率化、画像の圧縮、JavascriptやCSSファイルの縮小など、ウェブサイトの制作には様々な作業、技術が必要です。 最近、こういった作業を自動的に行ってくれるタスクランナーというツールが注目されてい...
Tips

サイトの表示速度を計測する便利なサイト「PageSpeed Insights」

ウェブサイトの制作は、表示時間なども考慮しないといけません。 ソースの読み込みや画像サイズ等、何を改善すればどれくらい表示速度が上がるのか、簡単にわかれば便利ですね。 でも、表示速度が遅いと何がいけないの?どれくらいの影響があるの?...
HTML&CSS

Compassの導入手順と使い方(Windows8版)

以前ご紹介した、CSSフレームワーク「Compass」の導入手順と良く使う便利な機能をご紹介します。 前回の記事はコチラ。