以前に、PC用検索ポータル「2nd Sch」 の機能の一部として公開した週間天気予報。 全国の任意の都道府県の週間天気予報を設定して一覧で見られる。週間天気予報のデータは「livedoor天気情報」のRSSフィードを使っている。 ※「livedoor 天気」は、2020年7月3…

先ほど「はてなブログを記事一覧で見る方法」という記事を書いたが、 毎回URLに「/archive」を付けるのが面倒な場合、マウスのワンクリックで切り替えができるようにする方法。 ブックマークレットという機能を使う。ブックマークレットとはブックマークバー…

無料の「はてなブログ」をパソコンで見ると記事一覧ではなく、本文がそのまま数日分表示される。記事本文の量が多いと過去分にどんな記事があるのか確認するのが大変。 こういったブログを記事一覧で見る方法。といっても簡単。 そのブログのトップページのU…

以前、「日本のさくら名所100選マップ」を「Google Maps API」を使って作成したが、APIキーなしでは使えなくなったので、Googleマップのマイマップで作成し直した。 作成手順は、以下を参照。 ↓ 使えなくなっているGoogle Maps API版「日本のさくら名所100選…

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

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

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

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

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

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

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

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

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

↑ で、写真に枠(フレーム)を付けた。 この写真に、さらにビネット効果を付ける。ビネット効果については、以下リンク先を参照。 ビネット効果を付ける<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で写真にシンプルな枠(フレーム)を付ける。 枠に淡い影を付ける。 <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は以下。 下の「coliss」の紹介記事で知った。 【オリジナル写真】 【鉛筆画】 <div class="pencil-effect"> <img src="img/xxx.jpg"> </div> <style> .pencil-effect { background-image: url(img/xxx.jpg); background-size:…

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

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

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

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

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

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

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

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

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

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

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

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

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