ネットコンテンツ全般から日々のお役立ち情報まで分かりやすくお届け | ふかふか交易所

ふかふか交易所

設置

HP・ブログ関連

2019/6/9

2枚の画像を比較するのに便利な『比較用スライドショー』を超簡単に設置する方法を紹介!

以前の記事で、ホームページに普通のスライドショーを設置する方法について紹介しました。 超簡単!ホームページにスライドショー機能を実装する方法(JQuery) しかし今回紹介するスライドショーは、2枚の画像を比較したい時に非常に便利な『比較用スライドショー』です!(通称:Cocoen)   例えば以下のような2枚の画像を比べて見せたいとします。   ここで『比較用スライドショー』を導入すると、以下のように、カーソル操作で2枚の画像を見比べることができるスライドショーが設置できます。   ...

HP・ブログ関連

2019/4/11

Googleカスタム検索の薄い文字(ウォーターマーク)を非表示にする簡単な方法

自身のホームページに「サイト内検索機能」を導入したい場合、Googleの提供するカスタム検索(Google Custom Search)を設置する方法があります。 しかしGoogleカスタム検索を設置した際に、初期の状態では検索枠内に"Googleカスタム検索"のように薄い文字(ウォーターマーク)が浮かび上がっていると思います。 人によってはデザインの関係上、この文字を非表示にしたい!という方もいると思います(実際、私は気になって仕方がありませんでしたw)。 そこで今回は、Googleカスタム検索の薄い文 ...

HP・ブログ関連

2019/4/14

[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ

以前このサイトの記事にて、jQueryで動作するスライドショー「bxSlider」の簡単な設置方法について解説しました。 超簡単!ホームページにスライドショー機能を実装する方法(JQuery) すると、一部の方々から、スライドショーが正常に動作しないとの報告を少なからず頂きます。 そこで今回は「bxSliser」のスライドショーに関して、 「設置はできたがスライドショーが動かない」 「スライドショーに不自然な余白ができてしまう」 といった場合の対処法についてまとめてみました! スライドショーが正常に動作し ...

HP・ブログ関連

2019/4/10

『HCB Comment Box』コメントフォームの詳細カスタマイズ方法

こんにちは、ふかふかです! 以前の記事で、非Wordpressサイト(HTMLベースで構築されたサイト)に、ブログのようなコメント欄を簡単に設置する方法について紹介しました。 ホームページにブログのようなフィードバックコメント欄を簡単に設置する方法 ですがこのとき設置したコメントフォームは海外サイトの「HCB Comment Box」というサービスを利用したものなので、サイトにコードをコピペし、 コメントフォームを設置しただけでは各所の文字が英語のままになっていたり、納得のいくスタイルでなかったりして不満 ...

HP・ブログ関連

2019/6/9

ホームページにサムネイル付きスライドショーを簡単に設置する方法(jQuery)

ホームページやブログに設置した「bxslider」のスライドショーに簡単なカスタマイズを施して、 下に各スライドの画像が表示される"サムネイル付き"のスライドショーにする方法について解説します! ▼実装例 既にjQueryによるスライドショーが設置できている事が前提となりますので、初めてスライドショーを設置する方は、以下の記事から読んでください。 超簡単!ホームページにスライドショー機能を実装する方法(JQuery) htmlへの記述 すでに「bxslider」のスライドショーが設置出来てる方はhtmlの ...

HP・ブログ関連

2019/4/9

ホームページの記事上部にシンプルな目次を簡単に設置する方法

ホームページやブログの記事ページに"あった方が良い"ものの一つとして「目次」が挙げられます。 よくWordpressを使ったサイトで以下のような目次を見かけると思います。 目次があることにより訪問者は一目で記事の構成を理解することができ、特定の箇所へ簡単に移動することが出来るため"ページの離脱率"や"再訪問率"の改善が見込まれます。 そこで今回は、シンプルで使いやすい目次(スマホ表示にも対応)をコピペするだけで超簡単に設置する方法についてご紹介します。 目次の設置方法 設置したいページのhtmlの設置した ...

HP・ブログ関連

2019/4/8

ホームページやブログにGoogle+のコメント欄を設置する方法

以前の記事では、ホームページにブログのようなコメント欄を設置する方法について2つの記事で紹介しました。 ↓ 参考 HTMLサイトでも設置可能!ホームページにブログのような"一言コメント欄"を設置する方法 ホームページにブログのようなフィードバックコメント欄を簡単に設置する方法 そして今回の記事では、Google+ のコメント欄を設置し、他の人とコメントを共有する簡単な方法を紹介します! 設置方法 Google+のコメント欄を設置する方法はとても簡単で、以下のhtml行を 設置したいページの設置したい箇所に ...

HP・ブログ関連

2019/4/16

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

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

HP・ブログ関連

2019/6/9

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

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

HP・ブログ関連

2019/4/17

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

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

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