ホームページ

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

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

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

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

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

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

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

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

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

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

画像をクリックすると、 別ページに飛ぶことなくその場で拡大表示してくれるjQueryの有名プラグイン「LightBox」を ホームページに実装する方法について、簡単に解説します！ ▼ 実装例（画像をクリックすると拡大します） ①「LiteBox Plus+」プラグインのダウンロード 「LightBox Plus+」のダウンロードサイトへ行き、下の方にスクロールすると見える Downloadボタンを押して「lightbox_sample.zip」という.zipファイルをダウンロードしてください。 ダウンロー ...

色々なホームページでよく見かける、"ページのスクロールに合わせて付いてくるサイドバー" を実装する方法について紹介します！(Ggoogle Chrome, IE11動作確認) 具体的にどんな感じになるかについては、PC表示にしてこのページのサイドバーに注目しながらページを下の方に スクロールしてみてください。 スクロールすると、それに合わせて一緒についてくると思います。 ① Jqueryプラグインのダウンロード この機能を実装するためにはJqueryの「Sticky」というプラグインを導入する必要がありま ...

作成・編集したBGMや効果音等のサンプルを、ホームページ・ブログを見に来てくれた人に気軽に聞いて もらいたい！ といった時に役に立つ"簡易mp3プレーヤー"をページに埋め込む方法を紹介します！ ちなみに導入に成功すると↓のようなプレイヤーが表示されます https://fukafuka295.jp/wp-content/uploads/2019/04/sample1.mp3   色々なサイトさんで見かけるような典型的なプレイヤーですね！では以下で導入手順について 解説していきます。 ① プレイヤ ...

「画像を送信したいけど容量が重すぎて時間がかかる！」「ホームページにスライドショー機能を付けたはいいけど、ページの読み込みが遅くなった」 なんてお悩みを抱えた方々に今回、画質はほとんど変わらないまま、画像の容量だけを削減してくれるおススメのサイトをご紹介します！ 画像の重さはマイナスにしかならない "画像"データの容量というのは、"動画"データに比べると個々では大したことの無いデータ量ですが、 油断してホームページやブログなどにバンバン貼りまくっていると、気づいたら思いもよらぬ容量になってしまい、 ページ ...

自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい！ という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します！ ちなみに導入に成功すると↓このようなスライドショーが実装されます(GoogleChrome, IE11, IOS動作確認) ▼こちらのスライドショーもおすすめ！ スライドショーの簡単な設置方法 まずは「bxSlilder」さんのサイトで配布されている JQueryのプラグインファイルをダウンロードしてください（画像の赤枠部分からダウンロード ...

自分のホームページにブログでよく見るようなコメント機能を追加したい！でもCGIとか勉強するのメンドくさいし・・・。 そういった方のために今回、簡単に一言コメント欄を設置する方法を紹介します！(Google Chrome, IE11で動作確認） ちなみに導入に成功すると、このページの下部にあるようなコメント欄が設置されます。 ① プログラムのダウンロード まずはプログラムを配布して下さっている 「WebmasterTOOL」さんのサイトに行き、下の方にスクロールすると"一言コメント"のダウンロードボタン が ...

当ホームページをご覧に来て下さったみなさん、どうもありがとうございます！ 未だ厳しい寒さの続く中、みなさんいかがお過ごしでしょうか。 私はと言うと大学の卒業論文の作成も終わり、 以前から一度作ってみたいと思っていたホームページ作りの勉強を地道にしていました！(なんというさみしい春休み・・・;) そしてホームページ作りを学び始めて約1か月、遂に念願のマイホームページを開設することができました！  その名も・・・ "ふかふか交易所 ゲマステ！（ゲーマーズステーション：Gamers Station）" ※201 ...