サイトをスマホで見た時のレイアウトを、Google Chrome(PC)上で確認する方法
インターネット検索をスマートホンで行う機会が多くなった最近では、自身のサイトをスマホ表示に対応(レスポンシブ化)させることは、もはや当たり前になってきました。 しかし自分のサイトをスマートホン表示に対応させている時、いちいちスマホを起動してレイアウトを確認していたら時間がかかるしとても面倒ですよね。そこで今回は、ホームページをスマホで見た時のレイアウトをGoogle Chrome(PC)上で確認する簡単な方法についてご紹介します！ ※スマホの機種ごとにレイアウトの違いを確認することも可能です。 Googl ...
そのリンクちょっと待った！！ページを訪れる前に安全性をチェックできるサイト『aguse.jp』
メールで知らない人からリンク(URL)が送られてきたり、ホームページ上にいかにも怪しげなURLが載っていたりすると、どうしても危ない感じがしてリンクをクリックするのをためらってしまいますよね。 そんな時に、リンク先のURLを打ち込むだけでそのサイトの中の様子をスクリーンショットで確認したり、ウィルスなど様々な危険性の有無を確認できてしまう超便利なサイトをご紹介します！ 訪問先サイトの安全性を確認できる『aguse.jp』 訪問先ページの安全性を確認できる便利なサイトの名前は『aguse.jp』！ ▼以下の ...
背景画像が動いてる！PCの背景に「動く壁紙」を設定できるソフト『Wallpaper Engine』紹介
去年の10月に、ゲーム配信プラットフォーム"Steam"にてリリースされたソフト『Wallpaper Engine』がスゴイ！と、最近話題となっています。 ▼Steamにて398円(税込)で販売中 この『Wallpaper Engine』...一体何がスゴイのかというと、 なんとPCの背景に「動く壁紙」を適用できちゃうのです！( ﾟдﾟ)スゲー ▼こんな感じで背景に動く映像を適用できちゃいます！ ▼もちろん種類も豊富！『初音ミク』や、皆がよく知るゲームキャラの動く壁紙なんかも無 ...
ペイントより断然便利！意外と知らないWindows標準搭載の画面キャプチャーツール『Snipping Tool』
PC画面上の任意の箇所をキャプチャーして保存したい場合、みなさんはどのようにキャプチャーしているでしょうか。 おそらくほとんどの方が『プリントスクリーン』→『ペイントに貼り付け』→『任意の箇所をトリミング』→『保存』という手順でキャプチャーしていると思いますが、これって結構面倒ですよね。 しかし、上記の方法よりはるかに簡単で手軽に、画面上の好きな箇所をキャプチャーできる"Windows(7以降)標準搭載"のツールがあるのです！ その名も『Snipping Tool』 実はこのソ ...
古いPCのGoogle Chromeの『ブックマーク』を、新しいPCのプラウザに移行させる方法
新しいデバイスを購入し、プラウザなどの設定を古いものと一緒にしようとする際に、意外と苦労するのがGoogle Chromeの『ブックマーク(お気に入り)』の移行(同期)です。 Internet ExplorerなどのOSでは比較的簡単にブックマークを移行することができますが、Chromeでは他プラウザとは異なった手段をとる必要があります。 そこで今回は、Google Chromeのブックマークを移行する方法について簡単に解説していきます。 旧デバイスのブックマークを『エクスポート』 まず、今まで使用してい ...
ホームページの『パス』の指定方法について分かりやすく解説
みなさんは『相対パス』や『絶対パス』というものを聞いたことがあるでしょうか。 この『パス』というものは、ホームページの制作・管理において必要不可欠の知識です。しかしサイト作りを始めたばかりの人の中には、パスを指定する方法がイマイチ分からないという人が多いと思います。 そこで今回は、『相対パス』と『絶対パス』の違いや、『パス』の指定方法について、分かりやすく解説していきます！ 『絶対パス』と『相対パス』の違いについて "パス"とは『特定のファイルやフォルダの位置を指定するための記述』のことを言います。 また ...
ホームページ制作を初めて学ぶのならコレ一冊でOK！知識ゼロの私でもサイトが作れたおすすめ参考書
「ホームページを作りたい！」「自分のオリジナルサイトを立ち上げてみたい！」と思ったことのある方は多いと思います。 しかしいざ作ってみようとすると"HTML"や"CSS"など初めて聞く単語ばかり出てきて、いったいどこから何から勉強すればいいの...？となってしまいますよね。 そこで今回は、ホームページやWEBに関する知識が全くのゼロだった私のような超初心者でも、この一冊のみでHTMLとCSSについて理解し、サイトを作れるようになったおすすめの参考書についてご紹介します！ 最高の初心者本『スラスラわかるHTM ...
[XAMPP]エラーが出てApacheが起動しない場合の対処方法まとめ
以前の記事で、PC上にローカルサーバーを構築することのできる「XAMPP」の使い方に関する記事を書きました。 しかし一部の方々から、"Apache"のエラーが出て、XAMPPを正常に起動できないという相談を受けました。 ▼"Apache"のStartボタンを押すと、このように赤字のエラーコメントが出てしまう。 そこで今回は、XAMPP使用時にエラーが出て"Apache"が正常に起動しない場合の対処法について、わかりやすくまとめました！ 対処法その①「重複ポートのチェック」 "Apache"が正常に起動しな ...
[bxSlider]スライドショーオプションの記述方法と使い方まとめ
以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。 [blogcard url="https://fukafuka295.jp/homepage-slideshow-kantan/"] bxSliderには、スライド方法を変更したりスピードを変更したりと、スライドショーを自由にカスタマイズできるオプションが多数用意されています。 そこで今回は、bxSliderのスライドショーに適用できるオプションの種類と記述方法について、紹介していこうと思います！ オプ ...
[bxSlider]スライドショー読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法
以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。 しかし実際にスライドショーを設置した方々から、スライドショーを読み込む際に、一瞬画像がバラバラに表示されてしまうという報告をいただきました。 ▼画像が重いと、ページ読み込み時にこのようにスライドショーが一瞬崩れて表示されてしまう。 一瞬でもレイアウトが崩れてしまうと気になるしカッコ悪いですよね。そこで今回は、スライドショーの読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法についてご紹介します！ ...
VRでの閲覧も可能！無料3Dデータ共有サイト「Sketchfab」
最近はヴァーチャル・リアリティ（VR）関連の話題が絶えないですね！当サイトでもVR関連の話題を色々取り上げています。 今回はそんなVRに関連して、3Dのモデルデータを無料で共有・閲覧できるサービス『Sketchfab』についてご紹介します！VRでの閲覧もできちゃうスゴイサイトです(ﾟ∀ﾟ)！ 『Sketchfab』とは Sketchfabは3Dデータ共有サイトであり、作成した3Dのモデルデータを投稿して他の人とシェアすることができます。 投稿された3Dモデルはこのような感じで閲覧することができます。再生ボ ...
PCやUSB内のファイルを復元する最強の無料ソフト『Data Recovery Wizard Free』
みなさんはパソコン内のHDDや外付けHDD・USBなどに保存していたデータが消えたり、アクセスできなくなってしまったことはありませんか？ 実は先日、私の大学院での研究データが詰まった外付けポータブルHDDになんらかのエラーが生じ、中のファイルに一切アクセスできなくなってしまうことが起きました（汗 正直終わったと思いましたね（´・ω・｀）メーカーに問い合わせても、本体の交換には応じるもののデータの復旧は行わないとのことでした； そこでどうしようか途方に暮れながらネットで"データ復旧"について検索していた時に ...
シンプルで使いやすいタブメニューを超簡単に作成する方法
今回はタブごとに内容の変わる"タブメニュー"をホームページ上に簡単に実装する方法について解説していきます！ ※以前の記事で、すでにタブメニューの作成方法について解説していますが、今回紹介するタブメニューは実装がさらに簡単で改善されたものになります。 タブメニューの実装 今回の記事では以下の様なタブメニューを実装することができます。 実装例： シンプルで使いやすく、CSSをいじることでデザインを変更することも可能です。 コードの貼りつけ まず初めにjQueryのスクリプト行を実装します。＜head＞＜/he ...
[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ
以前このサイトの記事にて、jQueryで動作するスライドショー「bxSlider」の簡単な設置方法について解説しました。 すると、一部の方々から、スライドショーが正常に動作しないとの報告を少なからず頂きます。 そこで今回は「bxSliser」のスライドショーに関して、 「設置はできたがスライドショーが動かない」 「スライドショーに不自然な余白ができてしまう」 といった場合の対処法についてまとめてみました！ スライドショーが正常に動作しない場合の対処法 対処法① jQuery実行コードの書き換え 正常に動作 ...
スマホで360度画像が簡単に撮影できてサイトへの貼り付けも可能！iOS対応アプリ『Bubbli』
こんにちは、ふかふかです！ 今回は、スマートフォンで簡単に360度画像を撮影できるiOS対応アプリ『Bubbli』についてご紹介します！ホームページなどにも張り付けることができます。 Bubbli 公式サイト：https://bubb.li/ bubbli Aria Glassworks, Inc.無料posted withアプリーチ 普通の写真より臨場感溢れる写真を撮影することができるので、旅先などで思い出に残る360度画像を撮っちゃいましょう！ ▼ちなみにこのような360度画像が撮影でき ...
ホームページにYoutube動画を埋め込んだ際にレスポンシブ対応させる方法
こんにちは、ふかふかです！ ホームページにYoutubeの動画を埋め込んで再生できるようにしたのはいいものの、スマホなどで表示した際に、動画の横幅が画面サイズに合わなくてはみ出てしまう！...なんてことになったりはしていませんか？ そんな時でも大丈夫！今回紹介する簡単な解決方法を用いれば、Youtube動画を様々なデバイスにレスポンシブ対応(サイズ対応)させることができます！ Youtube埋め込みコードの記述 Youtubeの動画を埋め込む際、Youtube動画ページの"共有"→"埋め込みコード"をコピ ...
『HCB Comment Box』コメントフォームの詳細カスタマイズ方法
こんにちは、ふかふかです！ 以前の記事で、非Wordpressサイト(HTMLベースで構築されたサイト)に、ブログのようなコメント欄を簡単に設置する方法について紹介しました。 ですがこのとき設置したコメントフォームは海外サイトの「HCB Comment Box」というサービスを利用したものなので、サイトにコードをコピペし、 コメントフォームを設置しただけでは各所の文字が英語のままになっていたり、納得のいくスタイルでなかったりして不満点も多いかと思います。 そこで今回は、設置したHCBコメントフォームの詳細 ...
Dellのノマド御用達ノートPC『XPS13 9343』でFF14のベンチマークスコアを計測してみた
みなさんこんにちは！ふかふかです。 今回は先日購入したDellの『XPS13(9343)』のグラフィック性能を確かめるべく、新生FF14のベンチマークスコアを計測してみました！ ▼ 購入したノートPC New Dell XPS 9343 13.3 UltraSharp QHD+ Touchscreen 3200x1800 LED Anti-glare display Laptop, Intel Core i5 2.2GHz, 8GB RAM, 256GB SSD, 802.11ac, Bluetooth ...