みやもとメモ

「Notion」「Google Apps Script」「ブログカスタマイズ」などについて書いていきます。

目次
目次

ブログカスタマイズ-HTML・CSS

【はてなブログ】右下に固定表示している「トップへ戻る」「HOME」ボタンのデザインをコードクリップ風に変更(HTML・CSS変更)

数日前から適用していますが、「トップへ戻る」「HOME」ボタンのデザインを変更してみました。 右下に固定表示しているボタンです。「トップへ戻る」「HOME」ボタンは何度か変更しています。 これまでの変更は、この記事の最後に関連記事としてリンクしてお…

【はてなブログ】ブログヘッダーのデザインを変更してみる(CSS対応)

数日前から適用していますが、ブログヘッダーのデザインを変更してみました。これまではブログヘッダーにフリー画像を設定していました。 それからしばらくしてグローバルナビゲーションを配置しました。するとブログヘッダーとグローバルナビゲーションの色…

【はてなブログ】スマホ版のグローバルナビゲーションに検索機能を追加する(JavaScript・HTML・CSS対応)

スマホ版のグローバルナビゲーションに検索機能を追加してみました。以前「スマホ版のグローバルナビゲーションを設置する」対応をしています(以下リンク)。 今回はそれに検索機能を追加しました。miya-moto-memo.hatenablog.com元々ページの下の方に検索…

【はてなブログ】スマホ版で追従する目次を表示する(JavaScript・HTML・CSS対応)

スマホ版で目次を常に表示するように対応してみました。 スクロールの度に目次が追従するようにしています。以前「追従する目次をサイドバーに表示する」対応をしています(以下リンク)。 今回はそれをスマホ対応したような内容です。miya-moto-memo.hatena…

【はてなブログ】見出しデザインをCSSで変更(4回目)

数日前から適用していますが、見出しのデザインを少し変更してみました。見出しデザインは何度か変更していて、今回の変更で4回目です。 これまでの見出し変更は、この記事の最後に関連記事としてリンクしておきます。それではサクッと本題へ。

【はてなブログ】最新記事(サイドバー)にある「もっと見る」リンクのデザインを変更(CSS変更)

数日前から適用していますが、「もっと見る」リンクのデザインを変更してみました。 「もっと見る」リンクは、サイドバーの最新記事に表示されているものです。「もっと見る」リンクがだいぶ簡素だなと思い、変更してみました。 ちょっとした変更なのですが…

【はてなブログ】右下に固定表示している「トップへ戻る」「HOME」ボタンのデザインを変更(HTML・CSS変更)

数日前から適用していますが、「トップへ戻る」「HOME」ボタンのデザインを変更してみました。 右下に固定表示しているボタンです。以前も「トップへ戻る」「HOME」ボタンは変更しており、記事にもしています(以下リンク)。miya-moto-memo.hatenablog.com…

【はてなブログ】グローバルナビゲーションの不具合対応(z-index)(CSS対応)

以前、グローバルナビゲーションのデザインを大幅に変更しました。変更内容の詳細は以下の記事に書いています。 miya-moto-memo.hatenablog.com 上記の変更からしばらくして、グローバルナビゲーションに不具合があることに気付きました。 ちょっとした不具…

【はてなブログ】見出しデザインをCSSで変更(3回目)

数日前から適用していますが、見出しのデザインを少し変更してみました。見出しデザインは何度か変更していて、今回の変更で3回目です。 これまでの見出し変更の記事はこちらです。miya-moto-memo.hatenablog.commiya-moto-memo.hatenablog.comそれではサク…

【はてなブログ】グローバルナビゲーションのデザインを大幅に変更してみる(HTML・CSS変更)

数日前から適用していますが、グローバルナビゲーションのデザインを大幅に変更してみました。自分のブログに適用しているのは「Silence」というデザインテーマで、このデザインテーマの追加カスタマイズとしてグローバルナビの設置が可能です。Silenceで用…

【はてなブログ】スマホ版グローバルナビゲーションのデザインを変更してみる

数日前から適用していますが、スマホ版のグローバルナビゲーションのデザインを少し変更してみました。スマホ版のグローバルナビゲーションに関しては、以下記事で詳しく書いています。 miya-moto-memo.hatenablog.com 直近のブログカスタマイズはアイコン関…

【はてなブログ】サイドバーのアイコンを変更してみる(Font Awesome)

数日前から適用していますが、サイドバーのアイコンを変更してみました。 今回の変更は、2日前のグローバルナビゲーションのアイコン変更と同じような感じです。miya-moto-memo.hatenablog.comせっかくFont Awesomeのアイコンが使えるので、サイドバーのアイ…

【はてなブログ】グローバルナビゲーションのアイコンを変更してみる(Font Awesome)

数日前から適用していますが、グローバルナビゲーションのアイコンを変更してみました。 グローバルナビゲーションは何日か前にもデザインを変更しています。 miya-moto-memo.hatenablog.com 上記記事の対応は概ね満足しているのですが、それっぽいアイコン…

【はてなブログ】グローバルナビゲーションのデザインを変更してみる

数日前から適用していますが、グローバルナビゲーションのデザインを少し変更してみました。変更した理由は、なんとなくの気分です。グローバルナビゲーションは全ページに共通するため、少しの変更でも意外と影響が大きく感じました。それではサクッと本題…

【はてなブログ】画像ホバー時に強調表示する(CSS変更)[半透明/少し拡大/縁取り]

数日前から適用していますが、画像ホバー時(マウスを乗せた時)に強調表示するようにしてみました。色々なサイトを見ていると、画像ホバー時にデザインが変化するサイトをたまに見かけます。 それを自分のブログでもやってみたくなったので試してみました。…

【はてなブログ】囲み枠、目次、蛍光マーカーのデザインをCSSで変更

数日前から適用していますが、「囲み枠」「目次」「蛍光マーカー」のデザインを少し変更してみました。少し前に見出しのデザインを変更して、それによって他のデザインも気になってきて変更してみた次第です。関連記事【はてなブログ-カスタマイズ】見出しデ…

【はてなブログ】見出しデザインをCSSで変更(2回目)

数日前から適用していますが、見出しのデザインを少し変更してみました。実は、以前も見出しデザインを変更したことがあります。 なので、今回は2回目の変更となります。miya-moto-memo.hatenablog.com上記の変更が2023年5月みたいです。 半年くらいは上記の…

【はてなブログ】サイドバーの画像サイズを修正(CSS対応)

以前、サイドバーの画像サイズを調整したのですが、スマホ版の表示がちょっと変な感じになっていました。 ※スマホ版の表示なので厳密にはサイドバーではなく、記事の下の方の最新/関連/注目記事の画像サイズです。サイドバーの画像サイズ調整に関しては、以…

【はてなブログ】HOMEボタンをページに固定表示する(HTML・CSS対応)

数日前から適用していますが、HOMEボタンを配置してみました。 ページの右下に常に表示されているボタンです。以前も「トップへ戻る」ボタンを配置しており、そこに縦に並ぶ形で「HOME」ボタンも配置してみました。関連記事【はてなブログ-カスタマイズ】「…

【はてなブログ】記事ページの最終更新日を調整

数日前から適用しているのですが、記事ページの最終更新日を調整しました。元々、JavaScriptとCSSを追加適用して表示させていました。ブログカスタマイズ【はてなブログ-カスタマイズ】更新日を追加表示するですが最近、はてなブログが「最終更新日の表示」…

【はてなブログ】ステップバーを導入してみる(CSS対応)

ブログカスタマイズの記事などで適用手順を書くことが多いため、ステップバーを導入してみました。ステップバーを導入する前は①、②、③・・・といった書き方でした。 それがステップバーの導入により、CSSでデザインされた見た目に変わりました。今回の対応に…

【はてなブログ】スマホ版のグローバルナビゲーションを変更してみる(JavaScript・HTML・CSS対応)

数日前から、スマホ版のグローバルナビゲーションを変更しています。 前はヘッダーに配置していたのですが、フッターに移動しました。これはCSS、HTML、JavaScriptを追加適用することで実現しています。なんとなく、スマホを手で持った時の親指の位置的に、…

【はてなブログ】目次のリンク先とグローバルナビゲーションが被るので対策(CSS対応)

自分のブログには、グローバルナビゲーションを設置しています。 このグローバルナビゲーションはスクロールしても追従するので、トップページに戻りたい時や、各カテゴリーのページに遷移したい時に便利です。 ※以下画像の赤枠部分 グローバルナビゲーショ…

【はてなブログ】追従する目次をサイドバーに表示する(JavaScript・CSS対応)

数日前から適用しているのですが、サイドバーに目次を表示しています。 さらに、スクロールの度に目次が追従するようにしています。これはJavaScriptとCSSを追加適用することで実現しています。目次が追従するブログには何度か遭遇していて、便利に感じてい…

【はてなブログ】画像を縁取りする(影を付ける)(CSS対応)

数日前から適用しているのですが、ブログに貼った画像を縁取りする(影を付ける)ようにしています。 これはCSSを追加適用することで実現しています。自分のブログは白ベースなのですが、貼る画像も白ベースが多いです。 そうなると、ブログの文章部分と画像…

【はてなブログ】「目次」「箇条書き」「引用」のデザインが似ているので少し変更してみる(CSS対応)

数日前から適用しているのですが、以下項目のデザインを少し変更しています。 目次 箇条書き 引用 デザイン変更した理由は、それぞれのデザインが似ているためです。似ている影響で、各項目が隣接している場合に見分けにくいなと感じたためです。なので少し…

【はてなブログ】更新日を追加表示する(JavaScript・CSS対応)

数日前から適用しているのですが、記事ページに「更新日」を追加表示しています。 これはJavaScriptとCSSを追加適用することで実現しています。たまに自分のブログの過去記事を見返すのですが、少し古くなった内容や、表現がイマイチだったものを見直して更…

【はてなブログ】サイドバーの各項目にアイコンを設定してみる(CSS対応)

数日前から適用しているのですが、サイドバーの各項目にアイコンを設定しています。これはCSSを追加適用することで実現しています。サイドバーの項目の中でも特に「関連記事」「注目記事」「最新記事」の3つは表示内容が似通っています。これをパッと見で、…

【はてなブログ】トップへ戻るボタンのホバー/箇条書きが出来る囲み枠(CSS・HTML対応)

以前ブログカスタマイズした内容に対して、少し変更してみました。 今回の記事では、その辺りに関して書いてみようと思います。変更は以下2つです。 トップへ戻るボタンのホバー 箇条書きが出来る囲み枠 1つずつだとそんなにボリュームがないので、1つの記事…

【はてなブログ】見出しをカスタマイズしてみる(CSS対応)

数日前から適用していますが、見出しを少しカスタマイズしてみました。今回のカスタマイズは既存のデザイン(デザインテーマ)に変更が入っています。実はこれまで記事にしてきたブログカスタマイズは 囲み枠の設定 トップへ戻るボタン テキストを蛍光ペンで…

TOPへ戻る HOMEへ