HP・ブログ関連

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

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

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

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

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

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

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

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

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

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

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

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

要素や画像の角を丸くしたり、影やグラデーションを付けたりなど自分で書くには面倒くさい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"というボタンをクリックしてください。 手順③： クリックすると ...