メインカテゴリーを選択しなおす
WordPressプラグイン「TablePress」で、Excel のような行列固定表示がやってみたかったので調べてみると・・CSSを記述すると実現できました！
自作ブログのカスタマイズ：タグ検索機能の実装方法 スズシンラボ
自作ブログにタグ検索機能を追加しました。キーワードを入力すると、そのキーワードに一致するタグの記事を検索できるようになりました。この記事では、そのタグ検索機能の実装方法を紹介します。一般的な方法とは若干異なりますが、参考にしていただければ幸いです。
目次・見出しのデザイン変更、マーカー機能、カテゴリーのタイル表示、実際にこのブログでのカスタマイズについて。CSSコードあり。
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、太陽を描画してみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Untitled by あっちのそらら (@acchinosoraranocode) on CodePen. 静止画だとシンプルすぎて味気なかったので、遊び心でアニメーションも加えました。ギザギザ部分は、複数の正方形をつなげて再現。円周上に並べるため、三角関数を使用したので、ざっくり解説します。 正方形を描画する spanタグで正方形を作ります。数が多いほどギザギザが細かくなりますが、見た目のバランス…
Webサイトをデザインする時には、視覚的な演出としてちょっとした動きを付加することも同時に検討する。動きを与えることで見せたいものをより印象付けたり、UIの観点で使いやすくしたり、情報の内容をより分かりやすく伝えることが […]
画像をふわっと。初心者でも簡単に実装できるシンプルなテクニック。具体的なコード例を交えて紹介。デザインスキルを次のレベルに引き上げるための必読ガイドです。
SWELLカスタマイズ：素人が追加CSSでブログをカスタマイズしてみる【記事スライダー編】
このブログは「SWELL」というワードプレステーマを使用して作っています。SWELLはHTMLやCSSなどの専門知識がなくても、直感的に良い感じのサイトデザインができます。本業がフォトグラファーなので、ブログの写真には結構こだわっているつも
SWELLカスタマイズ：素人が追加CSSでブログをカスタマイズしてみる【トップページ記事一覧編】
このブログは「SWELL」というワードプレステーマを使用して作っています。SWELLはHTMLやCSSなどの専門知識がなくても、直感的に良い感じのサイトデザインができます。本業がフォトグラファーなので、ブログの写真には結構こだわっているつも
SWELLカスタマイズ：素人が追加CSSでブログをカスタマイズしてみる
「記事スライダー編」と「トップページ記事一覧編」に分けて、素人の追加CSSによるカスタマイズを紹介しています。この記事ではカスタマイズで完成したページを見ていきます。それぞれの記事に細かいカスタマイズについて書いています。 完成したトップペ
Bloggerの最大の利点は、広告が自動で挿入されないことです。また、独自ドメインがなくてもGoogleアドセンスに申請可能であり、ドメインを所有している場合はサーバーの維持費が不要です。 一方で、デメリットとしては、カスタマイズの自由度が低く、Wordpressのような豊...
ヘッダー・フッター・サイドバー・トップへ戻るなどのカスタマイズをちょっとだけやってみました。 記事一覧ページ タグ・カテゴリー一覧、月別アーカイブページなどの一覧形式の各エントリーの余白を追加 トップページ 記事のスニペットの文字数が多いため一定数以上を超えた場合に...で...
【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関連]](https://img.blogmura.com/sites/1251975/post-images/62402677.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その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関連]](https://img.blogmura.com/sites/1251975/post-images/61390015.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その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、デザインテーマ関連]](https://img.blogmura.com/sites/1251975/post-images/60771127.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その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変更）[半透明/少し拡大/縁取り]](https://img.blogmura.com/sites/1251975/post-images/60421873.webp/crop/435x435)
【はてなブログ-カスタマイズ】画像ホバー時に強調表示する（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を使って調整する方法までご紹介していますので、印刷崩れに困った場合に是非お試し下さい！
