Analogstudio

アナログ回路、車、写真、PCなどに関するブログ

インスタグラムのタイムラインを表示しよう!「Instagram API」の使い方

インスタグラムのタイムラインを表示しよう!「Instagram API」の使い方

流行りの SNS と言えばインスタグラムがあるでしょう。
せっかくなのでタイムラインを Web サイト上に表示したいですよね。

しかし、いざやろうとタイムラインを表示しようと思っても簡単にはできません。
そこで、今回はインスタのタイムラインを Web サイト上に表示させる方法を紹介します。
続きを読む 紹介インスタグラムのタイムラインを表示しよう!「Instagram API」の使い方

WordPressでパンくずリストを表示させる方法【SEO対策】【プラグイン不要】

WordPressでパンくずリストを表示させる方法【SEO対策】【プラグイン不要】

ブログを書いていれば「パンくずリスト」という言葉を聞いたことがあるかもしれません。
パンくずリストは現在の記事 (ページ) がどんなカテゴリのどの階層に居るのかを分かりやすく表現する為に使われるナビゲータのようなものです。

実はこのパンくずリストは、人間だけでなく Googlebot のような検索エンジンのクローラにもサイトの構造を明示できる手段の一つです。
つまり、パンくずリストの導入は SEO (検索エンジン最適化) にも有利となるということです。
そこで今回は WordPress で簡単に表示させる方法を紹介します。
続きを読む 紹介WordPressでパンくずリストを表示させる方法【SEO対策】【プラグイン不要】

CSSの小技を紹介します!【中央揃え】【レシポンシブ対応アスペクト比固定要素】

CSSの小技を紹介します!【中央揃え】【レシポンシブ対応アスペクト比固定要素】

現在のWebデザインでは HTML はページ構成を、CSS はデザインを担うこととなっています。

そんな中で地味にどうやってコーディングすれば良いのかと頭を悩ませるものがありますので、紹介したいと思います。
特に最近ではスマホのような低解像度な画面から 4K のような高解像度まで対応したレシポンシブなデザインが求められていますので、描画領域の幅が不明でも使える小技となっています。
続きを読む 紹介CSSの小技を紹介します!【中央揃え】【レシポンシブ対応アスペクト比固定要素】

Windowsでメモリ解放を自動的に実行するMicrosoft純正ソフトの設定方法【empty.exe】

Windowsでメモリ解放を自動的に実行するMicrosoft純正ソフトの設定方法【empty.exe】

8月に入って一段と暑さが増したような気がする今日です。
皆さんのPCは暑さで強制終了したり誤動作を起こしてはいないでしょうか?

今回はPCの動作がどうも遅いな、という場合の原因がメモリ不足だった場合の対処法です。
ノートPCや古いPCでメモリ容量が少ない時やいつもスリープで再起動を余りしない場合には効果が分かりやすいと思います。
10分もあれば十分に設定できますが、メモリの少ないPCでは効果テキメンです!
続きを読む 紹介Windowsでメモリ解放を自動的に実行するMicrosoft純正ソフトの設定方法【empty.exe】

Google Chrome の開発者ツールでできることアレコレ

Google Chrome の開発者ツールでできることアレコレ

毎日毎日、最高気温を更新している今日ですが如何お過ごしでしょうか?
私は幸いにも暑さには慣れているので割と快適に過ごしております。

そんなうだるような日常の休閑話題として、Google Chrome や Opera の開発者ツールのアレコレについて紹介します。
どちらのブラウザも殆ど同じなので Google Chrome を使っていきます。
※開発者ツール自体についてはいくらでも紹介記事があるので、本記事では “痒い所に手が届く” 小技を紹介することとします。
続きを読む 紹介Google Chrome の開発者ツールでできることアレコレ

Javascriptでウィンドウのリサイズやスクロールイベントの発生回数を抑える小技

Javascriptでウィンドウのリサイズやスクロールイベントの発生回数を抑える小技

Javascriptでウィンドウのリサイズやスクロールを検出して処理を実行することがあります。
そんな時に使う「window.onresize」や「window.onscroll」は何も対策をしないともの凄い数のイベントが発生してしまいます。

そこで、そんなイベント発生回数を抑える小技を紹介します。
スクロールイベントに重い処理を行おうと考えている方は一考の価値があると思います。
続きを読む 紹介Javascriptでウィンドウのリサイズやスクロールイベントの発生回数を抑える小技

WebサイトのIE5~11までの動作確認をする方法とCSSプロパティが有効か調べる方法

WebサイトのIE5~11までの動作確認をする方法とCSSプロパティが有効か調べる方法

Webサイトをデザインしていると古いブラウザへの対応が気になりますよね。
特に昔からずっと鬼門だったIEへの対応は骨が折れます。

2018年現在では既にIE10以前はMicrosoftのサポート外になりました。
(最終アップデートは2016年1月)
しかし、サポートが切れたブラウザも少なからず使っている人もいます。

そこで、古いIEで作成したWebサイトがどのように表示されるのか確認する方法を紹介します。
続きを読む 紹介WebサイトのIE5~11までの動作確認をする方法とCSSプロパティが有効か調べる方法

CSSだけで作るアニメーション付きドロップダウンメニュー【スマホ対応】

CSSだけで作るアニメーション付きドロップダウンメニュー【スマホ対応】

CSSだけでシンプルなドロップダウンメニューを作る方法を紹介します。

アニメーションを付ける場合、以前はJavascriptを使って動的にプロパティを変えていく必要がありました。
しかし、最近ではCSS3で追加された “transition” プロパティで徐々に変化させることもできるようになりました。
続きを読む 紹介CSSだけで作るアニメーション付きドロップダウンメニュー【スマホ対応】

写真の基礎!基本構図についてまとめます。

写真の基礎!基本構図についてまとめます。

写真を撮ってもどこかキモチワルイと思ったことはないでしょうか?
せっかく一眼レフやミラーレスのような綺麗に撮れるカメラでもこれでは悲しいですよね。

そんな時は構図について考えてみたら解決の糸口が見つかるかもしれません。
そこで今回は構図についてまとめたいと思います。

基本の構図を考えやすくする線を簡単に写真に重ねるページも作ったので、ご活用下さいませ。
続きを読む 紹介写真の基礎!基本構図についてまとめます。

ZipCloudの郵便番号検索をSSLに対応させる方法【PHP】

ZipCloudの郵便番号検索をSSLに対応させる方法【PHP】

先日、本ブログをSSL化したという記事を書きましたが、以前投稿した記事にSSLに対応できないものがあったのでその修正方法を書いていきます。

SSL化に対応していのは、郵便番号から自動で住所を表示させる方法で投稿したコードです。
郵便番号検索のデータベースとして株式会社アイビスさんのZipCloudを使用させて頂いていますが、こちらのAPIはSSLに未対応です。
ですので、以前のコードをそのまま流用するとSSL化したサイトではブラウザによってブロックされてしまうことがあります。
続きを読む 紹介ZipCloudの郵便番号検索をSSLに対応させる方法【PHP】