メインカテゴリーを選択しなおす
はてなブログのフォントを変更するカスタマイズを紹介。テーマ「Minimalism」向けのフォントを統一するカスタマイズも紹介しています。
はてなブログのテーマ「Minimalism」では、太字で設定した部分がスマホでは太字にならない現象があります。CSSで対処する方法を紹介しているので、お悩みの方は参考にしてください。
はてなブログのテーマUnderShirtでおこなったカスタマイズ一覧です。この記事ではトップページと記事内に関するカスタマイズをまとめています。
はてなブログの目次カスタマイズ!シンプル・おしゃれ・コピペOK
はてなブログのテーマ「UnderShirt」の目次を、よりシンプルに・自分好みにカスタマイズしました。CSSはコピペOKです。
はてなブログのデザインテーマ「Minimalism」のカスタマイズのまとめ。フォント関連、ヘッダー画像、フッターなど。
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションに検索機能を追加する(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/はてなブログ関連] ブログカスタマイズの記事まとめ…
おはようございます。DOIC0330です。 【当ブログではアフィリエイト広告などを含みます】 前回記事では誰も興味のない悩みや愚痴をひたすら書きました。 読んで気持ちの良いモノではなかったと思うのにスターや暖かいコメントをいただき、本当にありがとうございました。 顔の見えないブログなのでもしかすると否定的なことも書かれるかな?とか読者さまが離れる、なんてこともあるかもしれないと考えていましたが全くそんなことはなく皆さんの優しさに触れてとても嬉しく思いました。 拙いブログですがこれからも好きなこと、もしかしたら誰かの役に立てることを書いていきたいと思いますのでこれからもよろしくお願いいたします!…
【はてなブログ-カスタマイズ】スマホ版で追従する目次を表示する(JavaScript・HTML・CSS対応)
スマホ版で目次を常に表示するように対応してみました。 スクロールの度に目次が追従するようにしています。以前「追従する目次をサイドバーに表示する」対応をしています(以下リンク)。 今回はそれをスマホ対応したような内容です。miya-moto-blog.hatenablog.com上記の対応(PCサイズ)だとサイドバーがあるため、そこに目次を表示するようにしました。 今回の対応(スマホサイズ)だとサイドバーがないため、別の方法で目次を表示するようにしています。今回はその辺りに関して詳しく書いていきます。
こんにちは。昨年6月末で定年退職を迎えた独身男性です。お気付きの方もいらっしゃるかもしれませんが、このたび当ブログのデザインテーマを変更しました。
【はてなブログ-カスタマイズ】見出しデザインをCSSで変更(4回目)
数日前から適用していますが、見出しのデザインを少し変更してみました。見出しデザインは何度か変更していて、今回の変更で4回目です。 これまので見出し変更の記事は、この記事の最後に関連記事としてリンクしておきます。それではサクッと本題へ。
【はてなブログ-カスタマイズ】最新記事(サイドバー)にある「もっと見る」リンクのデザインを変更(CSS変更)
数日前から適用していますが、「もっと見る」リンクのデザインを変更してみました。 「もっと見る」リンクは、サイドバーの最新記事に表示されているものです。「もっと見る」リンクがだいぶ簡素だなと思い、変更してみました。 ちょっとした変更なのですが、良い気分転換になりました。それでは本題へ。
【はてなブログ-カスタマイズ】右下に固定表示している「トップへ戻る」「HOME」ボタンのデザインを変更(HTML・CSS変更)
数日前から適用していますが、「トップへ戻る」「HOME」ボタンのデザインを変更してみました。 右下に固定表示しているボタンです。以前も「トップへ戻る」「HOME」ボタンは変更しています。 以下の記事で詳しく書いています。miya-moto-blog.hatenablog.com変更前はアイコンだけだったのですが、それぞれのボタンに名称を付け足してみました。他のサイトでもよく見かけるので、アイコンだけでどんな機能か示せている認識でいます。 ただちょっと変化をつけたいなと思い、カスタマイズしてみました。それでは本題へ。
【はてなブログ-カスタマイズ】グローバルナビゲーションの不具合対応(z-index)(CSS対応)
以前、グローバルナビゲーションのデザインを大幅に変更しました。変更内容の詳細は以下の記事に書いています。 miya-moto-blog.hatenablog.com 上記の変更からしばらくして、グローバルナビゲーションに不具合があることに気付きました。 ちょっとした不具合なのでササっと修正してお終いにしても良かったのですが、せっかくなので不具合対応の内容を記事にしてみようと思います。 それでは、どんな対応をしたか書いていきます。
はてなブログカスタマイズの記事まとめ(その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それではサクッと本題へ。
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを大幅に変更してみる(CSS変更)
数日前から適用していますが、グローバルナビゲーションのデザインを大幅に変更してみました。自分のブログに適用しているのは「Silence」というデザインテーマです。 このデザインテーマ「Silence」の追加カスタマイズとして、グローバルナビの設置が可能です。Silenceで用意されているカスタマイズなので、手順に従うだけでお手軽にグローバルナビが設置できます。 当初はこれで満足していたのですが、徐々に自分なりのカスタマイズをしていくうちに全部イチからグローバルナビを作成したくなりました。ということで、イチから作成した内容が今回の記事となります。それではサクッと本題へ。
【はてなブログ-カスタマイズ】スマホ版グローバルナビゲーションのデザインを変更してみる
数日前から適用していますが、スマホ版のグローバルナビゲーションのデザインを少し変更してみました。 直近のブログカスタマイズはアイコン関連のものが多く、今回の記事もその流れです(直近のアイコン関連の対応は以下リンクにて)。 直近のブログカスタマイズ グローバルナビゲーションのデザインを変更してみる グローバルナビゲーションのアイコンを変更してみる(Font Awesome) サイドバーのアイコンを変更してみる(Font Awesome) せっかくFont Awesomeのアイコンが使えるというのと、スマホ版にもアイコンを使える余地があったなということで、変更してみた次第です。 それではサクッと本…
【はてなブログ-カスタマイズ】サイドバーのアイコンを変更してみる(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、はてなブログ関連] ブログカスタマイズの記事まとめ…
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを変更してみる
数日前から適用していますが、グローバルナビゲーションのデザインを少し変更してみました。変更した理由は、なんとなくの気分です。グローバルナビゲーションは全ページに共通するため、少しの変更でも意外と影響が大きく感じました。それではサクッと本題へ。
いやぁ、、、、かなり嬉しくって移住記事の前に投稿しちゃいます! カスタマイズが全然できなくてもうblog記事は最低限書けるし諦めようかなと思ってい たのです。でも、やっぱり他のきれいに作っている方のを見ると羨ましくなり色々探し ては試していたのですがやっぱり全然できず。 もうこれを試してダメだったら本当に諦めようと思って試してみたら出来ました! 見てください!!! 赤の破線マークの所カテゴリーの階層化ができてます! blog初心者にはハードルが高かったです・・・ 失敗ばっかりだっただけに小躍りするほど嬉しい(笑) カスタマイズでカテゴリーの階層化で私のようにお困りの方はこちらの方のblogをご…
【はてなブログ-カスタマイズ】画像ホバー時に強調表示する(CSS変更)[半透明/少し拡大/縁取り]
数日前から適用していますが、画像ホバー時(マウスを乗せた時)に強調表示するようにしてみました。色々なサイトを見ていると、画像ホバー時にデザインが変化するサイトをたまに見かけます。 それを自分のブログでもやってみたくなったので試してみました。ちなみに何案か作成しており、見送った案も含めて書いていきます。それではサクッと本題へ。
はてなブログで、カスタムしたHTMLやデザインCSSを間違って消してしまい、バックアップも取っていなかった…というミスをしたことはありませんか? はてなブログにはこれらのソースコードを復元できる機能がないため、バックアップがなければ一からコードを書き直す必要があります。そんなときには、Google検索の「キャッシュ」を使うと復元できる可能性があります。
【はてなブログ-カスタマイズ】囲み枠、目次、蛍光マーカーのデザインをCSSで変更
数日前から適用していますが、「囲み枠」「目次」「蛍光マーカー」のデザインを少し変更してみました。少し前に見出しのデザインを変更して、それによって他のデザインも気になってきて変更してみた次第です。関連記事【はてなブログ-カスタマイズ】見出しデザインをCSSで変更どの変更も色合いを調整したくらいのものですが、せっかくなので変更した内容を書いていこうと思います。それではサクッと本題へ。
数日前から適用していますが、見出しのデザインを少し変更してみました。実は、以前も見出しデザインを変更したことがあります。 なので、今回は2回目の変更となります。miya-moto-blog.hatenablog.com上記の変更が2023年5月みたいです。 半年くらいは上記の見出しデザインだったということですね。で、今回なぜ変更したかというと、何となくです。 「気分転換に見出しでも変えてみようかな」くらいの感じです。それでは、どんな変更をしたか書いていきます。
みなさん、こんにちは。 ブログを始めてしばらくすると、自身のブログのデザインをあれこれイジってみたいと思ってきますよね。いろんな方のブログを読んでいると、自身のブログでも取り入れてみたいなぁと思うデザインを沢山目にします。 そんな僕も、ブログ運営されている先人の知恵をお借りして(公開しているデザインのコードをコピーさせてもらって)少しでも見栄えが良くなるように、ちょとずつアップグレードしています(少しずつですが(汗)) そこで、今回はいろんなブロガーさんがされている「蛍光ペン風マーカー」を使えるようにする方法をご紹介したいと思います。 蛍光ペン風マーカーとは 設定方法 ステップ1 ステップ2 …
【はてなブログ】フッターにコピーライトを表示させる方法(カスタマイズ)
みなさんこんにちは。 はてなブログを運営していると時間が経過していくにつれて、色々なカスタマイズをして見栄えを良くしたくなりますよね。 今回は、ブログの一番下フッターにデフォルトで配置されている簡単なブログ名?みたいなのがあると思うんですが、それを非表示にして”できるブログ感”を出していこうと思います。 何をしたいのか フッター 非表示の方法 ステップ1 ステップ2 ステップ3 コピーライトとは コピーライトの設定方法 ステップ1 ステップ2 ステップ3 表示されたコピーライトのカスタマイズ ステップ1 ステップ2 ステップ3 さいごに スポンサーリンク // 何をしたいのか ます、ブログの一…
【はてなブログ】定型文に読者登録ボタンを設定して任意の場所に表示させる方法
みなさんこんにちは。 以前、はてなブログで使える便利な定型文の作り方と言う記事を書いたのですが、今回はその応用編ということで「読者登録ボタン」の設置方法をご紹介したいと思います。 定型文の作り方はこちらから⤵ chacha-cat.hatenablog.com はてなブログには読者登録ボタンがありますよね。 トップページのプロフィール欄に読者登録ボタンを表示している方は多いと思うのですが、各記事ごと任意の場所に読者登録ボタンが設置できたら嬉しいですよね。 有名ブロガーさんになると、わざわざ読者登録を促さなくても自然と登録してもらえると思うのですが、僕のような弱小ブロガーは積極的にきっかけを作ら…
以前、サイドバーの画像サイズを調整したのですが、スマホ版の表示がちょっと変な感じになっていました。 ※スマホ版の表示なので厳密にはサイドバーではなく、記事の下の方の最新/関連/注目記事の画像サイズです。サイドバーの画像サイズ調整に関しては、以下の記事で書いています。関連記事【はてなブログ-カスタマイズ】サイドバーの最新/関連/注目記事の画像サイズを調整画像サイズは2か月くらい前に調整したのですが、変な感じになっていたのに今さら気付きました。どんな感じで変なのかは後ほど詳しく書きますが、CSSでサッと修正できたのでラッキーでした。それでは、どんな対応をしたか書いていきます。
はてなブログカスタマイズの記事まとめ(その5)[HTML、CSS、はてなブログ関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみに、ブログカスタマイズの記事まとめは5回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ(その1)[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ(その2)[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ(その3)[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ(その4)[CSS、HTML、JavaScript、はてなブログ関連] ということで、投稿した記事を…
【はてなブログ-カスタマイズ】HOMEボタンをページに固定表示する
数日前から適用していますが、HOMEボタンを配置してみました。 ページの右下に常に表示されているボタンです。以前も「トップへ戻る」ボタンを配置しており、そこに縦に並ぶ形で「HOME」ボタンも配置してみました。関連記事【はてなブログ-カスタマイズ】「トップへ戻る」ボタンをページに固定表示する「HOME」のページに戻りたい時が多いので、せっかくなら右下に固定表示してしまおうと思った次第です。今回の対応で「トップへ戻る」ボタンも微調整しているので、その件も含めて書いていきます。
数日前から適用しているのですが、記事ページの最終更新日を調整しました。元々、JavaScriptとCSSを追加適用して表示させていました。ブログカスタマイズ【はてなブログ-カスタマイズ】更新日を追加表示するですが最近、はてなブログが「最終更新日の表示」に対応したみたいです。はてなブログ開発ブログ記事ページに最終更新日が表示されるようになりましたせっかくなので、はてなブログが対応した方に乗り換えようと思ったのですが、自分のブログカスタマイズと干渉してデザインが崩れてしまいました。今回の記事では、どんなデザイン調整をしたのか書いていこうと思います。
はてなブログでudemyオススメ講座のアフィリエイトやり方メモ
学習サイトudemyのアフィリエイトリンクを作るやり方を調べて分かったことをまとめておきます。 ①楽天リンクシェアに登録する ②紹介したいudemy教育のリンクバーを作る おわりに ①楽天リンクシェアに登録する 楽天リンクシェア(リンクシェアジャパン)は、「楽天様が提供する広告主」と「メディア運営者」を仲介してくれるサービスです。 アフィリエイトのLinkShare Japan - (リンクシェア・ジャパン) 上記サイトから、新規会員登録が出来ます。今回はudemyのアフィリエイトが目的なので「リンクシェアアフィリエイト」を選択して進みました。(TGアフィリエイトはクレカや金融系なので対象外)…
【はてなブログカスタマイズ】ヘッダー画像の余白を取りスマホも美しく表示させる【Minimalism向け】
はてなブログでヘッダー画像を設定すると、余白ができてしまったことなどありませんか?余白のなくし方と、スマホでもきれいに表示させる方法を紹介します。
今回はCanvaでアイキャッチ画像を作成する手順を書いてみます。 1つのアイキャッチ画像をイチから作成する流れを書いてみようかなと思います。Canvaの機能を全般的に紹介する、というわけではなく。 1つのアイキャッチ画像を作成する場合でも、かなりの手順を踏んでいます。その手順の中で登場する様々な機能を紹介できたらなと思います。 それでは本題へ。
ブログカスタマイズの記事などで適用手順を書くことが多いため、ステップバーを導入してみました。ステップバーを導入する前は①、②、③・・・といった書き方でした。 それがステップバーの導入により、CSSでデザインされた見た目に変わりました。今回の対応により、手順を書いている感じがパッと見で表現できるのが良いなと思っています。使い方がちょっと独特なので、その辺も含めて書いていきます。
【はてなブログ-カスタマイズ】サイドバーの最新/関連/注目記事の画像サイズを調整
数日前から適用しているのですが、サイドバーの「最新記事」「関連記事」「注目記事」の画像サイズを変更しています。 画像サイズは、はてなブログを始めた当初に設定したような、デフォルトのままのような、、そんな曖昧な記憶です。ですが今回、改めて確認したところ画像サイズを変更できることに気付きました。 元の画像サイズは小さく、画像全体が見えない設定になっていました。今回の設定変更で画像サイズを大きくし、縦横比も画像に合わせて調整し、画像全体が見えるような設定に変更しました。 ということで今回は、どういった調整をしたのか書いていきます。
はてなブログカスタマイズの記事まとめ(その4)[CSS、HTML、JavaScript、はてなブログ関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは4回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ(その1)[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ(その2)[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ(その3)[CSS/HTML/JavaScript] 直近のブログカスタマイズはCSS、HTML、JavaScriptと、多岐にわたる感じになりました。 ということで、投稿した記事をまと…
約1700件のコンバートしたデータがあるので、地道に修正していくしか。気が遠くなる作業量にクラクラする。。。でも頑張ります。しかもCSSを弄っていたら、いつの間にか記事タイトルのカスタマイズ要素が無くなってるし(汗)本日戻しましたm(__)m修正完了まで使い勝手が悪いと思いますので、プロフィール欄に「サイトマップ」を設けました。アクセス数の多い項目から追加していきます。修正完了まではご迷惑をお掛けしますが、ご容赦ください。※関連情報 kalmia-works.net
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションを変更してみる
数日前から、スマホ版のグローバルナビゲーションを変更しています。 前はヘッダーに配置していたのですが、フッターに移動しました。これはCSS、HTML、JavaScriptを追加適用することで実現しています。なんとなく、スマホを手で持った時の親指の位置的に、フッターにメニューがあった方が操作しやすいなと思っています。なのでネットで調べて、自分のブログにも適用してみました。今回はその適用内容や手順について、アレコレ書いていきます。
【はてなブログ-カスタマイズ】目次のリンク先とグローバルナビゲーションが被るので対策
自分のブログには、グローバルナビゲーションを設置しています。 このグローバルナビゲーションはスクロールしても追従するので、トップページに戻りたい時や、各カテゴリーのページに遷移したい時に便利です。 ※以下画像の赤枠部分 グローバルナビゲーション便利なのですが、目次のリンクをクリックして対象の見出しにジャンプすると、グローバルナビゲーションと被ってしまいます。 グローバルナビゲーションは2か月以上前に設置したのですが、見出しと被っていたことに今さら気付きました。厳密には「追従する目次をサイドバーに表示する」対応をしていた時に気づきました。関連記事【はてなブログ-カスタマイズ】追従する目次をサイド…
【はてなブログ-カスタマイズ】追従する目次をサイドバーに表示する
数日前から適用しているのですが、サイドバーに目次を表示しています。 さらに、スクロールの度に目次が追従するようにしています。これはJavaScriptとCSSを追加適用することで実現しています。目次が追従するブログには何度か遭遇していて、便利に感じていました。 それと比べると、自分のブログは目次が多いわりに、記事の最初の方にだけ目次がある状態で不便に感じていました。ということで、ネットで調べて自分のブログにも適用してみました。今回はその適用内容や手順について、アレコレ書いていきます。
【はてなブログ】Canvaで作成したアイキャッチ画像を保存して使いまわす
Canvaでアイキャッチ画像を作成するようになって2か月くらい経過しました。 使い慣れてきたこともあり、自分用のアイキャッチ画像が何個か決まってきました。それを使いまわして、サクッと短時間でアイキャッチ画像を作成しています。(基本的に記事タイトルを差し替えるだけ) この使いまわす手順は、以前Canvaに関して書いた記事でも少しだけ触れています。ですがざっくりの説明になっていたので、今回の記事で改めて詳しく書いてみようと思います。 関連記事 【はてなブログ】Canvaでアイキャッチ画像を作成してみたらすごい便利だった 手順はざっくり アイキャッチのテンプレートを探す 選んだテンプレートを自分なり…
【はてなブログ-カスタマイズ】画像を縁取りする(影を付ける)
数日前から適用しているのですが、ブログに貼った画像を縁取りする(影を付ける)ようにしています。 これはCSSを追加適用することで実現しています。自分のブログは白ベースなのですが、貼る画像も白ベースが多いです。 そうなると、ブログの文章部分と画像部分の境目がなくて分かりにくくなってしまいます。それを解決するため、画像を縁取りするようにしています。 以前は画像加工編集サイトで画像加工して枠線を設定していました。 ですがそれだと、画像を1つずつ加工しないといけなかったので面倒でした。CSSでなんとか出来ないかなとネットで調べたところ、けっこう簡単にできそうだったので対応してみました。ということで、変…
はてなブログカスタマイズの記事まとめ(その3)[CSS、HTML、JavaScript]
ブログカスタマイズに関する記事をいくつか投稿したのでまとめて見ようと思います。 ちなみにブログカスタマイズの記事まとめは3回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ(その1)[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ(その2)[CSS/はてなブログ関連/デザインテーマ] 直近のブログカスタマイズはCSS関連が多くなりました。 本来なら、けっこうな時間を要するカスタマイズもあったのですが、参考サイトがあることでかなり時間短縮できました。ありがたい。 ということで、投稿した記事をまとめてい…
【はてなブログ-カスタマイズ】「目次」「箇条書き」「引用」のデザインが似ているので少し変更してみる
数日前から適用しているのですが、以下項目のデザインを少し変更しています。 目次 箇条書き 引用 デザイン変更した理由は、それぞれのデザインが似ているためです。似ている影響で、各項目が隣接している場合に見分けにくいなと感じたためです。なので少しデザイン変更して、各項目が隣接していても分かりやすくしてみました。それでは、どんな対応をしたか書いていきます。
数日前から適用しているのですが、記事ページに「更新日」を追加表示しています。これはJavaScriptとCSSを追加適用することで実現しています。たまに自分のブログの過去記事を見返すのですが、少し古くなった内容や、表現がイマイチだったものを見直して更新しています。ですが、更新日を表示していなかったので記事ページからは更新した旨が分からない状態でした。更新日を表示しているサイトにはちょくちょく遭遇していました。 なので自分のブログでも更新日を表示したいなと思い、対応してみました。ということで、変更内容や適用手順について書いていきます。
【ブログカスタマイズ】サイドバーの各項目にアイコンを設定してみる
数日前から適用しているのですが、サイドバーの各項目にアイコンを設定しています。これはCSSを追加適用することで実現しています。サイドバーの項目の中でも特に「関連記事」「注目記事」「最新記事」の3つは表示内容が似通っています。これをパッと見で、どれがどれか分かるようにするためにはアイコンを設定するのが良いかなと思った次第です。それでは、どんな対応をしたか書いていきます。