ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

機種別ハイスコア(80点~)タイトルを見る

スマホで高画質なPCゲームをプレイ可能!

事前登録で1~2ヶ月間無料 + 半年間の料金が半額に!

HP・ブログ関連

HP・ブログ関連 ガジェット・ツール

2019/9/1

ホームページなどに使えるオシャレなロゴを簡単に生成することのできるおすすめサイト

サイトのトップページの見栄えって大事ですよね!トップの印象だけでホームページ全体のクオリティを悟られてしまう可能性もありますからね。 だからなんとかロゴだけでもカッコいい or オシャレな感じにしたいのになかなか良いものが作れない・・・('A`) となった経験がある人は多いのではないでしょうか。 しかし心配いりません!なんとオシャレでかっこいいロゴを簡単に生成してくれるサイトさんを今回ご紹介します! ちなみにこのようなロゴが1分足らずで作れてしまいます。 ※ちゃんと透過処理されて生成されます。 Squar ...

HP・ブログ関連

2019/4/9

ページ内リンクをスムーズスクロールで滑らかに移動させる方法(jQuery)

ページ内のリンクをクリックした際に目的箇所まで滑らかに移動するスムーズスクロールを簡単に適用する方法について紹介します! スムーズスクロールを適用すると↓のリンクのように目的地まで滑らかにスクロール移動することができます。 スムーズスクロールを適用する事で遷移時の見てくれも良くなりますし、スクロールして移動するので移動先の場所が分かり易くなるという利点があります。 jQuery行の追加 スムーズスクロールを適用したいページの<head></head>内に以下の行を追加してください。 <script ...

HP・ブログ関連 ガジェット・ツール

2019/9/1

キーワードからホームページ内の関連記事をリスト化してくれるおすすめジェネレータ

ある記事に関係のある内容を含んだサイト内の関連記事一覧をリスト化する際に役に立つ、関連エントリーリストジェネレータをご紹介します! feed.fkoji.comへのアクセス 関連リストジェネレータ: http://feed.fkoji.com/related/ ↑のサイトにアクセスしてください。すると以下のような画面が出てくると思います。 ブログのURL: ・関連記事を検索するディレクトリを指定します。サイト全体で検索をかける時は、自身のホームページトップのURLを入力してください。 検索結果の絞り込み: ...

HP・ブログ関連 SEO対策 ガジェット・ツール

2019/9/1

サイトの全てのページのリンク切れを一括で調べる方法(SEO対策)

自サイトから他サイトへの外部リンクおよび自サイトの内部リンクにリンク切れが生じると、閲覧者さんに不快な思いをさせるだけでなくSEO(検索エンジン対策)にも悪い影響を与えてしまいます。 そこで、自サイトのすべてのページにリンク切れが無いかどうかを一括で調べる簡単な方法について紹介します! dead-link-checker.comへのアクセス https://www.dead-link-checker.com/ja/ 上記の"リンクチェッカー(リンク切れチェックツール)"さんのサイトにアクセスしてください。 ...

HP・ブログ関連

2020/4/8

吹き出しを作るためのCSSが簡単に生成できるおすすめサイト

ホームページやブログでよく見られる"吹き出し"を、画像を使用せずにCSSのみで作りだす際に役に立つサイトさんをご紹介します! ↓ ちなみにこのような感じの"吹き出し"が簡単に生成できます cssarrowplease.comへのアクセス http://cssarrowplease.com/ 上記の"cssarrowplease.com"さんのサイトにアクセスしてください。 アクセスすると以下のような画面が出てくると思います。 このサイトの数値をいじることで、吹き出しを自由にカスタマイズできます。 以下、パ ...

HP・ブログ関連 ガジェット・ツール

2019/9/1

画像の背景を透明化する"透過処理"を施す方法(GIMP2)

画像合成などでよく用いられる、画像の特定の箇所を透明にする透過処理を画像編集ソフト「GIMP2」を用いて簡単に行う方法について紹介します! ちなみに透過処理するとどのようになるかというと、下の例をご覧ください。 ▼ 透過処理前 ▼ 透過処理後 といった感じに、透過処理を行うと背景色が透明になります。これにより他の画像と合成することで 以下のような画像を作ることも可能になります。 ▼ 透過処理を施した画像と他の背景画像を合成した例 この透過処理の技術は動画制作で画像を用いる際、邪魔な背景色を消して特定の物体 ...

HP・ブログ関連 動画サイト関連

2019/9/1

動画を投稿する際の"著作権表記"の正しい書き方

動画を制作する際、使用している素材によっては誤解を避けるために著作権の表記を行う必要がある場合もあります。そこで、フリーのBGMや画像を使用する際の正しい著作権の表記方法について解説しようと思います! "著作権表記"の必要性 "著作権表記"というのは、映画や音楽のみならず様々な商品に見られる、著作権者を明記し主張することで無断利用を防ぐためのものです。 みなさんもいろんなところで以下のような著作権(コピーライト)表記を目にしたことがあると思います。 Copyright © 2015 FukaFuka295 ...

HP・ブログ関連 SEO対策

2019/9/1

ホームページの読み込みを高速化!キャッシュを設定するための.htaccessを簡単に生成するおススメサイト

ホームページの読み込みを早くすることは閲覧者や自分、そしてSEO的にもとても重要なことです。 ページの読み込み速度を向上させる有効な手段の一つとして、ホームページの「キャッシュ」を設定する手段が挙げられます。 キャッシュとは? 「キャッシュ」とは、一度アクセスしたサイトのデータをプラウザで一時的に保管し、次回同じページにアクセスした際の表示を速くする仕組みです。 例えば運営しているサイトの更新頻度が2日に1回の場合、ホームページのキャッシュ維持(保管)期間を2日と設定しておくことで、 その間自分のサイトを ...

HP・ブログ関連

2019/4/8

カーソルを合わせた際の様々なホバーエフェクトを超簡単に実装する方法

ボタンなどの要素にカーソルを合わせた際の様々なホバーエフェクトを「Hover.css」を用いて超簡単に実装する方法について紹介します! 「Hover.css」のダウンロード&実装 ianlunn.co.uk/articles/hover-css-tutorial-introduction/ 上記のダウンロードサイトにアクセスし、"DOWNLOAD"ボタンをクリックして「Hover-master.zip」という zip形式のフォルダをダウンロードしてください。 ダウンロードが完了したら.zipフォル ...

HP・ブログ関連 ガジェット・ツール 動画サイト関連

2020/3/24

洋画の字幕のようなフォントを追加!日本語フォント 「しねきゃぷしょん」紹介

Aviutilやムービーメーカー等で動画を編集している方の中には、動画内で映画的な演出をしたい方もいると思います。 そこで動画で映画的な演出をしたいときに役に立つ、洋画等でよく見る日本語字幕に似た「しねきゃぷしょん」というフォントの導入方法などについて紹介します! ▼ 洋画の日本語字幕例 ▼ 「しねきゃぷしょん」フォント 上の例を見ても、洋画の日本語字幕にかなり近いフォントなため、動画で映画風の演出を醸し出すことができます。 フォントのダウンロード&導入 しねきゃぷしょん フォントダウンロード 上 ...

HP・ブログ関連 SEO対策

2020/4/8

Nortonへサイト評価の申請後、いつまで経っても未評価のままの場合の対処法(SEO対策)

以前の記事、 でも紹介したように、世界一のシェアを誇るセキュリティソフト「Norton(ノートン)」に自分のサイトを安全と評価してもらう(安全マークをつけてもらう)ことは、 SEO的にもとても重要です。 しかし、"ノートンセーフウェブ" に評価の申請を行っても、ずっと未評価の状態が続く場合があります(原因不明)。 実際私も、ノートンセーフウェブに評価の申請を出してから一か月経過しても、なぜかずっと未評価の ままでした('A`) そこでとある対処法をとったところ、無事ノートンさんのお墨付き、安全マークを頂く ...

HP・ブログ関連

2019/9/1

ページ移動時(遷移時)に微妙に左右にカクッとなる現象の解決方法

ホームページ内で他のページへ移動した際に、左右に微妙にカクっとなってから表示される現象が気になる方もいると思います。 そこで今回、その現象の超簡単な解決方法についてご紹介します! カクっと左右にずれる原因 ページ読み込み時に瞬間的に左右にずれる理由は超単純です。 ページの縦幅が長いときは画面の右側(プラウザによっては左側)にスクロールバーが出現しますよね。 ページを移動した際、移動先のページの要素をすべて読み込むには時間がかかります。 なのでページのコンテンツの縦幅が長く、ページが下まで続く場合にはプラウ ...

HP・ブログ関連

2020/5/12

ホームページにアコーディオンのようなフォトスライドを簡単に実装する方法

すこし洒落た感じのフォトスライドをホームページのトップに実装したい! そんな時に役に立つ、レスポンシブ対応のアコーディオン形のスライダー(raccordion slider) を簡単に実装する方法について今回は紹介します! ちなみに以下のDEMOページのようなフォトスライドが実装されます。 DEMOページ ソースプログラムのダウンロード https://egrappler.com/jquery-responsive-horizontal-accordion 今回実装する「raccordion slider ...

HP・ブログ関連

2019/9/1

要素に影やグラデーション・角の丸みを適用するCSSを生成してくれるおすすめサイト

要素や画像の角を丸くしたり、影やグラデーションを付けたりなど自分で書くには面倒くさいCSSコードを自動で簡単に生成してくれるサイトさんを紹介します! (しかも各WEBプラウザ対応コードまで付けてくれる親切設計!) ↓ このような感じの要素が簡単に生成できます CSS3 GENERATORへのアクセス css3generator.com/ 上記の"CSS3 GENERATOR"さんのサイトにアクセスしてください。 アクセスすると以下のような画面が出てくると思います。 左側にあるコントローラを調整することで、 ...

HP・ブログ関連 ガジェット・ツール

2020/4/8

ホームページにブログのようなフィードバックコメント欄を簡単に設置する方法

ブログでよく見るような、閲覧者が投稿したコメントがフィードバックされて表示されていくコメントフォームをホームページに設置する簡単な方法についてご紹介します! ※このページの下部のようなコメント欄が設置されます(試しにコメントしてみて下さい)。 ちなみに以前の記事でもコメントフォームの設置方法について紹介しましたが今回は、より簡単に、より多機能な コメント欄を設置することができます。 ① 提供サイトへのアクセス&ログイン 今回のコメントフォームの設置には、「HTML COMMENT BOX」さんのサイトが提 ...

HP・ブログ関連 SEO対策

2019/9/1

セキュリティソフト"Norton(ノートン)"に自分のホームページを安全だと評価してもらう方法(SEO対策)

最近はセキュリティソフトによって安全or危険・不審なサイトの区別は一目でつくようになりました。 特にセキュリティソフトとしての世界シェアNO.1(PCユーザーの2人に1人が利用)を誇る「Norton(ノートン)」を導入していると、 検索エンジンで検索したときに、下の画像のようにサイト名の後ろに安全か否かの評価マークが付きます。 このノートンさんによる安全マークは、「このサイトはコンピュータや個人情報の脅威になるような悪質なコンテンツ(ウィルスなど)を含んでいませんよ」ということを証明してくれます。 安全マ ...

HP・ブログ関連 ガジェット・ツール

2019/9/1

複数のHTML&テキストファイルの共通部分を一括で置換するおすすめソフト

更新履歴やお知らせなど、ホームページの複数のページで同様の内容を表示している場合に全てを手作業で更新する作業はめんどくさい! そんなときに役立つ、共通箇所を一括で簡単に置き換えることのできるおすすめのソフトをご紹介します。 その名も・・・"TextSS" です!(無料ソフト) ① TextSSのダウンロード Download: TextSS.net公式サイト ダウンロードページ 上記のサイトにアクセスし、最新バージョンのボタンを押してソフトのダウンロードを行ってください。 「tss○○○.zip」というZ ...

HP・ブログ関連

2019/9/1

クリックすると展開表示する"折りたたみメニュー"を簡単に作る方法

「小項目があり過ぎて、全部表示するとゴチャゴチャして見づらくなってしまう!」 そんな時には、クリックすると中身を展開したり閉じたりすることのできる "折り畳みメニュー"がとても役に立ちます! そこで今回は、面倒なjavascript等の記述をせずに、htmlに数行追加するだけで簡単に実現することのできる方法を紹介します! ※ "折りたたみメニュー"の実装例は以下のようになります。   ▼ 実装例① (クリックで展開します) ・項目1 "リンクや画像等も自由に含むことができます" ・項目2 "リン ...

HP・ブログ関連

2019/4/7

HTMLやCSSのソースコードをそのままページに貼り付ける方法

ホームページやブログで自身のソースコードを表示したい際に、HTMLやCSSのソースコードをそのまま貼り付けることのできる方法を紹介します! 貼付け用ウィジェットを『GitHub』で生成 手順①: まず「GitHub Gist」さんのサイトにアクセスしてください。 手順②: "Language:Text"をクリックして貼り付けたいソースコードの言語を選択し、下の枠内に表示したいソースコードを記述して、 下の"Create Pubric Gist"というボタンをクリックしてください。 手順③: クリックすると ...

HP・ブログ関連

2019/4/7

タブごとに内容を切り替える「タブメニュー」をホームページに作成する方法

ページを切り替えることなく、同じページ内でタブごとに表示内容を変更する「タブメニュー」の作り方について、今回簡単に紹介しようと思います! ちなみにタブメニューとは↓のように、タブをクリックするとページ移動することなく、ボックスの中身のみが切り替わるというものです。 タブ1タブ2タブ3  タブ1の内容です。画像やリンクを含めることもできます。  タブ2の内容です。画像やリンクを含めることもできます。  タブ3の内容です。画像やリンクを含めることもできます。 ※ 今回の解説では、↑の実装例で示したものと同じよ ...

Copyright© ゲマステ!- Gamers Station , 2020 All Rights Reserved.