ふかふか交易所

ふかふか交易所 | ゲーム、HP・ブログ制作、動画制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介します

HP・ブログ関連

HP・ブログ関連

2019/9/1

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

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

HP・ブログ関連

2019/4/8

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

すこし洒落た感じのフォトスライドをホームページのトップに実装したい! そんな時に役に立つ、レスポンシブ対応のアコーディオン形のスライダー(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・ブログ関連

2019/9/1

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

ブログでよく見るような、閲覧者が投稿したコメントがフィードバックされて表示されていくコメントフォームをホームページに設置する簡単な方法についてご紹介します! ※このページの下部のようなコメント欄が設置されます(試しにコメントしてみて下さい)。 ちなみに以前の記事でもコメントフォームの設置方法について紹介しましたが今回は、より簡単に、より多機能な コメント欄を設置することができます。 ふかふか交易所HTMLサイトでも設置可能!ホームページにブログのような"一言コメント欄"を設置する方法自 ...

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の内容です。画像やリンクを含めることもできます。 ※ 今回の解説では、↑の実装例で示したものと同じよ ...

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

2019/9/1

クリックでその場に画像を拡大表示!ホームページに「LightBox」機能を実装する方法

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

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

2019/9/1

ページのスクロールに合わせて付いてくるサイドバーを実装する方法

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

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

2019/9/1

ホームページに音声を再生するプレーヤーを埋め込む方法

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

HP・ブログ関連 SEO対策

2019/9/1

画質はそのままで容量削減!超簡単:おススメ画像圧縮サイト

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

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

2019/9/1

超簡単!ホームページにスライドショー機能を実装する方法(JQuery)

自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい! という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します! ちなみに導入に成功すると↓このようなスライドショーが実装されます(GoogleChrome, IE11, IOS動作確認) ▼こちらのスライドショーもおすすめ! ふかふか交易所ホームページにサムネイル付きスライドショーを簡単に設置する方法(jQuery)ホームページやブログに設置した「bxslider」のスライドショーに簡単なカスタマイズを ...

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

2019/9/1

HTMLサイトでも設置可能!ホームページにブログのような"一言コメント欄"を設置する方法

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

HP・ブログ関連

2019/4/7

夢のマイホームページ開設!

当ホームページをご覧に来て下さったみなさん、どうもありがとうございます! 未だ厳しい寒さの続く中、みなさんいかがお過ごしでしょうか。 私はと言うと大学の卒業論文の作成も終わり、 以前から一度作ってみたいと思っていたホームページ作りの勉強を地道にしていました!(なんというさみしい春休み・・・;) そしてホームページ作りを学び始めて約1か月、遂に念願のマイホームページを開設することができました!  その名も・・・ "ふかふか交易所" !! "ふかふか交易所"の目的 "交易所"には 「互いに品物の交換や売買をす ...

Copyright© ふかふか交易所 , 2019 All Rights Reserved.