晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

ホームページ、Web作成

Google Maps API)chart.apis.google.comが使えなくなったので、マーカーラベルにMarkerWithLabelを使った。

Google Maps APIを使った地図ページを自分用に運用している。(Google Maps APIを使ったWebアプリを使用するためには、APIキーが必須で、APIキー取得のためにはアカウントにクレジット情報の登録が必須になったので、現在はプライベートな自分用のWebページ…

無料レンタルサーバーが、相次いで「3か月ごとの契約更新手続きを義務化」

↑ 無料レンタルサーバー「StarServer Free」「XFREE」を利用しているが、3か月ごとに契約更新手続きが必要になってしまった。残念。 3か月ごとの契約更新は面倒なので、順次、さくらインターネットまたはGitHubのサーバーに移行する予定。 ★ お知らせ詳細 | …

CSSのブレンドモード"background-blend-mode"を使って、写真を2枚重ねたイメージの作成を試した。

先日、CSSのブレンドモード"background-blend-mode"を使って、写真にカラーフィルタをかけたような色の加工を試した。↓ 今回、CSSのブレンドモード"background-blend-mode"を使って、写真を2枚重ねたイメージの作成を試した。 重ね合わせの順番を変えること…

影付き枠+ビネット効果付き写真サムネイルアルバムの大阪版、京都版作成。

↑ で作成した写真サムネイルアルバム(神戸版)の大阪版と京都版を作成。

CSSのブレンドモード"background-blend-mode"を使うと写真にカラーフィルタをかけたような色の加工ができる。

CSSの"background-blend-mode"を使うと写真にカラーフィルタをかけたような色の加工ができる。 以下のWebページを参考にした。 使い方は、<div>で写真を入れるボックスを作成し、backgroundプロパティでオリジナル写真とカラーフィルタの色指定をして、background</div>…

影付き枠+ビネット効果付き写真サムネイルアルバムのポップアップ拡大画像にビネット効果。

↑ で、影付き枠+ビネット効果を使った写真のWebサムネイルアルバムに、ポップアップ拡大画像を追加した。 しかし、この方法では、ポップアップ拡大画像にビネット効果はつかない。 ビネット効果付きの拡大画像1枚を表示するHTMLページを別途用意し、サムネ…

影付き枠+ビネット効果付き写真サムネイルアルバムにポップアップ拡大画像を追加。

↑ で、影付き枠+ビネット効果を使った写真のWebサムネイルアルバムをつくった。 このWebページのサムネイル画像をクリックした時に画像が拡大されたモーダルウィンドウがポップアップするようにした。 以下のLightbox2を使用。 使い方は簡単。CSSとJavaScri…

備忘録:スマホでページ全体を縮小表示したい時は、viewportのinitial-scaleで縮小値を指定する。

↑ のWebページをスマホで単純に表示すると画面から少しはみ出てしまう。更に、スマホ画面でサムネイルを横に2つ並べたい。ということで、スマホで見るときに、ページ全体を縮小して表示したい。 ページの構成上、CSSのメディアクエリで実現するのは難しそう…

Google 日本語WEBフォント「さわらび明朝」を使ってみた。

↑ で作成したWebページで、Google 日本語WEBフォント「さわらび明朝」を使ってみた。 指定の仕方は以下。 <link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet"> <style> body { font-family: 'Sawarabi Mincho', Helvetica, Arial, sans-serif; } <style></style></link>

CSS)影付き枠+ビネット効果を使った写真のサムネイルアルバムをつくってみた。

↑ で、CSSを使って、写真に影付き枠とビネット効果を付けてみた。 今回、これを使って、写真のサムネイルアルバムをつくってみた。写真は神戸を散歩して撮ったものの一部を使った。 サムネイルの各写真の枠は正方形とし、正方形の中にビネット効果を付けた写…

CSS)写真に影付きのシンプルな枠+ビネット効果

↑ で、写真に枠(フレーム)を付けた。 この写真に、さらにビネット効果を付ける。ビネット効果については、以下リンク先を参照。 ビネット効果を付ける<div>を、枠を付ける<div>で囲む。 <div class="box-frame"> <div class="vignette"> <img src="img/xxx.jpg"> </div> </div> <style> img { margin: 0; padding: 0; display: block; /* これがないと余分な枠が</div></div>…

CSSで写真に影付きのシンプルな枠(フレーム)を付ける。

CSSで写真にシンプルな枠(フレーム)を付ける。 枠に淡い影を付ける。 <img class="box-frame" src="img/xxx.jpg"> <style> .box-frame { padding:7px; border:1px solid #ccc; background:#fff; box-shadow: 1px 1px 5px rgba(20,20,20,0.2); } </style> 角を少し丸くする。 <img class="box-frame" src="img/xxx.jpg"> <style> .box-frame { padding:7px; border:…

CSSで写真を鉛筆画、色鉛筆画、水彩画風にエフェクト

写真を鉛筆画、色鉛筆画、水彩画風にエフェクトをかけるCSSが見つかったので、試してみた。そのCSSは以下。 下の「coliss」の紹介記事で知った。 【オリジナル写真】 【鉛筆画】 <div class="pencil-effect"> <img src="img/xxx.jpg"> </div> <style> .pencil-effect { background-image: url(img/xxx.jpg); background-size:…

CSS「box-shadow」で、写真にビネット効果をつけてみた。

先日、WindowsアプリGIMPで写真にビネット効果を与える加工をやってみた。 ビネット効果とは、写真の四隅周辺の光量を落として、昔のレンズで撮ったような味わいの雰囲気にすること。写真中央部が相対的に明るくなり視線が中央に集まって強調される。 今回、…

CSS Filterを使えば、簡単に色調加工ができる。

CSS Filterを試してみた。 CSS Filterを使えば、写真そのものを加工しなくても、ブラウザ上で彩度、明度、コントラスト等色調を変えて表示できる。 CSSは簡単。例えばグレースケールにしたければ、下のようにgrayscaleフィルタを指定するだけで良い。 -webki…

はてなブログ)スマホ等でページ横からはみ出たテーブルを横スクロールできるようにする最も(?)簡単な方法。

はてなブログをスマホで閲覧する場合、テーブルが横にはみ出てしまうことがある。レスポンシブ対応含め一般的なデザインテーマでは横スクロールできない。 これを、横スクロールできるようにする最も(?)簡単な方法。 ネットでよく見られる方法は、<table>を<div>で囲</div></table>…

はてなブログのテーマをレスポンシブ対応のMinimalismに変更。

このブログのデザインテーマをレスポンシブ対応のMinimalismに変更。 変更にあたって行った作業の備忘録。 1.レスポンシブデザインにチェック デザイン ⇒ スマートフォン ⇒ 詳細設定 「レスポンシブデザイン」にチェックを入れる。 2.スマホも記事一覧の…

Google Maps API使用のため、Google Cloud Platformを試してみた。

2018年夏頃より、Google Maps APIを使ったWebアプリを使用するためには、APIキーが必須になり、APIキー取得のためにはアカウントにクレジット情報の登録が必須になった。 旅行先などで行きたい場所をマーキングしたオリジナルのGoogleマップを作成し、旅行先…

日本全国「桜名木マップ」をGoogleマップのマイプレイスで作成。

以前、「桜名木マップ」を「Google Maps API」を使って作成したが、APIキーなしでは使えなくなったので、「桜名木マップ」をGoogleマップのマイプレイスで作成し直した。 【作成手順:備忘録】 1.緯度経度や名前などの入ったCSVファイルまたはExcelファイ…

「日本三百名山マップ」をGoogleマップのマイプレイスで作成。

以前、「日本三百名山マップ」を「Google Maps API」を使って作成したが、APIキーなしでは使えなくなったので、「日本三百名山マップ」をGoogleマップのマイプレイスで作成し直した。 ↓ 「Google Maps API」版の三百名山マップ。

Google Calendar API v3の祝日表示が2019年の即位の礼を含む10連休に対応

先日作成したHTMLカレンダーで使っているGoogle Calendar API v3の祝日表示が、2019年の即位の礼を含む10連休に対応している。 ≪ミニカレンダー:2019年1月から1年分≫ https://ok2nd.sakura.ne.jp/index/sch/calendar/?y=2019

コンデジ画質比較 by Imaging Resource, TwentyTwenty

先日試した「画像比較ツールTwentyTwenty」を使って、主な箱型コンデジの画質を比較できるページを作成してみた。 画像は、「Imaging Resource」のものを借りている。 任意の2つの機種名をプルダウンで選択して、比較できる。 ≫≫≫ デジカメ画質比較 by Imagi…

画像比較ツール「TwentyTwenty」を試してみた。

画像比較JavaScriptツール「TwentyTwenty」を試してみた。 TwentyTwentyを使うと、2つの画像を重ねて表示して、中央のバーをスライダーで動かしながら画像比較できる。 画像は「Imaging Resource」の「G7 X Mark II」と「RX100 VI」の写真を借りている。 ≫≫≫…

Googleマップの詳細かつ広い範囲の地図を印刷する方法。

Googleマップで広い地域を印刷しようとすると、詳細部分が分からなくなる。 詳細な地域の情報を維持したまま広い範囲の地図を印刷する方法を考えた。 以前はGoogle Maps APIを使う方法もあったが、現在APIキーなしで無課金で使用することが難しくなっている…

任意のサイトの写真で宙玉(そらたま)写真が作れるサイトを作ってみた。

昨日、JavaScriptで宙玉(そらたま)写真を作れる「SORA-TAMA Transform (Fish-Eye)」を試してみた。 この機能を、写真のアップロードではなく、任意のサイトの写真のURLを直接指定して使えるものを作ってみた。 https://ok2nd.sakura.ne.jp/soratama/ 以下の…

JavaScriptで宙玉(そらたま)写真を作れる「SORA-TAMA Transform (Fish-Eye)」を試してみた。

先日、宙玉というものの存在を知った。 レンズの前に透明な玉を置いて写真を撮ると、独特の不思議な写真が撮れるというもの。詳しくは、以下を参照。 ラップフィルムなどを使って作る方法が紹介されているが、実際に自分で作るのは難しそうということで、探…

水滴や波紋を表現するJavaScriptスクリプトを試してみた。

暑い夏が続くので、涼しげな(?)水滴や波紋を表現するJavaScriptスクリプトを試してみた。 一つ目は、「rainyday.js」。 窓ガラスに雨の水滴が付いていくような効果を与える。以下のサンプルでは、キーボードの1~9を押すと水滴のイメージが少し変わるよう…

Webサイト作成:無料レンタルサーバー

実際に自分で使っているWebサイト作成のための無料レンタルサーバー一覧。 さくらインターネットは、無料ではないが月額515円で、PHP、MySQLが使えてSSLも無料で使えるし、日本国内では老舗の部類なので安心して使えている。 SSLが無料で使える通常の無料レ…

Yahoo! JavaScriptマップAPIで作成した地図サイトをGitHubのWebサーバーにコピー。

Yahoo! JavaScriptマップAPIで作成したサイトをGitHubのWebサーバーにコピーしてみた。正常動作している。 ≪2nd マップ (Yahoo)≫ https://ok2nd.sakura.ne.jp/y-map/ ↓↓↓↓↓≪2nd マップ (Yahoo):GitHubサーバー≫ https://ok2nd.github.io/ymap/index.html

HTTPSが無料で使えるWebサーバーとしてGitHubを使う。

HTTPSが無料で使える無料のWebレンタルサーバーを探したが見つからない。 Google Drive、Dropbox、Yahoo!ボックスなどをWebサーバーとして使う方法があったらしいが、いずれも現在は使えなくなっているらしい。 現在、使えそうなものとしてGitHubがある。と…