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

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

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

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

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

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

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

このブログをはじめてから、いろいろとカスタマイズをしてきて、ある程度できあがった感じがするので、ここで一度、今までやってきたカスタマイズをまとめてみます。 「前のページ」ボタン はてなブログに「前のページ」ボタンを設置する(jQuery) カテゴリ…

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

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

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

とりあえず、ブログのカスタマイズについては、ネタ切れのため、いったん終了かな。 11月14日にPageSpeed Insightsがバージョンアップ?したようなので確認してみました。Google ウェブマスター向け公式ブログ - PageSpeed Insights、Lighthouse の使用を開…

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

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

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

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

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

はてなブログのサイドバーのカテゴリーをボタン風に表示を応用して、各ページの下にある前後のページへのリンク(ページャ)をCSSでボタン風(タグ風)に表示してみました。 コードは次のとおり(デザイン設定→カスタマイズ→デザインCSSに以下のコードを入力…

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

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

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

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

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

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

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

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

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

人が見にこない、人に見られないブログなので、モチベーションを高めるため、自分が見たくなるように、ブログを書きたくなるように、ブログをカスタマイズしています。 リスト(ul)の黒ポチのかわりに、はてな純正アイコン(チェックマーク)を表示した。参…

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

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

ブログいぢりは楽しい

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

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

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

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

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

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

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

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

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

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

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

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

「ページトップへ戻る」ボタンは、jQueryの下に設置しないと動作しないので、はてなブログのページの下に自動的に組み込まれるjQueryを強制的に先に読み込ませます。 (デザイン設定→カスタマイズ→フッタに以下のコードを入力する)

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

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

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

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