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

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

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

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

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

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

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

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

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

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

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

このブログでは、記事下のIDや投稿日を非表示にしているのですが、それらをカスタマイズする記事がおもしろそうだったので、試しにやってみました。 攻めは飛車角銀桂守りは金銀三枚 - はてなブログで記事下の投稿からの経過日数を投稿日に変更する方法 でも…

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

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

このブログの「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」のことだったので、今さらですが、…

はてなブログを高速化するための4つのこと

はてなブログを高速化するためにおこなった、大きくわけて4つのことについて、まとめておきます。なお、ブログのページの表示速度を改善するために一番効果があるのは、画像を最適化(圧縮)することだと思います。あとは使わない機能を無効にすることでしょ…

はてなブログのAmazonと楽天の商品カードにアイコンを表示

はてなブログでは、標準でAmazonと楽天の商品を紹介できる機能があるのですが、以前にはてなブログの引用デザインをはてな純正アイコンでカスタマイズしたときのコードを応用して、Amazonと楽天の商品カードの右下にそれぞれのアイコンを表示してみます。 ※ …

はてなブログのデザインテーマコンテストを応援します

はてなブログでデザインテーマコンテストが開催されていますが、テーマの作者として参加はできないので、いいな!というテーマに☆をつけて応援したいと思います。 今さらなぜこの話題かといえば、はてなブログからコンテスト開催のメールが届いたから。 過去…

はてなブログの読者になるボタンをカスタマイズして設置

最近になって、このブログにもこっそり「読者になる」ボタンを設置しましたが、ボタンがなくても、読者になってくれた人がいましたので、ボタンはただの飾りみたいなものです。 通常は、ブログ管理画面の詳細設定ページで、「読者になる」ボタンのHTMLコード…

はてなブログの関連記事をカスタマイズしてシンプルに表示

ここ数日、個別記事ページのページャをカスタマイズしていたのですが、細かいところで、どうしても納得できない部分が出てきてしまって、結局、あきらめてしまいました...。 そして、個別記事のページャはあまり使われていないと(勝手に)判断して、CSSで非…

はてなブログの引用デザインをはてな純正アイコンでカスタマイズ

以前に、はてなブログの引用デザインを画像でカスタマイズしたのですが、はてなの純正アイコンにある引用符のアイコンをなんとか利用できないかといろいろやってみました。 参考になるブログ・WebサイトZENO-TEAL - カスタマイズに便利な、はてなブログで使…

はてなブログのサイドバーの最新記事にNEWマークを表示

このブログでは、サイドバーの最新記事のリンクに、はてな純正アイコンを表示させているのですが(はてなブログのサイドバーの最新記事にアイコンを表示)、それでもまださびしい感じがするので、新着記事にNEWマークを表示させてみることにしました。 まず…

はてなブログのサイドバーの最新記事にアイコンを表示

このブログでは、サイドバーの最新記事の一覧をテキストリンクで表示させています。サムネイル画像をつけたり、概要を表示させたり、いろいろと試してみたのですが、画像とテキストのバランスが悪い気がして、結局、シンプルな表示に戻してしまいます...。 …

はてなブログの引用デザインを画像でカスタマイズ

このブログでは、ほかのサイトやブログからなるべく引用しないようにしています。引用ばかりに頼って、引用だらけになってしまっても困るので...。 最近は、引用したほうがわかりやすいときは、素直に引用するようになりましたが、引用のデザインがシンプル…

はてなブログの個別記事ページに文字数を表示

別ブログ(Seesaaブログ)でGoogleアドセンスに16日で合格!する前に、いろいろなブログで見たのですが、1記事につき、最低でも1000文字以上は書かなければいけないと...。 それなら、このブログの1記事あたりの文字数はどれくらいなのかということで、個別…

はてなブログの月別アーカイブをリストからカレンダーに変更

このブログでは、月別アーカイブの表示形式をずっとリストにしていましたが、カレンダーに変更しました。ブログを書いていない(さぼった)日をわかりやすくするためです。 ただ、カレンダーの見た目がいまひとつだったので、CSSでカスタマイズしました。 (…

はてなブログでふい字を使ってみるテスト

はてなブログでふい字(漢字も使える手書き風の日本語フォント)が使える(はてなブログに組み込まれている)ことを知ったので、ためしにこの記事で使ってみました。 FOXISM - はてなブログでふい字が使えたのでメモ風cssを作ってみたを参考に、メモ風cssで…

「前のページ」に戻るボタンなんかいらない

はてなブログのカテゴリーや月別アーカイブには、前のページに戻るリンクがあるのに、トップページにはないので、はてなブログに「前のページ」ボタンを設置する(jQuery)をつくったのですが、前に戻るリンクよりもブラウザの戻るボタンを使うことのほうが…

はてなブログの<h1>タグをjQueryで書き換え

はてなブログでは、ブログタイトルと記事タイトルにタグが使われていますが、個人的には、ひとつのページにタグがふたつあるのはおかしい気がしています...。 トップページ:ブログタイトルが大事なので、記事タイトルは個別記事ページ:記事タイトルが大事…

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

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