My Web道

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

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

階層型グローバルメニュー設置 本はてなブログに階層型グローバルメニューを設置してみました。 実装にあたりましては、こちらのゆきひーさんのブログ記事を参考にさせていただきました。 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 = …

実はなかなか使える、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業界には就職しないという残念な状況がありました。その主な理由は、 そもそも有効求人があまり多くない ゆえに、スクール卒を採用する企業が少ない スクール卒求職者への採用条件が非常に厳…

WordPressを手動で任意のバージョンにアップグレードする方法

たまに、WordPressを最新版ではなく「この特定のバージョンにしたい」ってことがあります。 あるいは、環境によっては自動アップデートでは更新できない場合とか。実際私も今日そんな場面に遭遇し、手動アップデートを実行することになりました。ということ…

タブメニュー(2) (jQueryとCSSで実装する超シンプルタブを作ってみました)

下記記事を参考にさせていただき、超シンプルタブメニューをページに実装してみました。【参考記事】 超シンプルなjQueryタブメニューの実装方法 - クルマ好きの幸福論 : https://hayakawayuki.com/4518 超シンプルなjQueryタブメニューの実装方法 - ハヤカ…

コーディング不要!簡単操作でプロ並みBootstrapサイトが作成できる「Mobirise」

ドラッグ & ドロップと簡単設定だけでBootstrapサイトが作成できる「Mobirise」 公式サイト Free Website Builder Software : https://mobirise.com mobirise.com Bootstrapのここ最近のテーマをチェックしていたところ、偶然こちらのツールを発見。なんだか…

同一ページ 別タブ内アンカーリンクへの移動実現方法

同一ページ内の異なるタブ内アンカーリンクに移動するには 通常、アンカーリンク(同一ページ内)への移動は、以下の方法(アンカーリンク先要素に付けたID名をhrefに設定するだけ)で可能です。 <li><a href="#ID名">リンクテキスト</a></li> しかし、アンカーリンク先が他のタブ内だったりす…

リファラ (REFERRER) 制御方法を確認しました

リファラ (REFERRER) 制御方法を確認しました こちらについてご説明する前に、「リファラって何?」という方のために、以下ご説明いたします。 リファラ (REFERRER) とは? どこから現在のページに来ているか、ユーザーのアクセス元を示す情報のことです。 ※…

CSSで実装する タブ機能

[jQuery不要] ラジオボタン + CSSで出来る タブ機能 以下記事を参考に、Webページにタブ機能を設置してみました。【参考記事】 qiita.com上記にてご紹介いただいたコードで、 おかげさまで思った通りのタブができました。と喜んだのも束の間、一つ問題が発覚…

おススメ Div要素 丸ごと スライド可能なスライダー 「Swiper」

jQuery不要の高機能スライダー 「Swiper」を実装してみました 今日は、ページ内の要素丸ごとスライド可能な高機能スライダー、「Swiper」をご紹介いたします。Swiperのダウンロードはこちらから可能です。 Swiperの使用に至ったキッカケ 見出しやボタン等の…

【WordPress】超簡単 記事内に吹き出し会話を挿入してみました

こんな感じで、WordPresの記事に吹き出し会話を作成してみました。 WordPress記事での吹き出し会話 以前から度々見かけて実装してみたいと思っていた吹き出し形式のコンテンツ。 調べてみると、専用プラグインとして、以下「Speech bubble (ふきだしプラグイ…

チュートリアル動画作成に使えるか!? Windows 10 意外な標準機能

意外なWindows 10標準機能 Xboxアプリでデスクトップ動画作成 Xboxアプリとは? MicrosoftのXboxと言えば、やはりゲーム、 日頃ゲームをされる方はきっとご存知のはず。 本来の目的は、Windows10上で、Xboxゲームを楽しむための機能。 ゲームの様子を録画す…

【WordPress】WordPressサイトアドレスを間違って設定してしまった場合の対応 

WordPressサイトアドレスを間違って設定してしまった場合の対応 今日は、WordPressでサイトアドレスが間違って設定されてしまったという問題が発生した場合の対応方法について確認してみました。 実際今回身近で起きた問題 httpサイトのサイトアドレス設定で…