更新日時を自動で表示させるカスタマイズをご紹介します。はてなブログでの設定方法をご説明します。 - 雨のち晴れ
こんにちは。今回はブログカスタマイズをご紹介していきたいと思います。 今回ご紹介するのはこれ！ 左の日付が記事を書いた日にち、右の日付が記事を更新した日にちになります。 更新とは記事をリライトしたり、カテゴリーを変更したりした日にちのことです。 あったら便利ですよね♪ それでは早速ご紹介していきます。 更新日時をお知らせ！ headに貼るコード Font Awesomeのコード jQuerry のコード 記事下に貼るコード デザインCSSに貼るコード さいごに 更新日時をお知らせ！ ブログを復活させてからおよそ１３０記事を書きました。まだまだビギナーだと思っています。 それでも以前に書いた記事や内容を更新した方がいい記事については、定期的に見直すようにしています。 そこで、自分の書いた記事がいつ新しい情報に更新されたのかをお知らせする機能があれば便利だなと思い、今回のカスタマイズを取り入れ
Google AdSense合格者９人目の方の部分でカスタマイズについて触れたので軽くご紹介！ ※リンクを貼るために作成しました（笑） 私が愛用しているHTMLカスタマイズ３選になります！ コピペで使える他のサイトもたくさんあるのでお好みのものをぜひ見つけてみてください！ オレンジ色枠 使用したい方は下記をコピペ！ 赤色枠 使用したい方は下記をコピペ！ テープ付き付箋 使用したい方は下記をコピペ！ 簡単使用方法説明 ①「使用したい方はコピペ」部分のコードをコピー ②「HTML編集画面」に移動 ③「HEML編集画面」に「貼り付け」 ④「編集みたまま」に戻る まとめ オレンジ色枠 ◆この記事はこんな方にオススメ◆ ここに本文を入力します。 見出し付き直線の囲み枠例です。 使用したい方は下記をコピペ！ <fieldset style="border:2px solid #ffa500;"><le
はてなブログのカスタマイズ一覧￤これまでのカスタマイズ記事をまとめました（随時更新） - yunico's fluffy life
これまでにご紹介した、はてなブログのカスタマイズ方法をまとめました𓂃✍︎ ブログのデザインに独自性を持たせることは ユーザーが記事を読みやすくなる。 ユーザーが目的の情報に辿り着きやすくなる。 ユーザーの滞在時間や回遊率が上がる。 SEO（検索エンジン最適化）対策になり、検索サイトで上位に表示されやすくなる。 などの効果が見込めます。 ブログ全体のカスタマイズ レスポンシブデザインの設定 無料ブログで記事を一覧形式にする 検索窓のデザインと位置を変える 独自の404エラーページを作る ステマ規制対策 記事内の装飾・カスタマイズ 最終更新日の表示とデザインの変更 コピペで使える囲い枠 『HTML+CSS』で作るBOX 『HTMLのみ』で作るBOX はてな記法で簡単な表の作り方 外部パーツのカスタマイズ もしもアフィリエイト『かんたんリンク』 codoc（コードク）の投げ銭 「使えるかわから
【はてなブログ-カスタマイズ】スマホ版で追従する目次を表示する（JavaScript・HTML・CSS対応） - みやもとブログ
スマホ版で目次を常に表示するように対応してみました。 スクロールの度に目次が追従するようにしています。 以前「追従する目次をサイドバーに表示する」対応をしています（以下リンク）。 今回はそれをスマホ対応したような内容です。 miya-moto-blog.hatenablog.com 上記の対応（PCサイズ）だとサイドバーがあるため、そこに目次を表示するようにしました。 今回の対応（スマホサイズ）だとサイドバーがないため、別の方法で目次を表示するようにしています。 今回はその辺りに関して詳しく書いていきます。 変更内容 画像 具体的な使い方（gif） 適用したコード CSS・HTML JavaScript デザインの適用手順 注意事項 おわりに 関連記事 変更内容 画像 まずは手っ取り早く、画像を載せます。 ページの右下に「目次ボタン」を配置しました（左の画像）。 目次ボタンをタップすると、
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションに検索機能を追加する（JavaScript・HTML・CSS対応） - みやもとブログ
この記事は移転しました。約2秒後に新記事へ移動します。 移動しない場合は以下をクリックしてください。 miya-moto-memo.hatenablog.com
はてなブログのエラーページをオリジナル仕様にカスタマイズ￤画像入りの404ページの作り方！ - yunico's fluffy life
404エラーページをオリジナルにカスタムすることで、ユーザーのページ離脱率を減らせるかもしれません。 今回は『ブログにエラーが出てしまっても読者さんにページ回遊を促すことができるかもしれない』そんなカスタマイズ方法をご紹介します。 この記事に書いてあること 404エラーとは何か。 404ページをカスタマイズすることのメリット。 はてなブログでのカスタマイズ方法。 404エラーとは 404エラーが起こる原因 カスタマイズするメリット 離脱率を抑えられる可能性がある 独自のメッセージを伝えられる SNSで共有…されるかも!? カスタム404ページの作り方 JavaScriptコード 変更する場所 コードの使い方 404エラーとは ウェブサイトを見ていて、「お探しのページは見つかりませんでした」などの文言が表示され、探しているページが見れなかったことはありませんか？ なんらかの理由で公開されてい
【はてなブログ-カスタマイズ】囲み枠、目次、蛍光マーカーのデザインをCSSで変更 - みやもとブログ
数日前から適用していますが、「囲み枠」「目次」「蛍光マーカー」のデザインを少し変更してみました。 少し前に見出しのデザインを変更して、それによって他のデザインも気になってきて変更してみた次第です。 関連記事【はてなブログ-カスタマイズ】見出しデザインをCSSで変更 どの変更も色合いを調整したくらいのものですが、せっかくなので変更した内容を書いていこうと思います。 それではサクッと本題へ。 変更内容（画像） 囲み枠 目次 蛍光マーカー 適用したCSS 囲み枠 目次 蛍光マーカー デザインの適用手順 注意事項 おわりに 変更内容（画像） まずは「囲み枠」「目次」「蛍光マーカー」それぞれの変更前後の画像を貼ります。 画像の左側が「変更前」、右側が「変更後」です。 囲み枠 囲み枠囲み枠の変更前は、引用と同じグレー背景でした。 ちょっとデザイン的に似ているなと思い、別の色に変更したくなりました。 囲
はてなブログのトップページに雪を降らせるカスタマイズ（コピペでOK！）￤冬に使えるおしゃれデザイン❄ - yunico's fluffy life
ブログのデザインって大幅に変えるのは大変だし、一度設定したら長いことそのままになることが多いですよね。 季節によって少しだけ手を加えて、ブログの雰囲気を変えられたらお手軽だと思い、今回のデザインを考えてみました！ このカスタマイズをすると、こんな風に見えます！ ▼サンプルページyunico-fluffylife.com こんなこと書いています 冬季のデザインにおすすめなトップページに雪を降らせる、はてなブログのカスタマイズ（コピペでOK）をご紹介❅ 特に無くてもいいカスタマイズですが(Ꙭ ) 『冬の特別仕様』を演出できますよ！笑 ワードプレス用のカスタマイズ方法はあったのですが、はてなブログで使えるものが見つからなくて…作っちゃいました❅.*yunico はじめに￤注意点など コードと貼り付ける場所 ヘッダに貼り付けるコードとスクリプト デザインCSSに貼り付けるコード 雪の色を変える お
はてなブログの最終更新日￤設定方法とカスタマイズ方法（コピペで使えます！） - yunico's fluffy life
2023.08.01から、はてなブログに記事の最終更新日を表示する機能が追加されました。staff.hatenablog.com公式実装、待ってました！ さっそく設定とカスタマイズをしていきましょう。 この記事に書いてあること 最終更新日の設定方法。 デザインのカスタマイズ方法（コピペOK！）。 最終更新日を表示するメリット。 最終更新日の設定方法 デザインをカスタマイズする コピペで使えるCSSコード カスタマイズの注意点 最終更新日を表示するメリット おわりに 最終更新日の設定方法 最終更新日の設定 はてなブログのトップページから 【デザイン】へアクセスする。 【記事】➡【最後に更新した日付も表示する】にチェック︎︎︎︎︎︎☑︎︎︎︎︎︎︎を入れる（②）。 【変更を保存する】を押して完了。 スマホで設定する場合は、スマホをPC表示にして操作してください。 この設定はレシポンシブデザイン
【はてなブログ-カスタマイズ】追従する目次をサイドバーに表示する（JavaScript・CSS対応） - みやもとブログ
数日前から適用しているのですが、サイドバーに目次を表示しています。 さらに、スクロールの度に目次が追従するようにしています。 これはJavaScriptとCSSを追加適用することで実現しています。 目次が追従するブログには何度か遭遇していて、便利に感じていました。 それと比べると、自分のブログは目次が多いわりに、記事の最初の方にだけ目次がある状態で不便に感じていました。 ということで、ネットで調べて自分のブログにも適用してみました。 今回はその適用内容や手順について、アレコレ書いていきます。 使い方 参考サイト 適用したコード JavaScript CSS 挙動に関して JavaScript CSS 適用手順 注意事項 おわりに 関連記事 使い方 まずは手っ取り早く、使い方を載せます。 サイドバーが表示されている状態で動作するので、対象は基本的にPCのみです。 サイドバーが表示されていない
数日前から適用しているのですが、記事ページの最終更新日を調整しました。 元々、JavaScriptとCSSを追加適用して表示させていました。 ブログカスタマイズ【はてなブログ-カスタマイズ】更新日を追加表示するですが最近、はてなブログが「最終更新日の表示」に対応したみたいです。 はてなブログ開発ブログ記事ページに最終更新日が表示されるようになりましたせっかくなので、はてなブログが対応した方に乗り換えることにしました。 ですが簡単にはいかず、自分のブログカスタマイズと干渉してデザインが崩れてしまいました。 今回の記事では、どんなデザイン調整をしたのか書いていこうと思います。 変更内容（画像） 変更前 変更後（設定変更） 変更後（JS削除、CSS修正） 参考サイト コード 削除したコード 修正したコード 修正前 修正後 デザインの適用手順 注意事項 おわりに 関連記事 変更内容（画像） まずは
【はてなブログ-カスタマイズ】見出しデザインをCSSで変更（4回目） - みやもとブログ
数日前から適用していますが、見出しのデザインを少し変更してみました。 見出しデザインは何度か変更していて、今回の変更で4回目です。 これまので見出し変更の記事は、この記事の最後に関連記事としてリンクしておきます。 それではサクッと本題へ。 変更内容（画像） 変更前 変更後 参考サイト 適用したCSS デザインの適用手順 注意事項 おわりに 関連記事 変更内容（画像） まずは手っ取り早く、変更前後の画像を載せます。 変更前 変更前 変更後 変更後変更前は、「大見出し」→「中見出し」→「小見出し」の順でボーダーが減っていく感じです。 大見出しが「上下左右」、中見出しが「上下」、小見出しが「左」です。 あとは徐々にボーダーが細くなったり、色が薄くなったり、といった工夫です。 変更後は、全てボーダーを左端に統一しました。 ボーダーが細くなったり、色が薄くなったり、といった工夫は同様です。 あとは、
【はてなブログ-カスタマイズ】見出しデザインをCSSで変更（3回目） - みやもとブログ
数日前から適用していますが、見出しのデザインを少し変更してみました。 見出しデザインは何度か変更していて、今回の変更で3回目です。 これまでの見出し変更の記事はこちらです。 miya-moto-blog.hatenablog.commiya-moto-blog.hatenablog.com それではサクッと本題へ。 変更内容（画像） 変更前 変更後 適用したCSS デザインの適用手順 注意事項 おわりに 関連記事 変更内容（画像） まずは手っ取り早く、変更前後の画像を載せます。 変更前 変更前 変更後 変更後大きく変わったのは「中見出し」です。 中見出しと小見出しのデザインがけっこう似ているなと思ったため、変更してみました。 ニュアンスとしては、「大見出し」→「中見出し」→「小見出し」の順でボーダーが減っていく感じです。 大見出しが「上下左右」、中見出しが「上下」、小見出しが「左」という感
【はてなブログ-カスタマイズ】最新記事（サイドバー）にある「もっと見る」リンクのデザインを変更（CSS変更） - みやもとブログ
数日前から適用していますが、「もっと見る」リンクのデザインを変更してみました。 「もっと見る」リンクは、サイドバーの最新記事に表示されているものです。 「もっと見る」リンクがだいぶ簡素だなと思い、変更してみました。 ちょっとした変更なのですが、良い気分転換になりました。 それでは本題へ。 変更内容（画像） 変更前 変更後 「もっと見る」リンクの表示設定 適用したCSS デザインの適用手順 注意事項 おわりに 変更内容（画像） まずは変更前後の画像を貼ります。 変更前 変更前 変更後 変更後変更前はシンプルなリンクでした。 変更後はボタンっぽいデザインにしました。 クリックしたくなる雰囲気を意識してみました。 「もっと見る」リンクの表示設定 「もっと見る」リンクはデフォルトだと非表示になっているようです（たぶん）。 詳しい手順は割愛しますが、以下で表示/非表示が設定できます。 「もっと見る」
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションを変更してみる（JavaScript・HTML・CSS対応） - みやもとブログ
数日前から、スマホ版のグローバルナビゲーションを変更しています。 前はヘッダーに配置していたのですが、フッターに移動しました。 これはCSS、HTML、JavaScriptを追加適用することで実現しています。 なんとなく、スマホを手で持った時の親指の位置的に、フッターにメニューがあった方が操作しやすいなと思っています。 なのでネットで調べて、自分のブログにも適用してみました。 今回はその適用内容や手順について、アレコレ書いていきます。 変更内容（画像） 変更前 変更後 参考サイト 適用したコード CSS HTML（＋JavaScript） 挙動に関して CSS HTML（＋JavaScript） デザインの適用手順 注意事項 おわりに 関連記事 グローバルナビゲーション関連 スマホ関連 JavaScript関連 変更内容（画像） まずは変更前後の画像を貼ります。 変更前 変更後 こんな感じ
【はてなブログ-カスタマイズ】画像ホバー時に強調表示する（CSS変更）[半透明/少し拡大/縁取り] - みやもとブログ
数日前から適用していますが、画像ホバー時（マウスを乗せた時）に強調表示するようにしてみました。 色々なサイトを見ていると、画像ホバー時にデザインが変化するサイトをたまに見かけます。 それを自分のブログでもやってみたくなったので試してみました。 ちなみに何案か作成しており、見送った案も含めて書いていきます。 それではサクッと本題へ。 変更前 挙動 変更後（半透明） 挙動 適用したCSS 参考リンク 見送った案１（少し拡大） 挙動 適用したCSS 参考リンク 見送った案２（縁取り） 挙動 適用したCSS 参考リンク デザインの適用手順 注意事項 おわりに 変更前 まずは変更前の挙動を載せます。 挙動 変更前変更前はホバー時に特に何も変化しません。 変更後（半透明） 次に変更後の挙動を載せます。 挙動 変更後（半透明）画像にマウスを乗せると（ホバーすると）、画像が半透明になります。 後ほど見送っ
![【はてなブログ-カスタマイズ】画像ホバー時に強調表示する（CSS変更）[半透明/少し拡大/縁取り] - みやもとブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e9392ef3865a608fa70db36394f2a67b1a84f57d/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fmiyamoto-blog%2F20240123%2F20240123032529.png)
【はてなブログ-カスタマイズ】サイドバーの各項目にアイコンを設定してみる（CSS対応） - みやもとブログ
数日前から適用しているのですが、サイドバーの各項目にアイコンを設定しています。 これはCSSを追加適用することで実現しています。 サイドバーの項目の中でも特に「関連記事」「注目記事」「最新記事」の3つは表示内容が似通っています。 これをパッと見で、どれがどれか分かるようにするためにはアイコンを設定するのが良いかなと思った次第です。 それでは、どんな対応をしたか書いていきます。 変更内容（画像） 関連記事 注目記事 最新記事 参考サイト 適用したCSS デザインの適用手順 注意事項 おわりに 関連記事 変更内容（画像） まずは変更前後の画像を貼ります。 記事の冒頭でも触れた「関連記事」「注目記事」「最新記事」それぞれの変更前後の画像を貼ってみます。 関連記事 関連記事 注目記事 注目記事 最新記事 最新記事こんな感じです。 パッと見で、どれがどれか分かりやすくなったかなと思います。 参考サイ
【はてなブログ-カスタマイズ】サイドバーの最新/関連/注目記事の画像サイズを調整 - みやもとブログ
数日前から適用しているのですが、サイドバーの「最新記事」「関連記事」「注目記事」の画像サイズを変更しています。 画像サイズは、はてなブログを始めた当初に設定したような、デフォルトのままのような、、そんな曖昧な記憶です。 ですが今回、改めて確認したところ画像サイズを変更できることに気付きました。 元の画像サイズは小さく、画像全体が見えない設定になっていました。 今回の設定変更で画像サイズを大きくし、縦横比も画像に合わせて調整し、画像全体が見えるような設定に変更しました。 ということで今回は、どういった調整をしたのか書いていきます。 変更内容（画像） 変更前 変更後 設定手順 注意事項 おわりに 関連記事 変更内容（画像） まずは変更前後の画像を貼ります。 「最新記事」「関連記事」「注目記事」の3つを変更したのですが、どれも設定内容は同じです。 なので3つの中から「最新記事」をピックアップしま
【はてなブログ-カスタマイズ】右下に固定表示している「トップへ戻る」「HOME」ボタンのデザインを変更（HTML・CSS変更） - みやもとブログ
数日前から適用していますが、「トップへ戻る」「HOME」ボタンのデザインを変更してみました。 右下に固定表示しているボタンです。 以前も「トップへ戻る」「HOME」ボタンは変更しており、記事にもしています（以下リンク）。 miya-moto-blog.hatenablog.com 上記の対応ではアイコンのみでしたが、今回の対応でそれぞれのボタンに名称を付け足してみました。 他のサイトでもよく見かけるので、アイコンだけでどんな機能か示せている認識でいます。 ただちょっと変化をつけたいなと思い、カスタマイズしてみました。 それでは本題へ。 変更内容（画像） 変更前 変更後 変更前後（ズーム） 適用したコード HTML CSS デザインの適用手順 注意事項 おわりに 関連記事 変更内容（画像） まずは変更前後の画像を貼ります。 変更前 変更前 変更後 変更後 変更前後（ズーム） 上記の画像だと対
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを変更してみる - みやもとブログ
数日前から適用していますが、グローバルナビゲーションのデザインを少し変更してみました。 変更した理由は、なんとなくの気分です。 グローバルナビゲーションは全ページに共通するため、少しの変更でも意外と影響が大きく感じました。 それではサクッと本題へ。 変更内容（画像） 変更前 変更後 変更前（動作） 変更後（動作） 参考サイト デザインテーマ アイコン 適用したコード CSS HTML デザインの適用手順 注意事項 おわりに 変更内容（画像） まずは変更前後の画像を載せます。 変更前 変更前 変更後 変更後変更前は「HOME」にだけアイコンを設置していました。 変更後は「その他」を除いた全てのリンクにアイコンを設置するように変更しました。 また、変更前にあった「∨」みたいなアイコンを削除してみました。 あとはホバー時の動作を変更してみました。 こちらはgifを載せます。 変更前（動作） 変更
【はてなブログ-カスタマイズ】目次のリンク先とグローバルナビゲーションが被るので対策（CSS対応） - みやもとブログ
自分のブログには、グローバルナビゲーションを設置しています。 このグローバルナビゲーションはスクロールしても追従するので、トップページに戻りたい時や、各カテゴリーのページに遷移したい時に便利です。 ※以下画像の赤枠部分 グローバルナビゲーション便利なのですが、目次のリンクをクリックして対象の見出しにジャンプすると、グローバルナビゲーションと被ってしまいます。 グローバルナビゲーションは2か月以上前に設置したのですが、見出しと被っていたことに今さら気付きました。 厳密には「追従する目次をサイドバーに表示する」対応をしていた時に気づきました。 関連記事【はてなブログ-カスタマイズ】追従する目次をサイドバーに表示する このままでも良かったのですが、簡単に解消できそうなら対応したいなと思い、ネット検索してみました。 すると簡単に解消できそう、となったのでサクッと対応しました。 ということで、どうや
【はてなブログ-カスタマイズ】グローバルナビゲーションの不具合対応（z-index）（CSS対応） - みやもとブログ
以前、グローバルナビゲーションのデザインを大幅に変更しました。 変更内容の詳細は以下の記事に書いています。 miya-moto-blog.hatenablog.com 上記の変更からしばらくして、グローバルナビゲーションに不具合があることに気付きました。 ちょっとした不具合なのでササっと修正してお終いにしても良かったのですが、せっかくなので不具合対応の内容を記事にしてみようと思います。 それでは、どんな対応をしたか書いていきます。 不具合内容（画像） 原因と対策 原因 対策 不具合対策後（画像） 適用したCSS おわりに 不具合内容（画像） まずはどういった不具合か、画像を貼ります。 不具合内容 不具合内容 不具合は上記画像の赤枠部分です。 グローバルナビゲーションのメニューより、読者数を表示しているパーツの方が前面に表示されてしまっています。 他のパーツは前面に表示されることはなく、読書
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【コピペで簡単】はてなブログで愛用しているHTMLカスタマイズ３選 - 無職ぽこのらくがき
【はてなブログ-カスタマイズ】記事ページの最終更新日を調整 - みやもとブログ