My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

※ 当サイトはアフィリエイト広告を利用しています

「Sourcetree」でGitデビューしました!

遅ればせながら、先日ようやくGitデビューしました。 ということで、以下、簡単ですが、Gitについてのご紹介です。 Gitとは Gitとは、 分散型バージョン管理システム(※1)のことです。 プログラムのソースコード管理にとても便利な仕組みであるため、いまや、…

WordPressに追加したjQueryが効かない、その対処法は?

先日作成したパラメータ引き継ぎスクリプトをWordPressにも流用しようとしたところ、まったく機能しない。 デバッグしてみるも、スルー。 コードは合っているはずなのに、なぜだろう?ということで、原因と解決策を調べてみました。ちなみに、先日のパラメー…

Scssコンパイル時のエラー「Invalid Windows-31J character」 原因と解決策は?

「Invalid Windows-31J character」 エラーって? 発生プロセス Webページ追加に伴い、scssファイルを新規作成、 いつものようにコンパイルしようとしたところ、エラー発生。 症状 以下、その際 Sass プリプロセッサーである Koala で出力されたエラーメッセ…

【Amazon タイムセール】Web制作参考書籍もお買い得 ( 3/25 23:59まで)

ただいま kindle書籍がお買い得です。 個人的には、やっぱり本は紙が好き。 ただ、セール中のkindle本、紙の書籍に比べて相当格安で購入できます♪ (紙書籍の半額以下のkindle書籍も多数あり) それに電子書籍なら場所も取らないし、検索もできるのが利点!…

【JavaScript】パラメータ引き継ぎ用JSを作りました(第2弾)

今日は、パラメータ引き継ぎ用のJavaScript第2弾を作成しました。【関連記事】 times-diary.hatenablog.com ちなみに、 パラメータとは?と思われた方は、 こちらの記事が参考になると思いますよ。↓ getパラメータ/クエリーストリングとは? « アクセス解析Q…

CSSで実装するタブメニュー (3)

今日は以下記事を参考にさせていただき、少しアレンジしてCSS + JS で実装するタブメニューを作ってみました。[ 参考記事 ] coliss.com 今回Demoに実装したコードは、以下の通りです。[ HTML ] <html> <head> <meta charset="utf-8"> <title>Tub</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <h1>タブメニュー</h1> <div class="box"> </div></body></html>

今見ているサイトをTwitterで即シェアできるChrome拡張機能「JustTweetボタン」

JustTweetボタン今日は、こちらのChromeアドオンをご紹介いたします。この拡張機能を使うと、 見ているページにTwitterシェアボタンがない場合でも即シェアできます。たとえばこんな感じで。 使い方は、これだけ 1. こちらの拡張機能をChromeウェブストアで…

【WordPress】"Powered by STINGER" が消せない問題 (StingerPlus2)

WPテーマ「StingerPlus2」でWordPressサイトを作ってみたところ、ページフッター箇所のクレジットが消せなくて困るという問題が発生。 ↓ こんな感じでクレジット表記が。。。 <p class="copyr" data-copyr="">Copyright© "サイト名" , 2018 All&ensp;Rights Reserved Powered by <a href="http://manualstinger.com/cr" rel="nofollow">STINGER</a>.</p> で…

便利なテキスト比較ツール 「difff デュフフ」のご紹介

本日は、便利なテキスト比較オンラインツール 「difff デュフフ」をご紹介させていただきます。公式サイト: difff《デュフフ》 このツールは、2004年からあり、私も数年前から愛用させていただいております。 ブラウザでサクッと手軽に使え、必要なら、一時的…

【はてなブログカスタマイズ】階層型グローバルメニューを設置してみました

階層型グローバルメニュー設置 本はてなブログに階層型グローバルメニューを設置してみました。 実装にあたりましては、こちらのゆきひーさんのブログ記事を参考にさせていただきました。 www.yukihy.comゆきひーさん、 大変参考になりました。 情報のご提供…

【お得情報】無料 商用利用可能フォント(2/26まで)

これはお得ですね~♪情報発信元は、コリスさん! コリスさん、いつも有益な情報をありがとうございます!まだの人はお忘れなく!これは嬉しい!Webデザインや同人誌に使える有料フォント約11,000円分が期間限定で無料ダウンロードできますhttps://t.co/oo9sl…

はてなブログにメールフォームを設置してみました

はてなブログにメールフォームを設置してみました。 今回メールフォームに使用したのは、忍者ツールズです。以下、その手順をお伝えいたします。 忍者ツールズメールフォーム設置方法 1. 忍者ツールズにログインします。2. メニューから、「その他」-「メー…

【はてなブログカスタマイズ】メニューバーを設置しました

本はてなブログをカスタマイズ、 ヘッダにグローバルメニューを設置してみました。 はてなブログ グローバルメニュー設置 コードは以下の通りです。[html] 以下HTMLを管理画面「デザイン」>「カスタマイズ」>「ヘッダ」の「タイトル下」に入力します。 <div id="menubar"> <ul> <li><a href="http://times-diary.hatenablog.com/" title="ホーム" >ホ</a></li></ul></div>…

【Bootstrap】無料で使えるBootstrapビルダー「Pingendo」のご紹介

今日は、Bootstrap4 ベースのビルダー「Pingendo 」をご紹介します。このツールを使うことで、プロトタイプ用のWebサイトがサクサク作れますので、オススメです。 作業は部品選択などの直感的操作で進められますし、スタイリッシュなサイトがあっという間に…

【JavaScript】Math.randomでページリダイレクト機能を実装

こんばんは。今日は、JavaScriptのMath.randomで複数のページに均等の確率でリダイレクト実行する機能を作りましたので、ご紹介します。 リダイレクト (3ページに均等・ランダムにリダイレクト) <script> var url = ""; var ua = navigator.userAgent; var random = …

多機能編集機能付きキャプチャーツール「Nimbus Screen Capture」

本日は、Firefox版、Chrome版の両方に対応する拡張ツール、 「Nimbus Screen Capture」をご紹介します。このツール一つで、 ブラウザでのキャプチャ画像取得から画像への文字入れや囲み枠挿入などまで可能、 マニュアル作成時などにとっても便利なツールです…

実はなかなか使える、Firefoxの標準キャプチャ機能!

今日はFirefox標準のキャプチャ機能についてご紹介します。Webサイトのページ全体キャプチャ( スクリーンショット )を撮る時など、今まではブラウザのアドオンツールを利用していました。が、実は、Firefoxの場合、 ページ丸ごとキャプチャだけなら、そうい…

爆速でプロトタイプ制作ができるWebサイトビルダー「AppDrag」

AppDrag:専門家のための高度なウェブサイトビルダーこんばんは。 今日は、Webサイトビルダー 「AppDrag」のご紹介です。これ、めちゃくちゃ便利、 パーツを選んでいくだけで、爆速でおしゃれなサイトが出来上がります。 お問い合わせフォームもすぐに使える…

livedoor (ライブドア)ブログからWordPressに記事移行

友人のライブドアブログをWordPress化するお手伝いをさせていただだきました。以下、その作業過程をお伝えします。 livedoor(ライブドア)ブログからWordPressへのブログ移行手順 1. テキストデータの取得 livedoor(ライブドア)ブログ 管理画面より、記事デー…

レスポンシブサイト制作で役立つツールまとめ (6選)

Blisk レスポンシブサイト制作時に役立つおすすめツール6選 今日は、レスポンシブサイトの制作に役立つツールをピックアップしてみました。いずれも、PC上からスマホ、タブレット等の各種デバイス表示が確認でき、制作の効率化に大いに役立つツールです。以…

【WordPress】プラグインなし 吹き出し会話機能 ( 第2弾 )

吹き出し会話機能 ( 第2弾 ) 今日は、WordPressに使える 吹き出し会話機能 の第2弾です。以前 ご紹介した第1弾記事はこちらです ↓ times-diary.hatenablog.com 今回の吹き出し会話機能の特徴 吹き出し背景色を漫画風に白っぽくしました テキストの文字数に応…

特定の文字列を置換するjQuery

今日は、画面サイズによって文字列を置換する jQueryを作成しました。[ 作成理由 ] モバイルデバイス表示時のレイアウト切り替えに伴い、 表示テキストを変更したかったため。 特定の文字列を置換するjQuery 仕様 画面サイズが1,024 px 以下の時、 actionク…

WordPress サイトで「Fatal error: Allowed memory size of …」エラーが発生した場合の原因・対処法

今日、WordPress 管理画面で設定変更を行っていた時、 以下エラーが発生し、WordPressにアクセスできなくなるという現象に遭遇しました。ついては、このような場合の原因・対処法について、確認しました。 Fatal error: Allowed memory size of XXXXXXXXX by…

favicon読み込み時のエラー 「Failed to load resource: the server responded with a status of 404」への対応

本日ほぼ完成したBootstrapサイトをBlisk(※)で検証していたところ、Errors Notifierでエラーを検出! ※Bliskについては、以下記事をご参照のこと times-diary.hatenablog.com さらに確認すると、以下のようなメッセージが。 Failed to load resource: the se…

Web開発者向け最強ブラウザ Blisk のご紹介

Web開発者向けブラウザを使ってみました。 やはりこれ、評判の通り、かなりおすすめです。 Web制作時には最強ブラウザと言ってよいのでは? ということで、本日はこちらのブラウザをご紹介します。 Blisk の特徴 Blisk のおすすめポイント エミュレーション…

配色の選定にはこれが便利!オンラインツール「PHOTOCOPA」のご紹介

今日は、Web制作中の配色時にお役立ち、 「PHOTOCOPA」というツールをご紹介いたします。 「PHOTOCOPA」とは? PHOTOCOPAは、以下サイトで提供されているオンラインツールです。公式サイト: PHOTOCOPA | Photo Color Palettes by COLOURlovers :: COLOURlov…

【WordPress】サイトURLをhttpsにしたらログインできなくなった時の解決法

サイトhttps化にともない、WordPressでサイトURLを「https:// 」に変更したところ、直後から図のようなエラー画面が。 サイトにアクセスできない状態になっていましました。 【障害対応】常時SSL化でサイトアクセスエラー発生 以下、各ブラウザ別の表示例で…

Webデザイナーになるために ( これからWebデザイナーをめざす方々へ )

制作のスキルを上げるためには 「実際に報酬を得て仕事をすること、 それがスキルを上げる早道」これはかつての私が通っていたWeb制作科での恩師の言葉。 「まだこれができない」 「まだこれしかできない」 「スキルが足りない」 「だからまたとても仕事なん…

Koala 2.2.0にアップデートするとエラーが発生

以前ご紹介したSass編集用 GUIツール、Koala について、 ここ最近頻繁にアップデートを促すメッセージが表示されるようになったため、更新をしてみました。しかし、その結果、最新版 2.2.0 バージョンでエラーが続出することに。「一体どうなっているのか?…

Webクリエイター向け求人充実の今がチャンス!Web業界に転職しよう

私がWeb制作科に通っていた2014年頃、クラスの半分以上の生徒はWeb業界には就職しないという残念な状況がありました。その主な理由は、 そもそも有効求人があまり多くない ゆえに、スクール卒を採用する企業が少ない スクール卒求職者への採用条件が非常に厳…

※ 当サイトはアフィリエイト広告を利用しています