メインカテゴリーを選択しなおす
【JavaScript】カラフルなオリキャラをランダムに描画する
こんにちはです。あっちのそららです。前回、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラを描画しました。 acchinosorara.hatenablog.jp 今回はそのアレンジで、大量のオリキャラをランダムに描画するコードを書いてみました。「Result」で確認、右下の「Rerun」で再描画できます。描画はランダムなので、毎回違った結果になります。 See the Pen Fairy-rain by あっちのそらら (@acchinosoraranocode) on CodePen. JavaScriptで乱数を生成、かつ値が被らないようにし、下記内容をランダムに設定しています…
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションに検索機能を追加する(JavaScript・HTML・CSS対応)
スマホ版のグローバルナビゲーションに検索機能を追加してみました。以前「スマホ版のグローバルナビゲーションを設置する」対応をしています(以下リンク)。 今回はそれに検索機能を追加しました。miya-moto-blog.hatenablog.com元々ページの下の方に検索機能はあったのですが、スマホ版だとそこに辿り着くまで意外と遠いです。 今回の対応で、グローバルナビゲーションからいつでも検索できるようになりました。それではサクッと本題へ。
はてなブログカスタマイズの記事まとめ(その8)[CSS、HTML、JavaScript関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは8回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ(その1)[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ(その2)[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ(その3)[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ(その4)[CSS/HTML/JavaScript/はてなブログ関連] ブログカスタマイズの記事まとめ…
【はてなブログ-カスタマイズ】スマホ版で追従する目次を表示する(JavaScript・HTML・CSS対応)
スマホ版で目次を常に表示するように対応してみました。 スクロールの度に目次が追従するようにしています。以前「追従する目次をサイドバーに表示する」対応をしています(以下リンク)。 今回はそれをスマホ対応したような内容です。miya-moto-blog.hatenablog.com上記の対応(PCサイズ)だとサイドバーがあるため、そこに目次を表示するようにしました。 今回の対応(スマホサイズ)だとサイドバーがないため、別の方法で目次を表示するようにしています。今回はその辺りに関して詳しく書いていきます。
【CSSイラスト】発光するオリキャラのアニメーションを作ってみた
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラのアニメーションを作ってみました。「Result」で確認できます(レスポンシブ対応済)。 See the Pen Shine-Fairy by あっちのそらら (@acchinosoraranocode) on CodePen. アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました(下記参照)。 正円1のアニメーションを開始 正円1の開始から0.3秒…
【はてなブログ-カスタマイズ】見出しデザインをCSSで変更(4回目)
数日前から適用していますが、見出しのデザインを少し変更してみました。見出しデザインは何度か変更していて、今回の変更で4回目です。 これまので見出し変更の記事は、この記事の最後に関連記事としてリンクしておきます。それではサクッと本題へ。
【はてなブログ-カスタマイズ】最新記事(サイドバー)にある「もっと見る」リンクのデザインを変更(CSS変更)
数日前から適用していますが、「もっと見る」リンクのデザインを変更してみました。 「もっと見る」リンクは、サイドバーの最新記事に表示されているものです。「もっと見る」リンクがだいぶ簡素だなと思い、変更してみました。 ちょっとした変更なのですが、良い気分転換になりました。それでは本題へ。
【はてなブログ-カスタマイズ】右下に固定表示している「トップへ戻る」「HOME」ボタンのデザインを変更(HTML・CSS変更)
数日前から適用していますが、「トップへ戻る」「HOME」ボタンのデザインを変更してみました。 右下に固定表示しているボタンです。以前も「トップへ戻る」「HOME」ボタンは変更しています。 以下の記事で詳しく書いています。miya-moto-blog.hatenablog.com変更前はアイコンだけだったのですが、それぞれのボタンに名称を付け足してみました。他のサイトでもよく見かけるので、アイコンだけでどんな機能か示せている認識でいます。 ただちょっと変化をつけたいなと思い、カスタマイズしてみました。それでは本題へ。
【はてなブログ-カスタマイズ】グローバルナビゲーションの不具合対応(z-index)(CSS対応)
以前、グローバルナビゲーションのデザインを大幅に変更しました。変更内容の詳細は以下の記事に書いています。 miya-moto-blog.hatenablog.com 上記の変更からしばらくして、グローバルナビゲーションに不具合があることに気付きました。 ちょっとした不具合なのでササっと修正してお終いにしても良かったのですが、せっかくなので不具合対応の内容を記事にしてみようと思います。 それでは、どんな対応をしたか書いていきます。
CSS(スタイルシート)を更新したときにキャッシュを自動で読み直すために対応した話
今回はCSSファイルを更新したときにだけ、最新のCSSを読み直させるための対策をご紹介したいと思います。
備忘録 CSSだけでSPの時はアコーディオン風でPCの時はタブ切り替えを実装する方法
CSSだけでSPの時はアコーディオン風になり、PCの特はタブ切り替え風になる方法をご紹介したいと思います。
はてなブログカスタマイズの記事まとめ(その7)[アイコン、HTML、CSS関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは7回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ(その1)[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ(その2)[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ(その3)[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ(その4)[CSS/HTML/JavaScript/はてなブログ関連] ブログカスタマイズの記事まとめ…
【はてなブログ-カスタマイズ】見出しデザインをCSSで変更(3回目)
数日前から適用していますが、見出しのデザインを少し変更してみました。見出しデザインは何度か変更していて、今回の変更で3回目です。 これまでの見出し変更の記事はこちらです。miya-moto-blog.hatenablog.commiya-moto-blog.hatenablog.comそれではサクッと本題へ。
このページでは、HTMLとCSSのみで要素の表示非表示をクリックやタップで切り替えられる方法についての覚え書きをまとめています。 デモはこんな感じ。 DEMO 映画やゲームの感想...
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを大幅に変更してみる(CSS変更)
数日前から適用していますが、グローバルナビゲーションのデザインを大幅に変更してみました。自分のブログに適用しているのは「Silence」というデザインテーマです。 このデザインテーマ「Silence」の追加カスタマイズとして、グローバルナビの設置が可能です。Silenceで用意されているカスタマイズなので、手順に従うだけでお手軽にグローバルナビが設置できます。 当初はこれで満足していたのですが、徐々に自分なりのカスタマイズをしていくうちに全部イチからグローバルナビを作成したくなりました。ということで、イチから作成した内容が今回の記事となります。それではサクッと本題へ。
【はてなブログ-カスタマイズ】スマホ版グローバルナビゲーションのデザインを変更してみる
数日前から適用していますが、スマホ版のグローバルナビゲーションのデザインを少し変更してみました。 直近のブログカスタマイズはアイコン関連のものが多く、今回の記事もその流れです(直近のアイコン関連の対応は以下リンクにて)。 直近のブログカスタマイズ グローバルナビゲーションのデザインを変更してみる グローバルナビゲーションのアイコンを変更してみる(Font Awesome) サイドバーのアイコンを変更してみる(Font Awesome) せっかくFont Awesomeのアイコンが使えるというのと、スマホ版にもアイコンを使える余地があったなということで、変更してみた次第です。 それではサクッと本…
最近、ブログのテーマや見た目などをカスタマイズしました。その時に参考にしたページ集と覚書です。 テンプレート 今回は blogger日本語テンプレート「QooQ」 を利用させていただきました。 画像が無い投稿のデフォルトイメージを設定 トップページのリストで画像のある記事とない...
【はてなブログ-カスタマイズ】サイドバーのアイコンを変更してみる(Font Awesome)
数日前から適用していますが、サイドバーのアイコンを変更してみました。 今回の変更は、2日前のグローバルナビゲーションのアイコン変更と同じような感じです。miya-moto-blog.hatenablog.comせっかくFont Awesomeのアイコンが使えるので、サイドバーのアイコンも変更してみようと思った次第です。それではサクッと本題へ。
【はてなブログ-カスタマイズ】グローバルナビゲーションのアイコンを変更してみる(Font Awesome)
数日前から適用していますが、グローバルナビゲーションのアイコンを変更してみました。 グローバルナビゲーションは何日か前にもデザインを変更しています。 miya-moto-blog.hatenablog.com 上記記事の対応は概ね満足しているのですが、それっぽいアイコンがなかなか見つからなかったのが心残りでした。 今回はその心残りに対応した内容となります。 それではサクッと本題へ。
はてなブログカスタマイズの記事まとめ(その6)[CSS、デザインテーマ関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは6回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ(その1)[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ(その2)[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ(その3)[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ(その4)[CSS、HTML、JavaScript、はてなブログ関連] ブログカスタマイズの記事まとめ…
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、雪うさぎのアニメーションを作ってみました。「Result」で確認できます(レスポンシブ対応済)。 See the Pen Snow Rabbit by あっちのそらら (@acchinosoraranocode) on CodePen. CSSのアニメーション機能(@keyframes)で、下記の処理を順に実行させています。 雪うさぎを画面外に配置(スタート位置) 雪うさぎの縦位置を移動し、落下を表現 雪うさぎの縦横比率を交互に変え、着地時のぷるぷる感を表現 雪うさぎの横位置を移動+角度を変更し、転がり…
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを変更してみる
数日前から適用していますが、グローバルナビゲーションのデザインを少し変更してみました。変更した理由は、なんとなくの気分です。グローバルナビゲーションは全ページに共通するため、少しの変更でも意外と影響が大きく感じました。それではサクッと本題へ。
【はてなブログ-カスタマイズ】画像ホバー時に強調表示する(CSS変更)[半透明/少し拡大/縁取り]
数日前から適用していますが、画像ホバー時(マウスを乗せた時)に強調表示するようにしてみました。色々なサイトを見ていると、画像ホバー時にデザインが変化するサイトをたまに見かけます。 それを自分のブログでもやってみたくなったので試してみました。ちなみに何案か作成しており、見送った案も含めて書いていきます。それではサクッと本題へ。
【はてなブログ-カスタマイズ】囲み枠、目次、蛍光マーカーのデザインをCSSで変更
数日前から適用していますが、「囲み枠」「目次」「蛍光マーカー」のデザインを少し変更してみました。少し前に見出しのデザインを変更して、それによって他のデザインも気になってきて変更してみた次第です。関連記事【はてなブログ-カスタマイズ】見出しデザインをCSSで変更どの変更も色合いを調整したくらいのものですが、せっかくなので変更した内容を書いていこうと思います。それではサクッと本題へ。
数日前から適用していますが、見出しのデザインを少し変更してみました。実は、以前も見出しデザインを変更したことがあります。 なので、今回は2回目の変更となります。miya-moto-blog.hatenablog.com上記の変更が2023年5月みたいです。 半年くらいは上記の見出しデザインだったということですね。で、今回なぜ変更したかというと、何となくです。 「気分転換に見出しでも変えてみようかな」くらいの感じです。それでは、どんな変更をしたか書いていきます。
blogger 用 レスポンシブ対応テンプレートでPCの時だけ表示するガジェットの作り方
こちらの記事 で blogger に tokyo テンプレートを導入しました。今回はこのテンプレートのちょっとしたカスタマイズの方法です。 PCで表示、スマホで非表示のウィジェットを作りたい このブログでは、自作ソフトの説明もあるので一応 翻訳ガジェット を右上に設定してあ...
WordPress上のリンクをクリック中に現れる黒枠を消すCSS設定
WordPress ブログ内の テキストリンク をクリックしている最中、 黒い枠 が現れるようになりました。ブラウザに依らず発生するこの黒枠を、どのブラウザでも消えるような CSS 設定を調べてみます
【はてなブログ】ブログ記事にマーカーを引く方法 を一部修正しました
Bing(https://www.bing.com/) 2023/11/02 に書いた記事【はてなブログ】ブログ記事にマーカーを引く方法(見たまま編集)の中の、CSSコードの一部を修正しました。 ↓ savatrunk.com 修正点は、 background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%); (この最後のパラメーターを 0% → 60% にしました ↑) この最後のパラメーターを変えただけです。後で触れますが、オリジナルを書いてくださった mu2in氏のコードでは 60% になっていま…
Bing(https://www.bing.com/) 昨日、たくさんのはてなブログの先輩方の記事を参考にさせて頂いて、なんとか記事の中にマーカーを引くことができました。 記事をアップした後に、ふと気になってスマホで確認してみると・・・「おっと、マーカーが引かれていない!」 マーカーを引く方法は、HTML編集をしてこまめに付けていくのではなく、CSSをいじって「見たまま編集」の、イタリックの機能をマーカーの機能に切り替えて使う方法で試していました。 私は、ブログの作業は100%パソコンで行っており、スマホは確認に使っているだけですが、いまどきブログは、7割以上の人がスマホで読んでいると言われて…
【はてなブログ】ブログ記事にマーカーを引く方法(見たまま編集)
2023/11/06 CSSコードの一部分を修正しました。 (見た目等全く変わりません。念のためです) background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%); (この最後のパラメーターを 0% → 60% にしました ↑) Bing(https://www.bing.com/) はてなブログの記事の中に「見たまま編集」からマーカーを引く方法の、一例を書いておきたいと思います。 ネットで「はてなブログ マーカー」等で検索すれば、記事はたくさん出てきます。本当はHTML編集でこまめに設定する…
(Bing(https://www.bing.com/) 今日は、「これをやればマーカー機能が実現する!!」という、CSSのコードを載せた記事をアップしようと思っていたんですが・・・。 (CSS とはWebページの文字の大きさや色、レイアウト、背景などの見た目(スタイル)を設定する言語。これを加えたり変更することで、ブログの見た目が変わります。今回のマーカー機能もそのひとつという事ですね) ネットを検索すれば、「ブログの文章にマーカーを引く」という記事はたくさん出てくるのですが、よくよく見れば見るほど多くの人が載せてくれた CSSのコードが微妙に違っていたりします。 HTMLは昔少し触りました…
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラを描画してみました。描いたのは、うちの子「ナムナムくん」。「Result」でイラストを確認できます(レスポンシブ対応済)。 See the Pen namunamu by あっちのそらら (@acchinosoraranocode) on CodePen. 単調なデザインと甘く見ていましたが、どっこい。パーツの多さもあり、頭が痛くなるコード量に。特に髪は、地味に複雑な形のため、なかなか思ったとおりにならず悩みました。髪と口は、複数の円を組み合わせ、一部分を消すことで、一つの線に見えるようにしま…
NotionページをChrome拡張機能「Stylus」でデザイン変更(CSS適用)する
今回はNotionページのデザイン変更(CSS適用)に関して書いていきます。なお、NotionページにCSS適用するためにChrome拡張機能「Stylus」を使用します。 CSS適用するのは「見出し1~3」「引用ブロック」等です。以前もNotion見出しデザイン案の記事を書いたのですが、これはNotionの機能の範囲内で背景色を変更したり文字色を変更したりする方法でした。関連記事【6案】Notionの見出しデザイン案(区切り線/背景色/文字色/コード/絵文字)上記の記事ではCSS適用しているわけではないため、見出しの数だけ毎回デザイン適用の設定をしなければならず、けっこう手間でした。今回の対…
こんにちは。 ここ数日はオンラインイベント(クリエイターズ文化祭)に向けて専用ページを作成してます。って言っても大したもんじゃなくて出展するものの説明だったり挿し絵を載せてるだけのフツーのページなんですけどね。 その作成ページでやってみたことをネタにします。 やってみたことは背景の変更です。ブログに慣れた人にとっては当たり前のことかもですが、まぁ知らない人は知らないだろうし一応メモ的な感じで(´・ω・)b ※一応の注意書き。HTML・CSSはプログラミングではありませんがJavaScriptに関係するので当サイトでのカテゴリーはプログラミングに分類しています。 まず はてなブログの場合、背景画…
CSSのsubgridが主要ブラウザ全てでサポートされたということなので試してみたところ、Safari(17.0)でのみ何故か機能しない状況に陥った。 カードを3枚並べるような構成でテストしていた。 まずは普通にカード3 […]
WEBサイトを印刷した時に表示が崩れて困ったという事はありませんか?このページではWEBサイトを印刷した時に起こる印刷崩れの対処法を3選に分けてご紹介しています。簡単にできる方法からCSSを使って調整する方法までご紹介していますので、印刷崩れに困った場合に是非お試し下さい!
可愛いデザインの囲み枠の作り方!CSSとHTML簡単コピペでオシャレに作れる
サイトやブログをオシャレにしたい方の救世主は、おしゃれなデザイン囲み枠や可愛い囲み枠です。少しポイントで使うだけでも、読みやすくなったり目を引き付ける役目があります。WordPressの囲み枠をオシャレにしたいけど、初心者には難しいと諦めて
WordPressおしゃれな点線ドット囲み枠をCSSコードをコピペで作る
WordPressの文章を彩るブロック、囲み枠・装飾枠はどうやって作るの?wordpressをオシャレにしたいのに出来ない方の必殺技!かわいい囲み枠をコピペで作ろうです。CSSのコードをコピペするだけなので、初心者さんにも簡単にできます。オ
以前、サイドバーの画像サイズを調整したのですが、スマホ版の表示がちょっと変な感じになっていました。 ※スマホ版の表示なので厳密にはサイドバーではなく、記事の下の方の最新/関連/注目記事の画像サイズです。サイドバーの画像サイズ調整に関しては、以下の記事で書いています。関連記事【はてなブログ-カスタマイズ】サイドバーの最新/関連/注目記事の画像サイズを調整画像サイズは2か月くらい前に調整したのですが、変な感じになっていたのに今さら気付きました。どんな感じで変なのかは後ほど詳しく書きますが、CSSでサッと修正できたのでラッキーでした。それでは、どんな対応をしたか書いていきます。
はてなブログカスタマイズの記事まとめ(その5)[HTML、CSS、はてなブログ関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみに、ブログカスタマイズの記事まとめは5回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ(その1)[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ(その2)[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ(その3)[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ(その4)[CSS、HTML、JavaScript、はてなブログ関連] ということで、投稿した記事を…
【はてなブログ-カスタマイズ】HOMEボタンをページに固定表示する
数日前から適用していますが、HOMEボタンを配置してみました。 ページの右下に常に表示されているボタンです。以前も「トップへ戻る」ボタンを配置しており、そこに縦に並ぶ形で「HOME」ボタンも配置してみました。関連記事【はてなブログ-カスタマイズ】「トップへ戻る」ボタンをページに固定表示する「HOME」のページに戻りたい時が多いので、せっかくなら右下に固定表示してしまおうと思った次第です。今回の対応で「トップへ戻る」ボタンも微調整しているので、その件も含めて書いていきます。
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、夏にピッタリなひまわりの花を作ってみました。「Result」でイラストを確認できます(レスポンシブ対応済)。 See the Pen Sunflower by あっちのそらら (@acchinosoraranocode) on CodePen. 今年、CSSで三角関数がサポートされたので、試しに花びらの部分に取り入れました。三角関数の表現のひとつとして、要素を円周上に並べることができます。以下、今回の三角関数の工程をざっくり解説します。まずHTMLで、花びらの数に応じた番号を付与します。今回は10個なの…
cssで3D & 回転Design コードを確認&コピペできます。
デザインで遊んでみました。このままの形で実際に、使うことが少ないかもしれませんが、ややこしい部分はHTMLと.cssのSource Codeをご覧いただけま…
数日前から適用しているのですが、記事ページの最終更新日を調整しました。元々、JavaScriptとCSSを追加適用して表示させていました。ブログカスタマイズ【はてなブログ-カスタマイズ】更新日を追加表示するですが最近、はてなブログが「最終更新日の表示」に対応したみたいです。はてなブログ開発ブログ記事ページに最終更新日が表示されるようになりましたせっかくなので、はてなブログが対応した方に乗り換えようと思ったのですが、自分のブログカスタマイズと干渉してデザインが崩れてしまいました。今回の記事では、どんなデザイン調整をしたのか書いていこうと思います。
影で表現力UP!CSSシャドウのデザインテクニックまとめ【box-shadow】
CSSのbox-shadowプロパティは、要素に奥行きや立体感を加え、デザインをより魅力的にすることができます。影の位置や強さ、色などを調整することで、ウェブアプリケーションやウェブサイトに現代的な雰囲気を持たせることができます。
【CSS】改行の位置は指定したいけど出来れば一行に表示させたい
画面幅を縮めるとボックスの幅も同時に縮まり、ボックス内のテキストが折り返してしまう。改行タグ<br>を使ってもいいんだけど、画面幅が広ければ出来れば改行してほしくない。改行禁止を使うとボックスからはみ出してしまう…でも、1文字だ
ホワイトプレスの初期設定フォントは明朝体です。最近よく見かける「Meiryo」をメインに、CSSをカスタマイズしたいと思います。フォントサイズ・line-height・フォントの色も修正してみました。