simadzu’blog

枝豆ガーリックに一味を入れすぎてピリカラガーリック枝豆になってしまった

コピペ式似非ブログカードを作った

はてなブログの特徴的な機能のブログカードですが、Chromeウェブストアなど埋め込みできないWebページがあるので、自分的に使い勝手が悪くなってしまいました...。そこで、はてなのブログカードを流用してコピペ式似非ブログカードを作りました。このブログ…

はてなのブログカードの不具合(リンクが表示されない)

2月13日頃からはてなのブログカードに埋め込んだChromeウェブストアへのリンクが表示されなくなりました...。Chromeの拡張機能を紹介しているブログにとっては一大事です! はてなのサポートに問い合わせたところ、次のような回答がありました。 Google(Chr…

はてなブログのサイドバーをCSSだけで固定(追従)する

はてなブログでサイドバーに設置した目次や広告バナーを固定して表示(スクロールに合わせて追従)させたい! JavaScriptを使わずにCSSだけでなんとかしたい。 参考になるブログ・Webサイト はてなブログでサイドバーを固定して追従させるカスタマイズ 今回…

はてなブログでGoogleフォントをなるべく速く読み込みたい

このブログでは、日付を日めくりカレンダー風に表示し、そのフォントに「sans-serif」を指定しているのですが、フォントによってカレンダーの大きさが少し変わってしまいます。そこで、日付のフォントをWebフォントのGoogle Fontsにしてみました。 日付に必…

はてなブログでカテゴリーなどの記事の概要を省略する

はてなブログでは、記事を書くときに記事の概要が未入力だった場合、カテゴリーや月別アーカイブなどの記事の概要は、記事本文の冒頭から抜粋したものとなります。 その記事の概要が少し長かったので、JavaScript(jQuery)を使って指定文字数(100字)で省…

はてなブログでボックス全体にリンクを広げる

はてなブログのサイドバーの最新記事や関連記事、記事下の関連記事など、サムネイル画像の横にタイトル、その下にテキストがあるボックスで、それぞれ別々にリンクするのではなく、ボックス全体にリンクを広げてどこでもクリックできるようにしたい。 以前も…

はてなブログに画像で上に戻るボタンを設置する

このブログでは、はてなのアイコンフォントを使って「上に戻るボタン」を設置していましたが、少し飽きてしまったのと、コードをシンプルにしたかったので、画像でボタンを設置することにしました。 まずは、ボタンにする画像をはてなフォトライフなどにアッ…

はてなブログにスマートフォン用の上に戻るリンクを設置する

このブログには、「上に戻るボタン」を設置していて自分でもお気に入りなのですが、スマートフォンでブログを見るとボタンが邪魔だなーと思ったりしています。 そこで、スマートフォン用(レスポンシブデザイン)に「上に戻るリンク」を設置することにしまし…

はてなブログでMinimalismをフルカスタマイズしたブログ3つ

ここ最近は、まだブログをカスタマイズできるのでは?もっとブログを高速化できるはず、と思いながら、相変わらずブログのCSSを微調整したり、過去の記事をリライトしたりしていました。 このブログではMinimalismをカスタマイズして使っていますが、自分よ…

はてなブログの個別記事以外にページャの矢印をつけたい

はてなブログの個別記事のページャにはクラス名(pager-arrow)つきで矢印「«」「»」が表示されているのに、トップページやカテゴリ、月別アーカイブには矢印がなくさびしいので、カスタマイズして表示させてみます。 ちなみに、個別記事のページャ(前と次…

はてなブログの日付を日めくりカレンダー風にする

はてなブログのカスタマイズはやりつくした感があったのですが、検索ボックスをちょっとだけカスタマイズしてから、もう少しできるんじゃないかと、ネットを調べたり、過去の記事を書き直したり、ブログのCSSを調整したりしていました。 そして、次のブログ…

はてなブログの検索ボックスをちょっとだけカスタマイズ

はてなブログをかなり久しぶりにほんのちょっとだけカスタマイズしてみました。このブログの検索ボックス(検索窓)の角を少し丸くしただけですが。 (デザイン→カスタマイズ→「デザインCSS」にコードを入力) CSS /* サイドバーの検索ボックスの角を丸く */ .…

祝!はてなブログ2周年

このブログを書いてから2年が経ちました(はてなからのメールで気がつきました)。今年はまだ4本しか記事を書いていませんが、1ヶ月に1本書ければと思っているので...。(ブログをはじめたのは2018年の5月からですが、その頃の記事は削除しています) さて、…

はてなブログProを解約しました

このブログを有料版のProにしてから1年が過ぎましたが、最近では、月に数本しか記事を書いていないので、はてなブログProを解約して、無料版でブログを続けることにしました。 ブログに書きたいことはまだそれなりにあるのですが、Googleアドセンスのアカウ…

はてなブログだけを効率的に検索する(見つける)方法

はてなブログユーザーは、いい意味でも悪い意味でも個性的で、ほかのブログより良質な情報を発信している人が多いので、はてなブログだけを検索して情報収集したい。 はてなブログのおすすめ記事は、いつも同じブログばかりで参考にならないし、Googleやはて…

意外と簡単!Googleアナリティクスのマイレポート

このブログでは、Googleアナリティクスを利用しているのですが、はてなブログのアクセス解析でもアクセス数などを確認できるし、難しそうなのであまり活用できていません...。(今現在のアクセス数がリアルタイムで見られたりするので、わからないなりに楽し…

はてなブログのサイドバーの最新記事にもっと見るリンクを表示

はてなブログのサイドバーの最新記事に「もっと見る」リンクを表示できるようになりましたが、それはただの月別アーカイブへのリンクでした。 はてなブログ開発ブログ - 最新記事モジュールでもっと見るボタンを設定できるようにしました もともと、最新記事…

はてなブログのトップページにだけ別のアイキャッチ画像を表示

はてなブログでは、カテゴリーや月別アーカイブなどにアイキャッチ画像(記事のサムネイル)が表示されます。 画像がある記事では記事の最初の画像が、画像がない記事ではデフォルトのアイキャッチ画像、または記事を投稿するときに編集サイドバーで個別に指…

はてなブログでヘッダを消しても自分で見るときはヘッダを表示

ブログの表示を高速化するため、ブログにヘッダを表示しない代わりにはてなブログにグローバルヘッダーもどきを設置したのですが、自分のブログからはてなにログインしたり、購読ブログの新着やお知らせなどを確認できなくなって少し不便な思いをしています…

はてなブログの個別記事の日付をカレンダーにわかりやすく表示

はてなブログの月別アーカイブをリストからカレンダーに変更してからしばらく経ちますが、よくよくカレンダーを見てみると、個別記事の投稿月がカレンダーに反映されている(例えば、個別記事を2019年4月に投稿していたら、カレンダーの表示も2019年4月と表…

はてなブログで記事下の何日前を日付に変更

このブログでは、記事下のIDや投稿日を非表示にしているのですが、勉強がてら、それらをカスタマイズするコードを書いてみました。 JavaScript <script> document.addEventListener('DOMContentLoaded', function() { $('.updated').replaceWith(function() { var st</script>…

リンクの範囲を広げてクリック(タップ)しやすく

このブログの関連記事と注目記事をカスタマイズして、アイキャッチ画像(リンクテキスト)のリンクの範囲を広げてクリック(タップ)しやすくしてみましたが、汎用的な感じにできなかったので、コードは表示しません...。 例えば、次のような画像とテキスト…

このブログの「h2」タグと「h3」タグの見出し

このブログでは、ほとんどの記事で見出しを使っていないですし、見出しを使うような長文も書かないつもりですが、それでも、今後、見出しを使うような記事を書くかもしれないので、とりあえず、<h2>タグと<h3>タグの見出しを設定してみました。 <h2>タグの見出しはこんな</h2></h3></h2>…

はてなブログでソースコードをタイトル(言語名)付きで表示

はてなブログのカスタマイズを記事にするときに、HTMLやCSS、JavaScriptのソースコードを<pre>タグで囲んで表示しているのですが、その左上にタイトル(言語名)を表示してわかりやすくしてみました。 HTML編集を選択して、<pre>に続いて「<span class="box-title">タイトル</span>」と入力、必ず改行</pre></pre>…

コピペで簡単!はてなブログに上に戻るボタンを設置する

コピペだけで簡単に、はてなブログに上に戻るボタン(ページトップへ戻るボタン)を設置するコードを改めて書いてみました(今さらですが、一度やってみたかったのです)。 (次のコードをコピーしてデザイン→カスタマイズ→フッタに貼り付けます) <div id="page-top"> <a id="move-page-top"><i class="blogicon-chevron-up"></i></a> </div> <style> /* …

はてなブログのページ表示速度をチェック

都合により(一時的に?)、すべての広告バナーを撤去しました...。いい機会なので、代表的な3つの計測サイトで、ブログの表示速度を再確認してみました。今回は、素直にブログのトップページで測定しました。 PageSpeed Insights モバイル パソコン GTmetri…

はてなブログのデザインCSSの編集画面を大きくする

はてなブログのデザインCSSの編集画面は、ウィンドウが狭く文字も小さく使いづらかったのですが、Google Chromeの拡張機能を使って、大きく見やすくしたいと思います。 というか、Chromeの拡張(ユーザースタイルシート)でWebサイトやブログのデザインを変…

はてなブログに自作のフッタを設置した

はてなブログのフッタは、グローバルヘッダーと違って便利な機能などはありませんが、その分軽いので、フッタを消しても消さなくてもブログの表示にあまり影響はないかと。 ただ、フッタを表示すると、もれなく「はてなブログをはじめよう!」という開設リン…

はてなブログにグローバルヘッダーもどきを設置した

はてなブログのグローバルヘッダーは、はてなのログインや各サービスのアクセス、購読ブログの新着やお知らせなど、いろいろ便利なのですが、体感的に2~4秒くらい表示に時間がかかってしまうので、ヘッダを表示しないことにしました。 参考になるブログ・We…

「Test My Site」でモバイル向け表示をテスト

はてなブログのカスタマイズについてはもう書くことがなくなったと思っていたのですが、とあるブログで、自分のブログを話題にしてもらいまして。 その記事がGoogleのモバイルサイトのテストツール「Test My Site」のことだったので、今さらですが、このブロ…