出来上がったサンプルを見ながら、ド素人の方でも自動でスタイルシートを作れるツールなど、ブログでありながらWEBサービス的なものも配信しています。他ブログに特化したスタイルシートのテクニックを紹介しています。
～jQueryで開閉式メニューを作る方法～ 今回はjavascriptのライブラリであるJQueryを使って開閉式メニューを作る方法を詳しく説明していきたいと思います。 レベル1 headタグの中にjQueryを使うためのURLを入れる まずjQueryを使うためにはあるURLを入力しないといけません。 はてなブログでは設定→詳細設定をクリックして下の方にある<head>要素にメタデータを追加という所に次のように入力します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scri…
初心者のjavascript～開閉式メニューに挑戦～ 今回はjavascriptで開閉式メニューを作っていきたいと思います。初心者なので逆にめちゃめちゃく詳しいです。 レベル1 親メニューボタンと子メニューボタンの準備 自作の見出しのスタイルシートを自動で作成できるツール https://purechan22.hatenablog.com/entry/2022/11/17/155515 があるので今回もそれを使っていきたいと思います。 親メニューで一つのCSS、子メニューで一つのCSSにしていきたいと考えてます。 HTML 親CSS 子CSS <p class="menu" id="oya">…
初心者のjavascript～thisの大実験～ javascriptのthisって難しいですよね！そこで今回はjavascriptのthisを使って色々実験しようと思います 実験1 そのままthisをアラート画面に出力してみる javascript HTML <script> function mythis1(){ alert(this); } </script> <button onclick="mythis1()">実行結果を見る</button> 実行結果を見る 結果は [object Window] と出ました。 windowのオブジェクトが入ってるんですね。 実験2 何か変数を定義…
CSSのシャープ（#)idとドット(.)クラスの全て 今回はCSSのシャープ(#)とドット(.)について詳しく説明していきます。 レベル1 #について #はCSSではクラスではなくてidの時に使います。 次の例で見て下さい。 HTML CSS <div id="testid1">テスト</div> #testid1{ font-size:20px; } 実際は次のように表示されます。 テスト とにかくクラスはドット(.)、idはシャープ(#)と覚えておくといいです。 レベル2 idのもう一つの書き方 通常は<div id="testid2">内容</div>のように記述しますが <input …
～タブで画面を切り替える方法上級編～ 前回のタブで画面を切り替える方法初級編では最低限の機能しかつけていませんでしたが、今回はそこに装飾を加えていって より実践で使える形にしていきます。 前回の記事はこちら↓↓になります。 ～タブで画面を切り替える方法初級編～ - ★うつ病の一人暮らし★外で働かないで生きていく レベル1 前回の初級編のスタイルシートと記事中の記述 ・スタイルシート <style> .tabwaku{ border:2px solid aquamarine; width:150px; height:50px; margin: 0 auto; padding:10px; back…
～タブで画面を切り替える方法初級編～ 今回はタブで画面を切り替える方法を説明していきます。 また一つずつ丁寧にどこよりも詳しく説明していきたいと思います。 他のサイトを見てドーーーンとコードが出てきて圧迫された方にもおすすめです。 今回は初級編なので最低限の機能だけです。 レベル1 ラジオボタンを作成する まずはラジオボタンを作成していきます。 今回はメニュー、写真、レシピと画面が切り替わるようにしていきます。 ラジオボタンなのでtype="radio"を使います。 またidとnameには好きな名前を入れておきます。ただしnameは全て同じ名前にします。 <input id="menu" ty…
自動でスライドショーが誰でも作れるツールが完成しました。是非ご利用下さいませ。
～スライドショー自動作成ツール～ 今回はスライドショーが簡単に作れる自動ツールを作っていきます。 何もわからない人でも簡単にブログにスライドショーが設置できます。 写真のURL、タイトルを入力するだけで後は全部自動となっています。 自動ツール第一弾と第二弾 今回は自動ツール第三弾です。 第一弾と第二弾は下からご利用できます。出来上がったサンプルを見ながら自在にスタイルシートが作れます。 purechan22.hatenablog.com purechan22.hatenablog.com 写真のURL、タイトルを入力する スタート写真がスライドショー開始画面の写真となります。 スタート写真 ス…
javascriptとCSSアニメーションを融合させてのスライドショー 提供:カップめんリスペクト
～javascriptとCSSアニメーションの融合～ 今回はより実践で使えるスライドショーを作っていきたいと思います。 CSSアニメーションとjavascriptをコラボさせてスライドショーを作っていきたいと思います。 レベル1 CSS(スタイルシート)の準備 スライドショーが始まった後のCSSを用意します。 これは私の↓↓↓の記事を参考にしてください。 画像を横にスライドさせるアニメーションを使います。 purechan22.hatenablog.com CSSはこんな感じになります。 1回ずつ写真を入れ替えるのでanimation-iteration-countを1、また常に順方向にするの…
CSSで画像を横にスライドさせる方法 提供：カップめんリスペクト
～CSSで画像を横にスライド～ 今回はCSS(スタイルシート)アニメーションを使って画像を横にスライドさせていきます。 後にjavascriptと組み合わせて完全なスライドショーを作るための布石となります。 どこよりも詳しく書いていくので初心者でもすぐにわかります。 レベル1 アニメーションの基本のスタイルシート まずは最低これだけはっていう基本の型があるので作っていきます。 animation-name:"アニメーションの名前";でアニメーションに名前を付け animation-duration:"時間（秒数など)s";で一回のアニメーションにかかる時間の設定をし animation-tim…
javascriptでスライドショーを作る方法をどこよりも詳しく説明してます
～javascriptでスライドショー～ 今回はjavascriptでスライドショーを作っていきます。 よく企業のページとかでも写真がシャッシャッシャッと変わっているのありますよね。 そういうのを作っていきたいと思います。 相変わらずめちゃめちゃ詳しく書いていきます。 レベル1 スライドショーをはじめる画面の写真の準備 実際には次のように記述します。 <img src="画像のURL" id=startpic"> レベル2 スライドショーの写真の準備 まずは写真の準備です。好きなまんが日本昔話から取ってこようと思います。 > ここは写真のURLだけ準備すれば大丈夫です。まだ掲載する必要はありま…
javascriptでsetIntervalの大実験 めちゃめちゃ詳しいです
～javascriptでsetIntervalの大実験～ いきなりボンってでるより一文字また数文字ずつ流れるように出てきたらおしゃれですよね！ ってことで今回はなめらかに文字を表示できるようにしていきたいと思います。 今回はsetIntervalの大実験です。たぶんどこよりも詳しく書いています。 レベル1 メニューを開くボタンの作成 メニューを開く 実際の記述はこんな感じです。 <div class="javawaku" id="menu">メニューを開く</div> クリックしてみて下さい。実際にプログラムが動きます レベル2 ボタンを押した後に出る枠の作成 メニューを開くをクリックした後に…
javascript～cloneNodeの大実験～めちゃめちゃわかりやすいです。ベビーブームの到来です笑
～初心者のcloneNode大実験～ clone...クローンっていうだけあって同じものを複製できるとかできないとか・・ よくわからないけどやっていきましょう！ 今日はjavascript～cloneNodeの大実験です。 果たしてプログラムはちゃんと動くのでしょうか？ 前回のtoggleではスタイルシートのクラスは替えれたけど文字を変えるのに苦労しました。 レベル1 クローン（複製）化する予定の箱を作る。 箱 できました！ 実際の記述はこんな感じです <div class="javawaku" id=hako" >箱</div> レベル2 id=hakoの要素を取る var hako =do…
javascriptのtoggle(戸愚呂）大実験～めちゃわかりやすいです
～初心者のtoggle(戸愚呂）大実験～ この見出しとかは全部→自分で作った自動ツール←(みなさんもクリック)で作っています。 毎回のこのサービスの提供でお送りしていきます。笑 枠のスタイルシート自動作成ツールもあります。 今日はjavascriptのtoggleの大実験をしていきたいと思います。 噂によると何かをつけたり外したりできるとかできないとか・・・ 果たして今日もプログラムはちゃんと動くのでしょうか？ レベル1 これをクリックしたら何かが起きるボタンを作る またまた自作の枠のスタイルーシート自動作成ツールの出番です。 少々お待ちください。 ここクリック!? できました！ 実際の記述は…
初心者のjavascript配列大実験のコーナー～めちゃめちゃわかりやすいです
～初心者のjavascript配列大実験～ →早速自分で作った自動ツール←みなさんもクリックで見出しを作りました。 やっぱりすごい便利です。笑 今日はjavaの配列を大実験していきたいと思います。 果たしてプログラムはちゃんと動くのでしょうか？笑 初心者なのでかなりわかりやすいと思います。難しい言葉を使えないので笑 divで囲んでspanクラスをたくさん作る <div id="tabemono"><span class="jikken1" javaclass="osushi1">お寿司</span><span class="jikken1" javaclass="yainiku1">焼肉</s…
初めての雑記に挑戦してみた お題「今からプログラミング言語を学習するなら何を学ぶ？」
お題「今からプログラミング言語を学習するなら何を学ぶ？」 今日ははじめて雑記というものをしてみる。 そこではてなブロガーからのお題に答えてみました！ 私はjavascriptをはじめて1週間なんだけど 今日は開閉式ボタンを作っていてJquery"ってのがめちゃくちゃ便利なことに気付いたので断然jqueryを学びたいです。 今日はお昼から初めはjavascriptだけで開閉式ボタンを作っていたのですが それはもう大変なこと大変なこと。。。 えらい苦労した上に途中で挫折して ふとjqueryってのが出てきて調べてみると コードがなんと・・5行くらいでした。笑 今までの苦労は何だったのっていう感じで…
例えばレシピを開いたり閉じたりできるような開閉式ボタン作りたい
例えばこんなシーンで…↓↓↓料理の記事で…料理の写真をいくつも並べて レシピだけ閉じたり開いたりできるようなボタンあったら便利だと思いませんか？それも自動で作れるツールを作成してみたい。これはうまくできるかわからないからあまり期待しないで笑今月のアクセス数の目標が300でしたが 早くも266になりました。 ありがとうございます🌸とりあえずは毎月100ずつアクセスが増えていってくれればいいです。
見出しのスタイルシートを自動で作成できるツールが完成しました
・出来上がったサンプルを見ながら自在に見出しのスタイルシートが作れます。 ・CSSやHTMLタグのわからない方でもそのまま記事に張り付けてすぐ書くことができます。 ・2022年11月17日サービススタート。不具合を修正しつつさらに機能を増やしていきます。 枠のスタイルシート自動作成ツールはこちらです。 文字の中央寄せする？ しない する 見出し枠自体の中央寄せする？ しない する 枠の幅を指定する（指定がない方はそのままでOK) 指定しない 50px 100px 150px 200px 250px 300px 350px 400px 450px 500px 550px 600px 行高の指定（…
今日から見出しのスタイルシートを自動で作成できるツールを作ります。
枠のスタイルシート自動作成ツールに続き 今日から見出しのスタイルシートを自動で作成できるツールを作ります。あらゆるパターンの見出しを作れるようにしていきます 2日~3日で完成予定なので今のうちに読者登録 枠の自動作成ツールにブックマークお願いします。笑 purechan22.hatenablog.com
枠のスタイルシートが自動で作成できます 11月15日バックアップ版
2022年11月15日バックアップバージョン HTMLタグやスタイルシートが全くわからない方でも使えるようになりました！ コピペ機能を実装 完成には近づいてきてますがまだ機能を増やしていきたいと思います。 こんな機能を増やしてほしいというのがあればコメントを頂ければと思います。 ソフトより機能は劣るけどソフトの1000倍わかりやすいを目指して精進していきます。 2つ以上のパターンを作る場合は半角英数字で好きな名前を入力 例 waku2： 枠のサイズを指定する（指定がない方はそのままでOK) 幅 指定しない 50px 100px 150px 200px 250px 300px 350px 400…
自動スタイルシート作成ツール第二段 蛍光線を自在にあやつれるツールはじめちゃいます。
第一弾がかなり好調だったので第二段自動ツール作成はじめちゃいます。 蛍光マーカー線のスタイルシートが、出来上がったサンプルを見ながら 自動で作成できるツールとなる予定です。 この調子で自動ツールをどんどん作っていきますので、宜しくお願いします。 ↓第一弾はこちら↓ ・めちゃくちゃ便利！ ・枠のスタイルシートが自在に作れてコピペ機能も搭載！ ・HTMLタグやスタイルシートが全くわからない人でも作れます。 ・できあがったサンプルを見ながら作れます。 ・色も系統別に分かれてて100種類ほどから選べます。 purechan22.hatenablog.com
枠のスタイルシートを自動で作成できるよ！ 便利すぎて笑う HTML,CSS復習24
2022年11月14日仮の仮サービススタート笑 更新内容 HTMLタグやスタイルシートが全くわからない方でも使えるようになりました！ コピペ機能を実装、そのままHTML編集に張り付けて記事がかけるようになりました。そのまま張り付けるだけ！ほかのブログやホームページにも使えます。 2022年11月15日 更新内容 ・記事の一部だけ蛍光マーカーが引けるようになりました。マーカーの色、文字のサイズ、マーカーの線の太さを指定できます。・サンプル表示に不具合が出ていた問題を修正しました。・枠(BOX)にシャドウ（影）がつけれるようになりました。・枠のサイズが設定できるようになりました。 完成には近づいて…
はてなブログにコピーボタンを実装する方法を難しい言葉を使わずに説明してみた HTML,CSS復習22
この記事でわかること 誰でもブログにコピーボタンを実装できてそのコードの意味も全部わかります。またテキストエリアの装飾方法もわかります。プログラム？javascript？なにそれ？おいしいの？状態でも大丈夫です。コピペ用のスタイルシート、スクリプトはページの最後にあります。 こんにちは。 ブログ(はてなブログ)にコピーボタンを実装しようとして他のサイトを見てみたら 難しい言葉が並んでる... javascript...何それ？おいしいの？ コピペして使おうと思っても作動しない！ そんな感じで無理って思って諦めたことはありませんか？ 実ははてなブログではサポートしていない機能があるので ややこし…
画像を回転させるアニメーションの方法 HTML,CSS復習21
この記事でわかること 画像を回転させる方法がわかる みなさん、こんにちは。 今回は画像を回転させる方法です。 料理などの写真が回転していたらびっくりさせれますよね笑 今回はそれをしていきます。 まずアニメーションの基本は以下の記事も参考にして下さい。 ブログで文字をジャンプ,揺らして注目させる方法 HTML,CSS復習20 - ★うつ病の一人暮らし★外で働かないで生きていく 画像を回転させるには 画像を回転させるにはrotateを使いますが まずはアニメーションの基本のスタイルシートです。 img.rotate{animation-name:kaiten1; /*アニメーションの名前の設定*/…
nth-childについてわかりやすく説明してみた HTML,CSS復習20
この記事でわかること nth-childを使って行数によって設定を変える方法が絶対わかる みなさん、こんにちは。 今回は難しい言葉を使わずにnth-childを説明していきます。 行数によって色々設定を変えるには nth-child(); を使います。 簡単に言うと nth-child(1)で一番目 nth-child(2)で二番目 nth-child(3)で三番目ということです。 それだけのことです。 例えば p.nth-child(1);{text-align:center;} ならpタグの一番目が中央寄せになります。 また奇数、偶数行でわけることもできます。 奇数行の場合はnth-chi…
ブログで文字をジャンプ,揺らして注目させる方法 HTML,CSS復習19
この記事でわかること ブログで文字を動かす方法がわかる みなさんこんにちは。 ブログで文字が動いてるってほぼほぼ見ないですよね。 そこで今回は文字を動かしてみたいと思います。 んっなんじゃこりゃぁ！と思わせてブログを読ませてみましょう。 ブログで文字を動かすには まずブログで文字を動かすには animation-name:"好きな名前"; を使います。 今回は名前をugoki1にします。 animation-name:ugoki1; ・一回のアニメーションの往復時間を指定します 往復時間指定は animation-duration:"時間"s; を使います。 今回は1秒にしてみます。 anim…
ブログを教科書風にしておしゃれにする方法 HTML,CSS復習18
p.clear{ float;clear; } この記事でわかること 画像にテキストを回りこませる方法がわかる みなさんこんにちは。 画像と文字を縦並びに配置するよりも..教科書風にしてスタイリッシュにブログを書いてみませんか？ ということで今回は画像にテキストを回りこませる方法を紹介していきます。なかなかここまで凝っているブログはみないのでおしゃれですよ🌸 画像にテキストを回りこませるには 画像にテキストを回りこませるには"float"というのを使うんです。 なんのことかよくわからないと思うので実際にやってみましょう。 ・左に画像を置きたい場合 スタイルシート img.left{ float…
<pre> 行間を狭めて入力したまま表示される<br>タグを使わないいい方法 HTML,CSS復習17
この記事でわかること 行間を狭めて入力したまま表示される方法がわかる こんにちは、今日はHTML,CSS復習の16回目となりました。 みなさんブログを書いていると勝手にpタグやdivタグが量産されて、行間が空きまくるってことないですか？ 今回はそのお悩み一気に解決できるpreタグについて紹介していきます。 <pre>タグの便利な使い方 <pre>タグを使うと入力したままそのまま表示されるのですごい便利なんです。 改行や空白もそのまま表示できて<br>タグを使わないでいいです。 またそれにより行間を狭めることができます。 ただしそのままpreタグを使うと背景が黒くなって枠も勝手についてしまうので…
この記事でわかること 簡単な表の作り方がわかる 今日は早くもHMTL,CSS復習の16回目となりました。塵も積もれば山となるですね。 簡単な表を作っていきたいと思います。 簡単な表の作り方 まずtableタグで全体を囲います 次のように表の最初と最後に使います <table> </table> 次に一行目を作っていきます。 表の一行目は項目ですよね。 表の項目はthタグを使います。また一行一行はtrタグで区切ります。 thタグの背景は薄い青色で文字は太くしてみます。 スタイルシートには次のように記述します。 th.koumoku{background-color:lightcyan; /*背景…
この記事でわかること 商人放浪記の美女、家来、どれから取ればいいかわかる 幸運大賞の美女 家来ってどれから取るか悩む うんうん、いっぱいいるからね どれから取ればいいの？ 美女の駅使→家来の怪盗、厳先生の順番で取ればいいのよ 美女・家来の取り方の順番 まずは美女の駅使→厳先生、怪盗を取りましょう。 なぜなら・・・ ・駅使のご縁家来が怪盗、厳先生 ・怪盗、厳先生も幸運大賞で手に入る からです。 次に行商の相手の体力がすごくてつらくなってくるので、家来の売上を上げるために残りの家来を取っていきます。 家来も全部取り終えたら、次は美女の”雪山の少女"を取りましょう。 これはご縁家来が、開印状を20個…
自分のブログ内を検索してもらえるようにしてみた HMTL,CSS復習⑮
この記事でわかること Myブログ内に検索窓を設置する方法がわかる ブログってホームページと違って過去のページがすごく探しにくいよね そうだよね、そこがブログのデメリットだよね そのデメリットをなくす方法はあるの？ 実はあるんです。検索窓を設置すれば過去の記事から読者が知りたい情報を探してもらえるの 検索窓を作るには まず編集モードを見たままモードからMarkdownモードなどに変えてください ↑これが一番重要です。 次に検索フォームを作ります。 form action="自分のブログのURL"を入れます。 <form action="http://hatena.blog.ne.jp/purec…
「ブログリーダー」を活用して、かなこさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
![FLUX.1 Kontext [dev]を使ってみた](https://img.blogmura.com/sites/718692/post-images/72680042.webp/crop/120x120)
