にしし/西村文宏✅ @nishishi@pawoo.net

うちの個人サイトで配布中の、お手軽マイクロブログ的メモ蓄積フリーCGI「てがろぐ」Ver 2.3.0 を公開。
nishishi.com/cgi/tegalog/

てがろぐCGIを同一ドメイン下に複数個設置しても個別にログイン状態を維持できる機能、画像も装飾できる仕様、画像で任意のURLへリンクできる書き方、RSSフィードのカスタマイズ機能を追加しました。

うちの個人サイトで配布中の、お手軽マイクロブログ的メモ蓄積フリーCGI「てがろぐ」Ver 2.2.4 を公開しました。➡nishishi.com/cgi/tegalog/

既存ハッシュタグの簡単再入力機能、Lightbox用属性のカスタマイズ機能、LazyLoad属性の追加機能、投稿単独ページでの移動リンクや見出しの設定機能などを追加しています。あと、ご報告頂いた不具合の修正なども。

All Aboutでの記事『CSSで幅や高さ等の指定に計算式が書けるcalcの使い方』 allabout.co.jp/gm/gc/466094/ を少し改稿しました。
CSSでの幅や高さなどの指定時に「 (100% - 5em) / 3 」のような計算式が書けるcalc()の書き方を解説しています。

CSSソース内で、プロパティの値に計算式が書けるとなかなか便利です。プラグイン等は不要。CSS標準の仕様です。

うちの個人サイトで配布中の、お手軽マイクロブログ的メモ蓄積フリーCGI「てがろぐ」Ver 2.2.0 を公開。前のバージョンから3ヶ月ぶり。ようやく配布に漕ぎ着けました。
nishishi.com/cgi/tegalog/

「続きを読む」ボタンの挿入機能、投稿画像のデフォルト挿入位置の指定機能、色の16進数での指定機能、前後の投稿への移動リンクを出力する機能あたりが最大の更新点。

そのほか、要望を頂いた機能を諸々を追加したり、仕様を改善したり、不具合を修正したり。

「Twitterっぽいスキン」も人気スキンだったんだけど、本家Twitter側がUIを大きく変えてしまったので、「昔のTwitterっぽいスキン」と改名した方が良いかな……。(^_^;;;

All Aboutでの記事『丸囲み数字などの環境依存文字を使う方法』 allabout.co.jp/gm/gc/23869/ を少し改稿しました。
機種依存や環境依存と呼ばれている「❿⑮⓴㉕」のような記号を表示する方法を解説しています。

HTMLファイルの文字コードにUTF-8が広く使われている今、もはや環境依存などを気にする必要はなさそうですが。何らかの事情で今でも文字コードにSHIFT-JIS等を使っている場合でも、数値文字参照という書き方を使えばこれらの文字や記号も表示できますよ、という話です。

All Aboutでの記事『HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法』 allabout.co.jp/gm/gc/385187/ を少し改稿しました。
HTMLのaudio要素を使って、Webページ上で音楽を再生したり効果音を鳴らしたりする方法を解説しています。

ブラウザ内蔵プレーヤーを表示させて音楽を流す方法にも使えますし、JavaScriptで音を鳴らすタイミングを制御する方法にも使えます。

All Aboutでの記事『CSSでIMEの状態を制御するime-modeの使い方+代替方法』 allabout.co.jp/gm/gc/23804/ を少し改稿しました。
Web上の入力フォームでIMEのON/OFF/無効を指定する方法を解説しています。

とはいえ、ime-modeプロパティはIEの独自拡張であって、もはやIEとFirefoxでしか使えません。最新版のEdgeでは動作しなくなっています。なので、IMEモードを直接制御せずに済ませる代替方法も紹介しています。

All Aboutでの記事『レスポンシブな2カラムレイアウトを作るCSSの書き方』 allabout.co.jp/gm/gc/463388/ を少し改稿しました。
レスポンシブWebデザインを使って2段組の構造を作成する方法を解説しています。

メインカラムとサイドバーの2段について、「HTMLの記述順」と「ページ上の配置順」の組み合わせで4通りの書き方を紹介。

All Aboutでの記事『1文字ずつ文字色を変える、文字単位でのCSS適用方法』 allabout.co.jp/gm/gc/437937/ を少し改稿しました。
HTMLに書いた文字をCSSで装飾する際に、1文字ずつ異なる文字色で表示されるよう指定する方法を解説しています。

適用できるのは文字色に限らないので、文字サイズでも背景色でも何でも1文字単位で装飾できます。

All Aboutでの記事『一定スクロールで出る「トップに戻る」ボタンの作り方』 allabout.co.jp/gm/gc/444816/ を少し改稿しました。
Webページが指定距離だけスクロールされた際に「トップに戻る」ボタンを動的に表示する方法を解説しています。

HTML+CSSで固定表示されるボタンを作って、JavaScript(jQuery)でスクロール量を判断して、ボタンの表示/非表示を動的に切り替えます。

All Aboutでの記事『HTMLの表示/非表示を切り替える2つの方法』 allabout.co.jp/gm/gc/23973/ を少し改稿しました。
JavaScriptを使って、HTML内にある特定の要素の表示/非表示を切り替えるには、displayプロパティの値を変更する方法と、visibilityプロパティの値を変更する方法の2つがあります。両者の違いを解説しています。

All Aboutでの記事『文字列をアーチ状(扇形)や円形に並べて配置する方法』 allabout.co.jp/gm/gc/438418/ を少し改稿しました。
ウェブページ上の文字列をアーチ状(扇形)にカーブさせて表示したり、円形に配置して表示したりする方法を解説した記事です。

テキストを画像化することなく自由な半径でアーチ状に配置できます。

All Aboutでの記事『1回クリックすると無効になるボタンの作り方』 allabout.co.jp/gm/gc/23959/ を少し改稿しました。
1回クリックされると無効化され、2回以上はクリックできないボタンの作り方を解説した記事です。

HTMLのinput要素等で作成したボタンに対して、JavaScriptでdisabledプロパティをON/OFFすれば、ボタンの有効/無効状態を切り替えられますよという簡単な話です。

All Aboutでの記事『引用記号として使える引用符や括弧をHTMLに書く方法』 allabout.co.jp/gm/gc/23986/ を全面改稿しました。
Web上で使える引用符の書き方を解説した記事です。“引用符„って直接キー入力できる「 ' 」とか「 " 」以外にもそこそこ種類がありまして、〝フォント〟によっても‟見栄え”が異なります。UTF-8などのUnicodeで文書を作成する場合は、Web以外でも表示できます。

All Aboutでの記事『HTMLで画像を隙間なくぴったりくっつける方法』 allabout.co.jp/gm/gc/23769/ を全面改稿しました(初版公開は17年前、2002年の記事!)
横や縦に並べた画像と画像の間に余計な空白ができてしまう場合の簡単な対処方法を紹介しています。

HTMLソースの書き方を工夫したり、CSSでスタイルを追加したりすれば、余白を消して画像と画像をぴったりくっつけられます。

All Aboutでの記事『メディアクエリで画面サイズ別にCSSを切り替える方法』 allabout.co.jp/gm/gc/396404/ を少し改稿しました。
画面サイズなどの閲覧環境に応じて適用スタイルを切り替える、HTMLやCSSでのメディアクエリの書き方を解説した記事です。

モバイル専用スタイル・PC向けスタイルなどを作成しておいて、簡単に切り替えられます。

All Aboutでの記事『Basic認証(基本認証)でアクセス制限をかける方法』 allabout.co.jp/gm/gc/23780/ を少し改稿しました。
ウェブサイト内の特定ページやディレクトリに、IDとパスワードを使ったアクセス制限を施すBasic認証の設定方法を解説した記事です。

HTMLの修正は不要で、.htaccessファイル等を書いて設置するだけで設定できます。

All Aboutでの記事『ファビコン(favicon)の簡単な作り方と設置方法』 allabout.co.jp/gm/gc/390854/ を少し改稿しました。
ブラウザのタブやブックマークなどに表示されるWebサイト独自のアイコン「ファビコン」の作り方を解説した記事です。

元絵を読み込んで、複数サイズのアイコン画像を結合したfavicon.icoファイルをブラウザ上で簡単に作れる「x-icon editor」の使い方も紹介。

All Aboutでの記事『.htaccessファイルの書き方と設定・設置方法』 allabout.co.jp/gm/gc/23962/ を少し改稿しました。
ウェブサーバ上で、アクセス制限や、ユーザ認証、リダイレクト、デフォルトファイル名の変更などを設定したい際に使うファイル .htaccess の書き方を紹介した記事です。

作成方法や、設定例や、設定の影響範囲などを説明しています。

All Aboutでの記事『ウインドウ幅に合わせて画像サイズを変化させる方法』 allabout.co.jp/gm/gc/400630/ を少し改稿しました。
デバイスの画面幅に合わせて(画像の縦横比を維持したまま)画像を拡大縮小させたい場合の簡単な書き方を説明しています。

img要素で表示した1枚の画像サイズを自動調整させる方法や、HTMLのsrcset属性やCSSの@media規則の記述で解像度別に画像を切り替える方法も紹介しています。