晴歩雨描

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

ホームページ、Web作成

HTML、jQuery)HTMLフォトギャラリー&スライドショー(Unite Gallery版)

JavaScriptライブラリ「Unite Gallery」を使って、HTMLフォトギャラリー&スライドショーを作成。 フォトギャラリー用のJavaScriptライブラリでは「Fotorama」「lightgallery.js」も良さそうだったが、 「Unite Gallery」が一番使いやすそうだった。「Unite …

JavaScript、jQuery、CSS)ポップアップ写真画像をブラウザのウインドウサイズに合わせて拡大縮小できるようにした。

以前、HTMLで写真サムネイルアルバム+ポップアップ画像ページを作成した。下はその時のブログ記事。 作成したサムネイルアルバムWebページは、以下。 https://ok2nd.sakura.ne.jp/album/kobe1-v.html このWebページのサムネイル画像をクリックすると、ポッ…

HTML+JavaScript)パソコンローカルの2つの写真/画像をドラッグ&ドロップして横並びに表示して比較するツール

2つの写真/画像を横に並べて比較したい時がある。似たような写真でどちらが良いかを確認したい時など。 画像を横に並べて比較できるツールはあるが、似たような写真がたくさんある場合、比較相手をとっかえひっかえしながら比べたい場合に使いやすいツールが…

開いているWebページのタイトルとURLをクリップボードにコピーするブックマークレット(+ダイアログ版)

開いているWebページのタイトルとURLをクリップボードにコピーするブックマークレット。備忘録として。 最初参考にしたのは以下のページ。 【JavaScript】 <p>タグを使ったこの方法だと、文字にフォントサイズの属性が付いた形でクリップボードにコピーされる。</p>…

HTML、CSSで背景画像を並べる&透過風に白っぽくする。

昨日、GIMPで同じ画像(写真)を継ぎ目なくきれいに壁紙状に並べるのを試した。 ここで作成した画像をHTMLで壁紙として並べる方法。 単純に同じ画像を背景一杯に並べるのは簡単。 <body background="photo/240.jpg"> → 背景画像壁紙 サンプル 背景画像を透過風に白っぽくするのは少し面倒。 <body>に</body></body>…

検索機能付き「はてなブログ記事一覧」HTML生成スクリプト(JScript)を作成。

先日、はてなブログのHTMLサイトマップ(はてなブログ記事一覧)を生成するスクリプト(JScript)を作成した。 これは、Googleクローラーに読み込んでもらうのが目的だったが、今回は人間が利用するための「はてなブログ記事一覧」HTMLの生成スクリプト(JScrip…

「Google Search Console」のサイトマップ登録の進展がないので、はてなブログのHTMLサイトマップを生成するスクリプト(JScript)を作成した。

先日、「Google Search Console」で、はてなブログのサイトマップ(「sitemap.xml」、「sitemap.xml?page=???」)を登録したが、いくつかが「取得できませんでした」のエラー状態のまま進展がない。 そこで、はてなブログのHTMLサイトマップを作ってみる。 ※…

「Google Search Console」に続き「Bing - Web マスター ツール」で、サイトマップ登録をやってみる。

先日、「Google Search Console」でサイトマップ登録をやってみた。 今回、「Bing - Web マスター ツール」で、サイトマップ登録をやってみる。 「Bing - Web マスター ツール」のサイトにアクセスする。 サインインの画面が表示されるが、なんとGoogleアカ…

「晴歩雨描 デジカメ・スナップ写真 ブログ記事一覧」にjQueryプラグイン「DataTables」で検索機能追加。

Webページ「晴歩雨描 デジカメ・スナップ写真 ブログ記事一覧」 に、JavaScriptでテーブル行の検索機能を追加。 jQueryプラグイン「DataTables」を使用。 【注意事項】 1.<thead></thead>、<tbody></tbody>がないと正常動作しない。 2.<table>に、width:100%を指定しないと、ブラウザウインド</table>…

はてなブログの記事がGoogle検索になかなか反映されない。「Google Search Console」でインデックス登録とサイトマップ登録をやってみる。

最近、はてなブログの記事がGoogle検索になかなか反映されない。Googleにインデックスされていない気がする。 「Google Search Console」を使えば、インデックス登録が出来そうなので、やってみた。 まず、「Google Search Console」に登録する。 【Google S…

CSSのflexbox(display:flex;)で、写真/画像を横並びにする。inline-blockやfloat:leftは使わない。+ <div>の横幅一杯に画像を並べてリサイザブル(レスポンシブ)にする。

Webページで写真/画像を横並びにする方法として、以前は display: inline-block; display: table-cell; float: left; などを使っていた。どれもあまり使いやすいとは言えなかった。 CSS3から新しいレイアウトモジュールとして、flexbox display: flex; が追…

全国の任意の都道府県の「週間天気予報」を一覧で見る。

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

はてなブログを記事一覧に簡単に切り替える方法。ブックマークレットを使う。

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

はてなブログを記事一覧で見る方法。

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

「日本のさくら名所100選マップ」をGoogleマップのマイプレイスで作成。

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

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は簡単。例えばグレースケールにしたければ、<img>にgrayscaleフィルタを指定するだけで良い。 -webkit-filter…