いろいろな計測サイトでスピードテスト

さすがにブログのカスタマイズについては、もうネタがなくなってしまいました...。 困ったときは、ブログのスピードテスト。いろいろな計測サイトで確認してみました。今回も一番データが少ない「このブログについて」で得点アップをねらいます。なお、すべ…

はてなブログカスタマイズの小ネタ3連発

はてなブログのカスタマイズの話しばかりで恐縮ですが、1本だと記事として弱いので、3本まとめて記事にしました。小ネタ3連発! 「404 Not Found」のページをカスタマイズした。(例:404 Not Found ページ) 記事がないページにアクセスしたときに表示され…

はてなブログのページャをカスタマイズ

このブログは、デザインテーマのMinimalismをカスタマイズして使っていますが、記事のタイトルが長くなると、個別記事のページの下にあるページャが折り返される(改行)のが気になっていました。 そこで、CSSでカスタマイズし、「white-space:nowrap」でペ…

ブログタイトルをGoogleフォントにしてみた

ブログタイトルを中央寄せから左寄せに変更したのですが、それだけではつまらないので、タイトルのフォントも変更することにしました。 いろいろ調べて、はてなブログのテーマ ストアで使われているフォントのCSSを参考に、ブログタイトルのためだけにGoogle…

いろいろなブログカードを集めてブログに貼ってみた

はてなのブログカードは、ただのテキストリンクよりも見た目が良くわかりやすいので、リンクを目立たせるときに使っているのですが、貼り過ぎると重たくなってしまいます...。 そこで、はてなのブログカードの代わりになりそうなものをいろいろ集めて、この…

はてなブログで記事下に広告を横に2つ並べてランダム表示

はてなブログで、JavaScript(jQuery)を使って、個別記事の下に広告を横に2つ並べて、記事のページが表示されるたびに、ランダムに広告を表示させる方法をメモしておきます。 個別記事が表示されるたびにランダムで広告を表示させるの続きになりますが、前…

個別記事が表示されるたびにランダムで広告を表示させる

せっかくこのはてなブログをPro化したので、サイドバーと記事の下に広告を設置することにしました。広告を貼る前に、見にくる人を増やしなさいという話しですが...。 ただ、普通に広告を表示させるのもおもしろくないので、ちょっと工夫してみました。 まず…

はてなブログをPro化しました

思うところがあって、このはてなブログをPro化しました。はてなプロ村民になりました。とりあえず、1年コースに登録(1年後はブログを書いていないかもしれないので)。 やったこと 広告非表示(はてなによる広告を表示しない) キーワード自動リンクオフ(…

見やすい読みやすいブログの設定とは?

見やすい読みやすいブログは、フォントサイズ(文字の大きさ)、行の高さ(行間)、段落の余白の大きさなど、いったいどんな風に設定しているのでしょうか? いろいろなブログを見た限り、個人的には、フォントサイズは16px~17px、行の高さは1.7~1.8、段落…

はてなブログのカスタマイズまとめ

このブログで今までやってきたはてなブログのカスタマイズを厳選してまとめました。※ このブログのテーマはMinimalismなので、他のテーマで表示できないかもしれません。 上に戻るボタン コピペで簡単!はてなブログに上に戻るボタンを設置するコピペするだ…

続・はてなブログのサイドバーにオリジナルの記事一覧を表示

はてなブログのサイドバーにオリジナルの記事一覧を表示では、はてなブログ標準(はてなブログで自動的に読み込ませるCSS)のコードを利用して、サイドバーにオリジナルの記事一覧を表示させましたが、今回は、がんばって自分でHTMLを記述してみました。 (…

このブログをPageSpeed Insightsで確認してみる

11月14日にPageSpeed Insightsがバージョンアップしたようなので確認してみました。Google ウェブマスター向け公式ブログ - PageSpeed Insights、Lighthouse の使用を開始しました 前回計測したときは、普通にトップページで計測して75点でしたが、今回は、…

はてなブログのサイドバーにオリジナルの記事一覧を表示

はてなブログでは、標準でサイドバーに関連記事や注目記事の記事一覧を表示できますが、リンクや概要の文字が全体的に大きく、見た目のバランスがあまりよくない気がします。 そこで、サイドバーにHTMLのモジュールを追加し、オリジナルで記事一覧を作成、表…

【最終版】「ページトップへ戻る」ボタンの設置

まだまだ、飽きもせず、はてなブログのカスタマイズを続けています。「ページトップへ戻る」ボタンを設置する、続「ページトップへ戻る」ボタンの設置に続く第3弾です。今回も「ページトップへ戻る」ボタンの設置について書いていきます。 トップへ戻るボタ…

はてなブログのページャをボタン風に表示

はてなブログのサイドバーのカテゴリーをボタン風に表示を応用して、各ページの下にある前後のページのリンク(ページャ)をCSSでボタン風(タグ風)に表示してみました。 (デザイン→カスタマイズ→デザインCSSにコードを入力) CSS .pager { font-size: 14p…

はてなブログのサイドバーのカテゴリーをボタン風に表示

このブログは、まだカテゴリーが少ないのでタグクラウドまではいりませんが、サイドバーのカテゴリーをタグクラウドっぽくボタン風(タグ風)にCSSで表示してみました。 (デザイン→カスタマイズ→デザインCSSにコードを入力) CSS .hatena-module-category .…

はてなブログの「前のページ」と「次のページ」を逆にしてみる

今まであまり気にしたことがなかったというか、ブログはそういうものなんだと勝手に思っていたのが、「前のページ」「次のページ」と「前の記事」と「次の記事」の関係。 ブログ的には 「次のページ」=「古い記事」 「前のページ」=「新しい記事」 個人的…

はてなブログに「前のページ」ボタンを設置する(jQuery)

はてなブログでは、カテゴリーや月別アーカイブの記事一覧には、前のページに戻るリンクがあるのですが、なぜか、トップページには、前に戻るリンクがなく、ブラウザの戻るボタンで戻るしかありません。 そこで、JavaScript(jQuery)で「前のページ」ボタン…

続「ページトップへ戻る」ボタンの設置

「ページトップへ戻る」ボタンを設置するの続きなのですが、トップへ戻るボタンの表示を「CSS+Webアイコンフォント(Font Awesome)」から「JavaScript(jQuery)+画像ファイル」に変更しました。戻る動作を実行するスクリプト本体に変更はありません。 ボ…

最近のブログカスタマイズを箇条書き

人が見にこない、人に見られないブログなので、モチベーションを高めるため、自分が見たくなるように、ブログを書きたくなるように、ブログをカスタマイズしています。なお、CSSは「デザイン→カスタマイズ→デザインCSS」にコードを入力します。 リスト(ul)…

地味に細かすぎて目立たないブログカスタマイズ

このブログは、Minimalismというデザインテーマをカスタマイズして使っていますが、記事タイトルの日付やカテゴリー、サイドバータイトルのアイコンは、このテーマにインポートされているWebアイコンフォントのFont Awesomeをずっとそのまま使っていました。…

ブログいぢりは楽しい

ここ数日は、ブログも書かずに、ひたすらブログをカスタマイズしていました。 デザインテーマMinimalismのCSSとそれをカスタマイズしてテーマ化したCSSをブログのhead部分に記述し、テーマ化したCSSにブログをふわっと表示するCSSを追加しました。 (デザイ…

はてなのブログカードを遅延読み込み

はてなのブログカードですが、ブログ本体が表示されたあとにバラバラと表示されるのが気になったので対策してみました。 内容としては、はじめにブログカードを隠しておいて、ブログカードの読み込みが完了したら、ブログカードを表示するという流れです。 …

テーマストアではてなブログのデザインCSSをテーマ化する

このブログでは、はてなブログユーザーオリジナルのデザインテーマMinimalismをカスタマイズして使っていますが、そのカスタマイズしたCSSをテーマストアに投稿して、自分のブログ専用のテーマとしてインストールしてみることにしました。 テーマストアのテ…

ブログの背景色を白からグレーっぽい白になおしてみた

最近、Webページの白い背景色をまぶしく感じて(ディスプレイの輝度は下げている)、このブログの背景色を白(#ffffff)からグレーっぽい白(#f7f8f9)に変更しました。 また、この背景色に合うように各記事のアイキャッチ画像の一部を透過pngのものと差し替…

jQueryで<p>&nbsp;</p>を消す

勉強がてら、いろいろなはてなブログを見ているのですが、文章と文章の間の大きな余白が気になってしょうがない。 はてなでブログを書くとわかるのですが、見たまま編集でエンターキーで文章の間に余白をつくると、HTML編集では「<p> </p>(<p>&nbsp;</p>)」となっていま…

「はてなキーワード」のリンクを消す

このブログは、はてなブログなので、「はてなキーワード」に登録されている単語は自動的にリンクされてしまいます。単語単位のリンクは、とても見やすいとはいえないです...。 このブログでは「はてなキーワード」を消すために、CSSとJavaScriptを設定してい…

「ページトップへ戻る」ボタンを設置する

「ページトップへ戻る」ボタンは、jQueryの下に設置しないと動作しないので、はてなブログのページの下に自動的に組み込まれるjQueryを強制的に先に読み込ませます。 (デザイン→カスタマイズ→フッタにコードを入力) JavaScript <script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script> 「ページトップへ戻る」ボ…

「ページトップへ戻る」ボタンをつけた

このブログにも「ページトップへ戻る」ボタンをつけてあります。あってもなくてもいいとは思いますが、カッコいいじゃないですか!? 下にスクロールでボタンをふわっと表示、上にスクロールでふわっと消えます。ボタンをクリックでページトップへ戻ります。…

このブログのデザインテーマについて

このブログは、はてなブログユーザーが作成したMinimalismというデザインテーマを使っています。このテーマを選んだのは、はてなブログのテーマストアで人気1位だというのもありますが、シンプルでクリーンなデザインに好感がもてたからです。 9月にデザイン…