ホームページ

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

自分のウェブサイトを作り始めるようになって早半年、「そろそろなんかWeb関連の資格でも取ってみようかな～(ドヤァ」なんて意識高い系大学生にありがちなことを考えるようになりました。 そこで調べてみたところ、なんと"ウェブ業界唯一の国家資格"と大々的に銘打っている資格があるではないですか！   その名も... ウェブデザイン技能検定   　ウェブデザイン技能検定とは..? " ウェブデザイン職種は、「職業能力開発促進法施行令の一部を改正する政令」（2007年3月30日）において技能検定制度 ...

「ホームページやブログでスマートフォンのアプリを紹介したい！」 そんな時に役に立つ、アプリへのダウンロードリンクを画像付きで生成することのできる「アプリーチ」 というサイトをご紹介します！   ▼ ちなみにこのようなウィジェットを生成することができます。(widthとheightを%指定しているため、スマホ表示にも対応しています) ドラゴンクエストVIII 空と海と大地と呪われし姫君 SQUARE ENIX INC¥2,800posted withアプリーチ   アプリーチ 使い方 ア ...

PCで画面をキャプチャーする際に、いちいち貼り付けを繰り返すことなく、連続で撮影・保存することのできるおすすめのフリーソフトについて紹介します！ その名も... KoClip ！！ とても使いやすく役に立つソフトです。 KoClipのダウンロード クリップボードの画像自動保存ソフト "KoClip" 上記のサイトにアクセスし、KoClip(.zipフォルダ)をダウンロードしてください。 ダウンロード完了後、.zipフォルダを解凍して中の.exeファイルダブルクリックしてください。 するとPC上にハサミのマ ...

複数の画像の大きさを指定のサイズに一括変更(リサイズ)することのできる、「Ralpha」というおすすめフリーソフトをご紹介します！ とても簡単にたくさんのサイズの異なる画像の大きさを変換することができます。 Ralphaのダウンロード Ralpha Image Resizer 上記のリンクから、.zipフォルダをダウンロードしてください。 ダウンロード完了後、.zipフォルダを解凍し、中の「Ralpha.exe」を起動してください。 使い方 Ralphaを起動すると以下のような画面が出てくると思います。 ...

今回はホームページやブログを作成するときに役に立つ、オシャレなロゴや背景画像を無料でダウンロードすることのできる、私もよくお世話になっているフリーサイトさんをご紹介させていただきます！ フリー素材サイト Sosa :: Ten by Twenty URL: https://tenbytwenty.com/?xxxx_posts=sosa 「Sosa」という様々なロゴを追加するフォントを配布しているサイトです。 ペンやPC・カメラなど多種多様なロゴがあり、サイトのボタン等の装飾を行う際に非常に役に立ちます。 ...

WordPressではなくHTMLのみで構築されたサイトをスマートホンやタブレットに対応させる（レスポンシブにする）ことは一苦労です。 一応、有料でホームページをスマホ＆タブレット表示に対応させるサービスを提供しているところもありますが、年数万円～数十万円の費用がかかってしまいます。 個人運営のサイトさんにとっては痛い出費になりますね； そこで今回、私がこのサイトをスマホ表示に対応させる際に用いた、最も簡単（と思われる）でお金もかからない手法について解説したいと思います！ デバイスごとに読み込むCSSを切 ...

サイトをネットで公開する前に自身のローカルサーバーで確認したい、という時に役立つ「XAMPP」というソフトの導入方法と使い方について分かり易く解説します！ XAMPPとはWebアプリケーションを開発するためのツールを無料で一括インストールすることのできるソフトです。 このソフトを用いることで以下の利点があります。 PC内にローカルサーバーが構築できる ローカルサーバー内に作業中のサイトをアップすることで、デザインの確認やphp等の動作確認をスムーズに行うことができる オフライン環境でも使用できるため、イン ...

ホームページやブログに設置した「bxslider」のスライドショーに簡単なカスタマイズを施して、 下に各スライドの画像が表示される"サムネイル付き"のスライドショーにする方法について解説します！ ▼実装例（このようなデザインのスライドショーが設置できます） 既にjQueryによるスライドショーが設置できている事が前提となりますので、初めてスライドショーを設置する方は、以下の記事を参考にスライドショーを設置しておいてください。 htmlへの記述 すでに「bxslider」のスライドショーが設置出来てる方はh ...

ホームページの背景に画像を設置することにより見栄えが良くなりますが、場合によっては 画像の色合いが強すぎて閲覧者にとって目障りになってしまうこともあります。 そこで今回は、無料画像編集ソフトの「GIMP2」を用いて、画像に斜線を入れることによってオシャレに 色合いを抑える方法について解説します！ 斜線適用のためのレイヤーを作成 今回の解説では以下の、横：700px 縦:350px の画像を使用します。 白地のキャンパスを作成 まずGIMP2を開き、「新しい画像」から白地のキャンパスを作成してください。この ...

色々なホームページで、以下のように表示しきれないテキストの部分をドット「...」に置き換えているのをよく目にするのではないでしょうか。 1行の場合 これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。 2行以上の場合 これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これ ...

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

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

ページ内のリンクをクリックした際に目的箇所まで滑らかに移動するスムーズスクロールを簡単に適用する方法について紹介します！ スムーズスクロールを適用すると↓のリンクのように目的地まで滑らかにスクロール移動することができます。 スムーズスクロールを適用する事で遷移時の見てくれも良くなりますし、スクロールして移動するので移動先の場所が分かり易くなるという利点があります。 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"さんのサイトにアクセスしてください。 アクセスすると以下のような画面が出てくると思います。 このサイトの数値をいじることで、吹き出しを自由にカスタマイズできます。 以下、パ ...

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