今回も IFTTT を使います (ง⁎˃ ᵕ ˂ )ง⁾⁾ ifttt.com 設定が終わるまで、およそ 10分 の作業になります。 ゆっくりやるなら 15分ぐらい をみてください (◍•ᗜ•́)✧ 説明は PC を想定していますが、アプリもあります。 IFTTT - Android (Google Play) IFTTT - iPh…

いちにち、おつかれさまです。 今日は、AMP 配信 されたページに Adsense を載せる方法を紹介します。 はまりどころが とても多い です !!!!=͟͟͞͞(๑ò◊ó ﾉ)ﾉ 対象 はてなブログ で AMP 配信 を検討されている方 結論 はてなブログで AMP 配信 されたときに、 …

おつかれさまです ₍๐•ᴗ•๐₎ 今回は Accelerated Mobile Pages 、通称 AMP についてです。 概要のあと、はてなブログ で AMP 配信をするための 設定方法 を紹介します。 AMP とは ざっくりでは、モバイルでのウェブサイト閲覧を高速化できます。 Google が中心…

InstagramとTwitterを連携させる方法 今回は IFTTT を使います (ง⁎˃ ᵕ ˂ )ง⁾⁾ ifttt.com 設定が終わるまで、およそ 10分 の作業になります。 ゆっくりやるなら 15分ぐらい をみてください (◍•ᗜ•́)✧ 説明は PC を想定していますが、アプリもあります。 IFTTT …

おつかれさまです。 今回はブログでよく使う、「画像」に関するツールの紹介です (◍•ڡ•◍) PEKO-STEP Cool Text Draw.io PEKO-STEP いろんなツールがありますが、とくに画像の加工が手軽にできます。 www.peko-step.com Windowsのペイントでは届かないところ…

はてなブログでは、サイドバーで簡単に別の記事への導線を作れます。 ですが、私のサイトでは、サイドバーはあまり使われていないようでした。 ( ˃ ˄ ˂̥̥ ) やること 注目記事 を フッタ に 表示します。 なぜ？ 読者の多くは、いま開いている記事を読みたく…

Instagram とは かんたんには、写真や動画を撮影、加工して、共有できるSNSです。 公式はこちらです。 www.instagram.com ブログに表示したい これはいくつかの プラグイン や サービス があります。 その中でも、今回は手軽さを重要視して、こちらを使いま…

404 Not found とは ざっくりな説明だと、ページが見つからないときのエラーのことです。 詳しくはこちらです。 HTTP 404 - Wikipedia はてなブログでは、エラーが起きた時の専用ページが用意されています。 記事が見つからないときにメッセージが表示されま…

前回、グロナビを作りました。 記事はこちら。 h-s-hige.hateblo.jp 今回は、グロナビをつけてみたい人のための紹介です。 手順 HTMLを貼りつけます HTMLをカスタマイズします CSSを貼りつけます CSSをカスタマイズします 項目ごとに説明します。 念のため、…

グローバルナビゲーションとは 基本的にすべての画面に表示されます。 サイト内を移動するのに、利用頻度の高いリンクがまとめられています。 ざっくりは、そんなメニューのことのようです。 詳しくはこちら。 グローバルナビゲーションとは何？ Weblio辞書 …

おはようございます。 今日はたくさんのテキストドキュメントを１つに結合して、 まとめてしまう方法を紹介します。 テキストドキュメント は 拡張子が txt のファイルです。 ファイルが 2つ や 3つ のときは困りませんが、 ファイルが 100 や 1,000 になる…

おつかれさまです。 記事の前に、まずは にゃんこ成分 を充電します ( ˙꒳​˙ ) いい寝顔で疲れが癒されるぅ(๑˃̵ᴗ˂̵๑) 前回の記事はこちら h-s-hige.hateblo.jp canvasでは、画像やアニメーションが魅力的です。 ○や□といった図形や、文字もかけますが、 ぱっ…

おつかれさまです。 記事の前に、まずは にゃんこ成分 を充電します ( ˙꒳​˙ ) すこし大人っぽく写ったかな? canvas とは canvas要素 は、JavaScript で画像や図形を描画できる HTML要素 です。 例えば、動画やカメラ映像を取り込んで加工したり、ゲームを作…

先日、愛猫や愛犬との雇用契約書 を作れるページを作りました。 今日は、使わせていただいたものの紹介 と 困ったこと についてです。 はてなブログ上で作ろうとして、たくさん躓きました… まずは、記事の前に、にゃんこ 成分をチャージしてください (｡･-･｡)…

【Visual Studio Code】お手軽に C# を始める方法 ちょっとだけ C# を動かしました。 そのとき Visual Studio がなかったので、VSCで動かせないか調べたので、記録します。 まずは、にゃんこ 成分を補給します。 シアンの299 ٩(•ᴗ• ٩) Visual Studio Code を…

【環境構築】Vue.js で SPA をはじめる方法 tags: node Vue Bable Webpack 【Vue.js で SPA をはじめる方法】目次 このドキュメントが対応しているバージョン Vue CLI: V3.5.5 対象 Vue でシングルページアプリケーション(SPA)を作りたい方 node のインスト…

【Visual Studio Code】Markdown PDF のスタイル(CSS)を変える方法 ... のまえに、チョコさん。 パソコンの話はむつかしい ので、さきににゃんこ |ω･)و ̑̑༉ Visual Studio Code は、 Markdown を扱えます。 Markdown Markdown は 見た目キレイに変換できる …

【解決】ポートフォワードしたけど、しばらくしたら動かなくなった。 今回は Windows10 で Docker環境を構築していました。 使ったのは Docker Toolbox です。 docs.docker.com Docker Toolbox Docker Toolbox では、 Kitematic、Git、VirtualBoxなど、必要…

HatenaBlog にアップロードした写真を小さくする はてなブログでは、記事に写真を貼ることができます。 ただ、とても大きく表示されて、困ることがあります。 スマートフォンではキレイなのに、パソコンでは写真が超巨大…↷( ó╻ò) イメージに近い形で写真を載…

【Node】 axios(HTTPクライアント) で REST API を使う方法 tags: node react vue angular はじめに 最近は、Vue, React, Angular などのJavaScriptフレームワークでフロントエンドの開発をするときに、 REST API を使うことが多くありました。 そこで、 nod…

【Node】 json-server で REST API のモックサーバを ささっと作る tags: node mock はじめに 最近は、Vue, React, Angular などのJavaScriptフレームワークでフロントエンドの開発をするときに、 REST API を使うことが多くありました。 そこで、モックサー…

【React】 React でルーティングをするには tags: node react はじめに ルーティング以外の環境構築はこちらです。 h-s-hige.hateblo.jp react-router をインストール npm install --save react-router-dom react-routerのgithubはこちらです。 github.com …

【React】 React で QRコードを読み取る tags: node react はじめに QRコードの読み取り以外の環境構築はこちら。 h-s-hige.hateblo.jp react-qr-reader をインストール npm install --save react-qr-reader react-qr-readerのgithubはこちらです。 github.c…

投稿する写真に飾り枠をつけたい！ 投稿する写真に飾り枠をつけたくなりました。 投稿する写真は加工しない あれこれ準備をしたくない はてぶのプレビューでも確認できる 枠の画像は、つくりません。 （というより、デザインのセンスがないので、つくれませ…

【React】 React を始める前に tags: react flux このドキュメントは、これからReactを始める方が、 短い時間で React と flux について、キーワードを知るためのものです。 React は公式のチュートリアルが充実しています。 そのため、学ぶにはチュートリア…

せっかちな人のための Reactを始める方法 tags: node react create-react-app https://github.com/facebook/create-react-app create-react-app をインストール npm install -g create-react-app プロジェクトを作成 npm init react-app ${プロジェクト名} …

Reactを始める方法 tags: node react babel webpack 【Reactを始める方法】第7回 実装編 - HelloWorld 連載の記事 【Reactを始める方法】目次 【Reactを始める方法】第1回 準備 【Reactを始める方法】第2回 インストール編 - Webpack 【Reactを始める方法】…

Reactを始める方法 tags: node react babel webpack 【Reactを始める方法】第6回 設定編 - Babel 連載の記事 【Reactを始める方法】目次 【Reactを始める方法】第1回 準備 【Reactを始める方法】第2回 インストール編 - Webpack 【Reactを始める方法】第3回 …

Reactを始める方法 tags: node react babel webpack 【Reactを始める方法】第5回 設定編 - Webpack 連載の記事 【Reactを始める方法】目次 【Reactを始める方法】第1回 準備 【Reactを始める方法】第2回 インストール編 - Webpack 【Reactを始める方法】第3…

Reactを始める方法 tags: node react babel webpack 【Reactを始める方法】第4回 インストール編 - React 連載の記事 【Reactを始める方法】目次 【Reactを始める方法】第1回 準備 【Reactを始める方法】第2回 インストール編 - Webpack 【Reactを始める方法…