はてなブログのコメント欄にHTMLタグを「コードとして」書く場合

どうも！LSSです！！ はてなブログのコメント欄は（全てではないと思いますが）HTMLタグを書く事ができます。 例えば、 <img src="画像ファイルのURL"/> のように書くと画像を挿入できたり。 ところが、ですね。 タグが有効である、という事は逆に言えば「こういうタグを使うんですよ」って伝えたい場合にもタグが有効になってしまい、「コードとして」書くのに困難を生じます。 今回はそんな場合の解決策を2つ、書いてみます。 解決策 その1「全角で書く」 解決策 その2「HTMLエンコード」 解決策 その2を手軽にする方法 解決策 その1「全角で書く」 HTMLタグは「<」と「>」で囲んで記述…

【日記】新スマホきました！

どうも！LSSです！！ 今回も日記です。 昨日の記事 【日記】桜とパフェと - Little Strange Software にも書いていましたが、新たに購入したスマホが到着しました！ 「Xperia XZ2 Premium」という機種。 Xperia（エクスペリア） XZ2 Premium au SOV38 仕様 Xperia（エクスペリア）公式サイト ↑ではOSがAndroid8となっていますが、10が入っています。 今のスマホの手持ちが、Android2台iPhone1台となっているので、Android2台を1台にまとめるべく購入しました。 何も問題なく使用できるようなら良いの…

【日記】桜とパフェと

どうも！LSSです！！ 今日も日記です。 桜、満開！ 格安パフェ！ 他、最近の出来事として… 桜、満開！ 一日あけたらもうこんなに！ pic.twitter.com/tHqH7naDAh— LSS (@LSS0324) 2022年3月27日 こんもり、という感じ🌸 pic.twitter.com/OW5NxVwA8o— LSS (@LSS0324) 2022年3月29日 満開になるまではまだ間があるかな、と思っていましたが…もうこれはほとんど「満開」と言っていいのでは？というぐらいに凄い勢いで咲き誇っています^^ まだ開いていない蕾もあるにはありますが…全体の1％ぐらいかな？もっと少ないかもっ…

フリーランス・デビュー

どうも！LSSです！！ 長く勤めた職場に退職届を提出し、4/5付で退職の有給休暇消化期間中です。 次の仕事どうするかな…さほど貯えがあるでもなし、とりあえず失業保険もらって食いつなげるうちに就職活動なりバイトなり探すか？と思っていたのですが…。 フリーランスになる事になりました 長所・短所 一年先んじてフリーランスになった先輩ブロガーさん フリーランスになる事になりました フリーランス…個人事業主…他人事でなくなってきた感。やってやれない事はない精神でいきますか。まだ決まってないけども🤣— LSS (@LSS0324) 2022年3月23日 ありがたい事に、ある企業様から一年限定のオファーをい…

【CSS】縦スライダー【この方法に気づかなかった…】

どうも！LSSです！！ これまで、コード生成ツール カテゴリーなどでよく「スライダー」を使ってきました。 ↑こういうやつ。 で、たびたび思っていたんですが…「縦のスライダーって出来ないのかな」と。 例えば「横位置」「縦位置」をスライダーで調整可能にする、といった場面で、横位置はいいとしても縦位置は「縦スライダー」であったほうが直感的に分かりやすいですよね。 ところが、数あるinput部品の中にもその「縦スライダー」が無い。 という事で諦めていたのですが…実に単純な方法で解決できました！ 縦スライダー（下から上に） コード 縦スライダー（上から下に） コード transform:rotateで回…

【CSS】桜の花、開く季節に…【枠装飾】

どうも！LSSです！！ 最近、桜のつぼみが開くのを待ちながら撮影散歩していました。 ようやく神戸でもソメイヨシノが開き始めたところで、春っぽいCSSネタを考えてみました！ サンプル コード CSSセレクタについて 文字に対する指定 サンプル .hnbr{ border-radius:10px; padding:10px; border:6px groove #ffcccc; background-image: radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00) ,repeating-conic-gradient(from 40deg at 90…

【日記】サクラサク

どうも！LSSです！！ 退職前の有給消化中で、なるべく歩いておこう、というところから今年は桜が咲く前から散歩がてらチェックしています。 【日記】やっぱり気が早い桜日記【Twitterより】 つぼみもだいぶ膨らんできてもうすぐかな？と思わせつつ、そこからなかなか開かないw という状態でしたが… 3月25日の桜 違う種類の桜はもう… 蕾→開花→満開→桜吹雪というサイクル 3月25日の桜 ちらほらと☺️🌸💮🌸💮🌸 pic.twitter.com/e808RwPGkh— LSS (@LSS0324) 2022年3月25日 ついに、ぽつぽつと開いた桜が出てきました！ こうなると、ここから満開になるのはす…

【駄文】素敵な16進数

どうも！LSSです！！ 今回は16進数についてのお話。ついでにその素敵な一面についての記事となります^^ 普段、人が扱う数は十進数 それに対し、16進数は… 16進数の素敵な一面 普段、人が扱う数は十進数 little-strange.hatenablog.com 以前にも書いた事がありますが、普段使っている数は十進数。 10の後ろに0をつけた100は10の10倍。 もうひとつつけた1000は100の10倍。 9の次は繰り上がりが生じて10になる、そんな数ですね。 それに対し、16進数は… 16でやっと繰り上がります。 じゃあ9の次は？というと、aが使われ、次はb、c、d、e、fまでいって、そ…

【WebAudioAPI】おもちゃの楽器風・水滴鍵盤

どうも！LSSです！！ 【CSS】水滴・改変【小ネタ続編】 の記事に、 あとか(id:c089818) ちょっと訪問できなかった間に、楽しいことができてますねー！色とりどりのコーナーは押すと、それぞれから音が鳴りそうで、試しに音量を上げちゃいました😅 とのコメントをいただきました。 なるほど、子ども向けのおもちゃの楽器にありそうな感じですね^^ そして、WebAudioAPIを使えば、JavaScriptによってWebページ上で音を鳴らす事ができます。 というわけで作ってみちゃいました！ 水滴鍵盤 ※クリックすると音が鳴ります 一応、コード 実は、楽器は作ってみたかった 8音で何が演奏できる？…

にほんブログ村、かなり久々に設定を変えてみた話。

どうも！LSSです！！ 今朝、ちょいとこのブログの設定を触ってみました。 …このブログの、というか主に「にほんブログ村の」なんですが。 まず記事下に表示されたりされなかったりした（？）バナーを消し、サイドバーの一番下にバナーを置いてみました。 あと、カテゴリがずっと「Androidアプリ開発」だったのを、「HTML5/CSS」 90%「JavaScript」 10%「Androidアプリ開発」 10% としてみたり。 これまでは、はてなブログの「アクセス解析」画面でもブログ村は全く現れなかったのですが、これで少しは顔を出したりするのか？どうなんでしょねw かつてブロ友に、にほんブログ村をガチっ…

【CSS】透過ボタン

透明感のある、ぷにぷにしたボタン

【日記】やっぱり気が早い桜日記【Twitterより】

どうも！LSSです！！ 【日記】桜、ってどうなってる？ - Little Strange Software 【日記】本日の桜と丸亀製麺 - Little Strange Software と、桜を追っていましたが、その続きです。 有給消化中の身なもので、下手すると全く出歩く事がなくなるので散歩を兼ねて撮りに行き、その足で三宮まで歩いていったりする今日この頃です。 3月17日 3月19日 3月20日 3月17日 今日の蕾 pic.twitter.com/llASdx8qbK— LSS (@LSS0324) 2022年3月17日 3月19日 寸前、って感じかなぁ pic.twitter.com/5…

【CSS】水滴・改変【小ネタ続編】

どうも！LSSです！！ 【CSS】水滴【小ネタ】 - Little Strange Software のコメント欄に様々なアイデアをいただき、ありがとうございます^^ コメント欄で回答させていただいた分もありますが、他にもそれぞれコード修正を行って調整してみたので、記事にしてみました。 以下、コード中でそれぞれクラス名を変えていたり、divタグの中の文言を削ったりしていますが、それ以外の変更点を色付き文字にしています。 画像入り 色とりどり ななほしてんとう 他にもいただいたアイデア 画像入り .pichonimg{ width:150px; height:100px; background:…

【CSS】水滴【小ネタ】

どうも！LSSです！！ 今日はCSS小ネタです。 水滴 コード CSSで水滴を描いてみました 水滴 .pichon{ width:150px; height:100px; background:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000020,#00000000); border-radius:50%/70% 70% 30% 30%; box-shadow:-2px 3px 2px 0px #00000040; display:flex; align-item…

【ツール】CSS3Dアニメーションお試しツール【学習入門用】

どうも！LSSです！！ CSSの3D表現とkeyframesによるアニメーション。組み合わせると色々面白い動きを作る事ができます^^ が、関連するプロパティが多く、またそれぞれを「どうすれば どうなるか」が分かりにくいところもあり、これから学ぼう、あるいは自分で考えた動きをさせてみようとされる方に「高いハードル」となっているのではないでしょうか。 そこで、微力ながら「手軽に設定変更でき、その設定がどう動きに反映されるのかを即時に見られるツール」を作成してみました。 CSS3Dアニメーションお試しツール 使い方 選択項目について あとがき CSS3Dアニメーションお試しツール #ctr{ hei…

【日記】本日の桜と丸亀製麺

どうも！LSSです！！ 一昨日、 【日記】桜、ってどうなってる？ - Little Strange Software で桜のつぼみの写真を上げましたが、それから2日たった今日、どうなってるか見てきました（気が早いw） あと、そのままの勢いで生田川を南下し、三宮にとことこ歩いていきました。 ちょっといい運動^^ 本日の桜（つぼみ） 三宮に丸亀製麺って3店舗あったんですね 本日の桜（つぼみ） 一昨日より寄って撮影しているのもあるかもですが…より膨らんでるような気がしますね。 三宮に丸亀製麺って3店舗あったんですね 普段、三宮の丸亀製麺に行く時には、センタープラザ地下の店舗に行っていたんですが、アプ…

こよみモード、今まで知らなかった仕様…

どうも！LSSです！！ はてなブログに「こよみモード」という機能があります。 面白いのは、1年以上続けていると「1年前の同じ日」に書いた記事があると、右側に「〇月のあゆみ」として表示してくれるんですね。 …というのは知っていたのですが、今日初めて知った事がありました！ ↑これが、こよみモードの画面。 月カレンダーとして今月書いた記事が並んでおり、前月や次月に移動するリンクが上部にあります。 ここで、前月に移動するリンクをクリックします。 ↑すると、もちろん前月（今なら2022年2月）の月カレンダーになるのですが…。 この時、右側に出ている「〇月のあゆみ」が「2月15日」のものになっています！ …

【日記】桜、ってどうなってる？

どうも！LSSです！！ 普段、それほど花を愛でる事もないのですが、それでも『桜』は気になります。 最近、有給消化期間が続き、体を動かす事が減ったのでちょこちょこ散歩に出かけたりしていますが、その途中で桜の木がどうなってるか見てきました。 桜 このブログを「桜」で記事検索してみる まぁいくらなんでも 桜 新神戸駅から流れている生田川。 南北に流れるその川沿いは桜の植えられた公園がずーっと続いているのですが、その途中に「橋の手すりにもうくっついちゃってるほどのところに枝がきている」桜がありました。 そこを通りかかったのでパシャリ。 ええ、まだ全然つぼみですが、ポジティブに捉えると「ふくらんできてい…

【CSS】ブランコ【小ネタ】

どうも！LSSです！！ 今回はまた、CSS小ネタです。 ブランコ コード あとがき ブランコ @keyframes swinga{ 0%{transform:rotateX(60deg);} 100%{transform:rotateX(-60deg);} } .swingwaku{ position:relative; float:left; width:100px; height:100px; transform-style:preserve-3d; perspective:300px; margin-left:20px; } .swing{ position:relative; widt…

【JavaScript】無限ガチャ【実験】

どうも！LSSです！！ 昨日の妄想記事、 【お題】わたしのコレクション をテーマにゲームを作ったら？【妄想】 に書いたうち、「7種類」「1/10でレア」「1/100でスーパーレア」という確率だけを実験してみるものを作ってみました。 …つまり、まだゲームでもなんでもないのですが、とりあえずその確率が実際に引いてみるとどの程度のものなのかを体感する実験です。 手持ち数の制限も設けていないので、無限に引けますw 無限ガチャ ネタ元 これにあとは… 無限ガチャ #gtbtn{ display:block; box-sizing:border-box; border-radius:10px; margi…

【お題】わたしのコレクション をテーマにゲームを作ったら？【妄想】

今週のお題「わたしのコレクション」 どうも！LSSです！！ コレクション、という事ですが、思えば昔は収集癖があったものの最近はめっきり…な自分だったりします。 それとは別に、「コレクション」という概念自体、ゲームになる要素があるな、とは昔から考えていました。 ポーカー、麻雀、ドンジャラなど、「コレクション」をゲームとしたと言えるのでは。 近年のスマホゲーでも、ガチャを回してキャラクターを集めるのも「コレクション要素」と言えそうです。ポケモンもそうかな？ そこで、今回は「簡易的なコレクションゲームを作るとしたら？」を妄想してみました。 仮の設定 ガチャ 合成でランクアップ 所持可能数制限 最終目…

【CSS】フラフープの動きを再現できるか挑戦してみました【実用性：？？？】

どうも！LSSです！！ 先日の記事、 little-strange.hatenablog.com を応用して使っていただいた記事の中で、 mio20100501.hatenablog.com コメント欄にて「最初は女の子がフラフープをまわす・・・をやろうと思ったのですが、フラフープが上手くいきませんでした。」と書いておられるのを見かけました。 フラフープ…だと奥行きを考慮する必要があり、輪が人を囲んで、人の後ろに隠れた部分の輪を見えないようにしながら動かす…という表現が必要になってきます。 それをCSSの3D表現でやってみたらどうなるかな？と思い、挑戦してみました！ フラフープ コード 人…？…

【つまづき】WebSQL、面白そうなんだけど…。

どうも！LSSです！！ 先日まで勤めていた職場で、「SQL」というデータベース言語（データベースから都合よくデータを取り出してきたりする言語）を触っていました。 もしかしたら、今後とも触る事になるかも？ならないかも？というところでもあります。 なかなか独特で面白い言語なのですが、これを自宅で手軽に練習しようと思うと、準備が結構手間どりそう（先にデータベースを構築しないと、みたいな）。 MicrosoftOfficeのうち、Accessを使うと割と手軽に試せたりもするのですが、買うかサブスクしなくちゃですしね^^;※一応、ノートPCには入ってる事は入ってます。 が、最近になって、ちょっと面白そう…

【日記】三宮まで歩いてみた

どうも！LSSです！！ 【日記】ICOCA定期券2枚持ち問題、解決（？）しました！←退職して解約した体験談 に電車の定期券を解約した話を書いていましたが、その後結局、市バスの定期券も解約しました。 窓口で払い戻しについて聞いてみたのですが、計算がややこしいらしくて、日数に応じて日割り計算（1日ごとに払い戻し金額が異なる）とそうでない部分（〇日～〇日はいくら）とあるようでしたが、聞きに行った日はその日割りの方だったようでその場で解約。 で、やはり出不精になってきたところで、気分転換の散歩も兼ねて歩いてみましたw 三宮（神戸の繁華街）まで出ると色々あるので退屈せずに歩けるのですが、そこまで歩くのが…

【CSS】ぐるぐる回転して目立たせる物体

どうも！LSSです！！ 今回はまたCSSサンプルです。 animationと3Dを使い、目立たせる効果を作ってみました^^ サンプル コード コード書き換えについて サンプル @keyframes grgra{ 0%,30%{transform:rotateX(-5deg) rotateY(360deg);} 100%{transform:rotateX(-5deg) rotateY(0deg);} } .grwk0{ position:relative; width:300px; text-align:center; border-radius:10px; border:10px doubl…

ディプロトドンティア・マクロプス

どうも！LSSです！！ 最近、「かなり前に買った本」を再読してみました。 ディプロトドンティア・マクロプス (講談社文庫) 作者:我孫子武丸 講談社 Amazon 作者の我孫子武丸氏はミステリ作家、そして「ディプロトドンティア・マクロプス」の主人公は探偵。 …なのですが、ミステリだと思いながら読むと、展開についていけなくなりそうw そんな作品です^^ いやー、やっぱ面白いw 同じ主人公が出てくる前日譚が、後日発表されており、 狩人は都を駆ける 作者:我孫子武丸 文藝春秋 Amazon こちらは普通にミステリ短編集ですね。 もちろん、こちらもミステリとして面白いのですが…ディプロトドンティア・マ…

【はてなブログ】最近突然、新機能

どうも！LSSです！！ 最近になって、はてなブログの「購読リスト」内に「あなたにおすすめ ベータ版」というのが出てくるようになりましたね。 あなたにおすすめ はてなブログ内での行動に応じて選出される あと気になる事を挙げるとすれば… あなたにおすすめ help.hatenablog.com 購読リストの中に、堂々と割り込むカタチで表示されています。 いくつかのブログ（今自分のとこにでてるのは4つ）が、その記事とともに表示されています。 自分の場合、そのうち同じブログを読んでるなどで知っているところは一か所。 あとはここで出てこないと知る事もなかったかな？というブログ。 はてなブログ内での行動に…

【折り紙】三つ首竜の折り方、画像つき手順解説！！【はさみ・のり不使用】

どうも！LSSです！！ 今回は、 思い出した折り紙【記事予告】 - Little Strange Software で、予告しておりました「三つ首竜の折り方解説」記事です！ ↑完成した三つ首竜と、元の紙の大きさの比較はこのようになります。 折り紙に興味を持ち始めたお子さん・お孫さんがおられる方には特に、この記事を見て制作に挑戦していただき、「折り紙でこんなのも作れるんだよ」と見せてあげて貰えると嬉しいです^^ 途中までは『鶴』と同じ さらに「開いてつぶす」 翼部分の作成 三本の首 しっぽを作ります 首の仕上げ 最後の仕上げ あとがき 途中までは『鶴』と同じ 早速、折り始めていきましょう！ と、…

思い出した折り紙【記事予告】

どうも！LSSです！！ 昔、20代前半の頃。 折り紙で「キングギドラ」の折り方を考えてみた事がありますw ハサミやノリを使わず、1枚の紙から折りだけで出来た！ …と思ったものでしたが、果たしてこれを「キングギドラ」と呼んで良いものかどうか、は常に疑問に思っていましたw …というのを最近思い出して、100均に行ったついでに折り紙を購入。 思い出して折れるか挑戦してみました！ だいたい思い出せたのに、最後が「ちょっと違う」感がでて、色々いじってると四つ首竜になりました🤣— LSS (@LSS0324) 2022年3月2日 切らずちぎらず貼らず、一枚の紙から折りだけで、というのが自慢です😊 pic.…

【CSS】菱餅の区切り線【ギリギリの時節ネタ】

どうも！LSSです！！ 今日は3/2。明日は ひなまつり ですね^^ それにちなんだ記事を用意されている方もおられるかと思いますが、このギリギリのタイミングで、ひなまつりネタのCSSです！ 菱餅の区切り線 コード ひなまつり要素のうちで、CSSネタにしやすいのは… 菱餅の区切り線 .hishimochi{ height:45px; background-image: conic-gradient(from 120deg at 50% 66%,#ff8888 120deg,#ff888800 120deg) ,conic-gradient(from 300deg at 50% 29%,#ff88…

【日記】ICOCA定期券2枚持ち問題、解決（？）しました！←退職して解約した体験談

どうも！LSSです！！ 【日記】ICOCA定期券2枚持ち、ついにやってしまった… ICOCAデビューその後 突然ICOCAデビューした話 などの記事で書いていましたが、「使用していた磁気定期券が廃止となり、不意にICOCAデビューしちゃった」事から始まる不便な点がありました。 追記：解決、と言っても毎日乗らなくなっただけの話です^^;が、ICOCA定期券の解約は？チャージしたお金は？などの分かりにくかった部分の体験談です^^ 解決！ 不明点について聞いてみました ICOCAにチャージしているお金についてはどうなりますか？ チャージされたお金を使い切った後、カードを返却すればデポジット分は返って…