ホームページ、Web作成
備忘録として。PHPの多次元連想配列のソート。 「My 野鳥図鑑」の野鳥の並びを五十音順にした。 以下、PHPソースの抜粋（説明のため、実際よりはシンプルにしてある）。野鳥データは適時順番を考えずに多次元連想配列に。 $birds[] = array( '名前' => 'ルリ…
↑の続き。 「Mapbox GL JS」を使って、簡単なWebマップを作ってみた。 「Yahoo! JavaScriptマップAPI」や「Google Maps JavaScript API」に比べて、簡単な事をするだけならシンプルで使いやすい。地図そのものは、慣れの問題かもしれないが、Googleマップに…
「Yahoo! JavaScriptマップAPI」が、2020年10月31日にサービス提供を終了する。 代替サービスとして「Mapbox」が紹介されているので、「Mapbox GL JS」を使ってみた。 以下、参考ドキュメント。 ≪Tutorials | Help | Mapbox≫ https://docs.mapbox.com/help/t…
「Yahoo! JavaScriptマップAPI」が、2020年10月31日にサービス提供を終了するらしい。 この案内によれば、以下のサービスが終了するらしい。かなり痛い。 Yahoo! JavaScriptマップAPI Yahoo!スタティックマップAPI Yahoo! iOSマップSDK Yahoo! Androidマップ…
たまたま見つけたWebサイト「ふりがな文庫」がおもしろい。 トップページには、以下のような欄がある。 いま見られている語句（漢字） いま見られている語句（よみ） 夏の季語（たぶん、シーズンで変わる） 四字熟語 植物の漢字 鳥類の漢字 哺乳類の漢字 昆…
はてなブログで、強調したいハイライト文字列に蛍光マーカーペンっぽい色付きのアンダーラインをつける方法。 【サンプル】 強調したいハイライト文字列 はてなブログで使える文字の装飾には、太字/ボールド、斜体/イタリック、アンダーラインがある。 HTML…
先日、Pinterestにボード「My フォト」を作成した。 今回、Pinterestにボード「My Photo 自然」を作成。 自然、風景の写真を登録。
Pinterestにボード「My フォト」を作成。 このブログにアップロードした写真の一部を登録した。
先ほど、CSSでインスタグラム風の写真加工が簡単にできる「instagram.css」を試した。 以前に作成した「影付き枠＋ビネット効果付き写真ルバム」 に、「instagram.css」のフィルタ効果「aden」を追加したバージョンを作成。 URLの「&fil=フィルタ名」を変え…
CSSでインスタグラム風の写真加工が簡単にできる「instagram.css」を試してみた。レトロっぽい写真などが簡単にできる。 「instagram.css」は、以下からダウンロードできる。 使い方は簡単。「instagram.css」を以下のようにリンクして、 <link rel="stylesheet" href="instagram.min.css"> <img>を<div>で囲んで、class</div></link>…
Googleが、2020年10月にすべての混合コンテンツをブロックというニュースがある。 はてなブログのHTMLソースを確認すると、以下のようなhttp:～が含まれている。 <html ... itemtype="http://schema.org/Article" ...>...<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">...<link rel="author" href="http://www.hatena.ne.jp/../"> これらは…</link></head></html>
Windowsアプリ「GIMP」、「ImageMagick」等を使って写真補正や写真加工をいくつか試してきた。 備忘録としてブログ記事一覧を作成。ノウハウという程ではないが、タイトルは「ノウハウ記事一覧」。
自分で撮影した写真で「My 野鳥図鑑」を作成。 ≪（旧）My 野鳥図鑑 ≫ CSSを使って、写真に影付き枠とビネット効果を付けている。 （※ その後、ポップアップ画像表示方式を変更し、ビネット効果は廃止した。上記リンクは、旧バージョンのもの。新バージョンは…
はてなブログで、リンクを挿入する場合、ブログカード形式の埋め込みができる。 ブログカードは、記事のタイトル、URL、概要、アイキャッチ（サムネイル）画像を簡潔にまとめて表示する埋め込み形式。ブログカードのサンプルが以下。 OGP（Open Graph Protoc…
HTML、CSSで縦書き表示するWebページを作成。任意の文章に、以下のようなCSSを指定したHTMLページを生成する。 <style>-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;</style> ↓↓↓ 「テキスト縦書き表示（ＰＤＦ印刷用）」Webペー…
以前作成した英会話学習サイトに英語音声読み上げ機能を付けていたが、その機能が使えなくなったので、「Web Speech API Speech Synthesis」を使ってみた。 Web Speech APIは、ブラウザのネイティブAPIで、大半のブラウザで利用できる。使い方はすごく簡単で…
JavaScriptライブラリ「Unite Gallery」を使って、HTMLフォトギャラリー＆スライドショーを作成。 フォトギャラリー用のJavaScriptライブラリでは「Fotorama」「lightgallery.js」も良さそうだったが、 「Unite Gallery」が一番使いやすそうだった。「Unite …
以前、HTMLで写真サムネイルアルバム＋ポップアップ画像ページを作成した。下はその時のブログ記事。 作成したサムネイルアルバムWebページは、以下。 https://ok2nd.sakura.ne.jp/album/kobe1-v.html このWebページのサムネイル画像をクリックすると、ポッ…
2つの写真/画像を横に並べて比較したい時がある。似たような写真でどちらが良いかを確認したい時など。 画像を横に並べて比較できるツールはあるが、似たような写真がたくさんある場合、比較相手をとっかえひっかえしながら比べたい場合に使いやすいツールが…
開いているWebページのタイトルとURLをクリップボードにコピーするブックマークレット。備忘録として。 最初参考にしたのは以下のページ。 【JavaScript】 <p>タグを使ったこの方法だと、文字にフォントサイズの属性が付いた形でクリップボードにコピーされる。</p>…
昨日、GIMPで同じ画像（写真）を継ぎ目なくきれいに壁紙状に並べるのを試した。 ここで作成した画像をHTMLで壁紙として並べる方法。 単純に同じ画像を背景一杯に並べるのは簡単。 <body background="photo/240.jpg"> → 背景画像壁紙 サンプル 背景画像を透過風に白っぽくするのは少し面倒。 <body>に</body></body>…
先日、はてなブログのHTMLサイトマップ（はてなブログ記事一覧）を生成するスクリプト(JScript)を作成した。 これは、Googleクローラーに読み込んでもらうのが目的だったが、今回は人間が利用するための「はてなブログ記事一覧」HTMLの生成スクリプト(JScrip…
先日、「Google Search Console」で、はてなブログのサイトマップ（「sitemap.xml」、「sitemap.xml?page=???」）を登録したが、いくつかが「取得できませんでした」のエラー状態のまま進展がない。 そこで、はてなブログのHTMLサイトマップを作ってみる。 ※…
先日、「Google Search Console」でサイトマップ登録をやってみた。 今回、「Bing - Web マスター ツール」で、サイトマップ登録をやってみる。 「Bing - Web マスター ツール」のサイトにアクセスする。 サインインの画面が表示されるが、なんとGoogleアカ…
Webページ「晴歩雨描 デジカメ・スナップ写真 ブログ記事一覧」 に、JavaScriptでテーブル行の検索機能を追加。 jQueryプラグイン「DataTables」を使用。 【注意事項】 １．<thead></thead>、<tbody></tbody>がないと正常動作しない。 ２．<table>に、width:100%を指定しないと、ブラウザウインド</table>…
最近、はてなブログの記事がGoogle検索になかなか反映されない。Googleにインデックスされていない気がする。 「Google Search Console」を使えば、インデックス登録が出来そうなので、やってみた。 まず、「Google Search Console」に登録する。 【Google S…
Webページで写真/画像を横並びにする方法として、以前は display: inline-block; display: table-cell; float: left; などを使っていた。どれもあまり使いやすいとは言えなかった。 CSS3から新しいレイアウトモジュールとして、flexbox display: flex; が追…
以前に、PC用検索ポータル「2nd Sch」 の機能の一部として公開した週間天気予報。 全国の任意の都道府県の週間天気予報を設定して一覧で見られる。週間天気予報のデータは「livedoor天気情報」のRSSフィードを使っている。 ※「livedoor 天気」は、2020年7月3…
先ほど「はてなブログを記事一覧で見る方法」という記事を書いたが、 毎回URLに「/archive」を付けるのが面倒な場合、マウスのワンクリックで切り替えができるようにする方法。 ブックマークレットという機能を使う。ブックマークレットとはブックマークバー…
無料の「はてなブログ」をパソコンで見ると記事一覧ではなく、本文がそのまま数日分表示される。記事本文の量が多いと過去分にどんな記事があるのか確認するのが大変。 こういったブログを記事一覧で見る方法。といっても簡単。 そのブログのトップページのU…
