はるなぴログ

ブログ・WEBサイト作成技術研究

はてなブログカスタマイズ

はてなブログでコードブロックをコンソール風(背景色が黒)にするCSSカスタマイズ

はてなブログテーマInnocentでコードブロックの背景を黒にするCSSカスタマイズを紹介します。 はてなブログテーマInnocentのカスタマイズを行うことでコンソール風の表示を狙います。 マークダウン記法で記事を書いていますが、このカスタマイズ方法のお陰で…

はてなブログテーマInnocentにナビゲーションバーを設置する

はてなブログにナビゲーションバーを設置する方法について備忘録として書いておきます。 本記事はいったん削除していたのですが今でも一定のアクセスがあります。ナビゲーションバー設置でお困りの方にNot Found表示では申し訳ないので復活させました。 はる…

はてなブログでサイト内検索をしやすくするカスタマイズ(Googleアナリティクス連携)

はてなブログでサイト内検索をしやすくするカスタマイズ方法を紹介します。 PC版ではサイドバー上部に検索窓を移動します。またスマホでもページ上部にサイト内検索できるウィンドウ枠を設置します。 更にGoogleアナリティクスとも連携して読者がどんな内容…

【コピペは危険】プライバシーポリシーの書き方とはてなブログでの設置方法

プライバシーポリシーをコピペで作ろうとしていませんか? 雛形やテンプレートを提供してコピペOKとしているサイトもありますがプライバシーポリシーの丸コピーは危険だと、はるなぴは考えています。 その理由は2つあります。コピペが危険だという理由を含め…

はてなブログにヘッダー画像を設定する方法で苦労した話(余白、はみ出し)

はてなブログにヘッダー画像を設置しようとしたら思った以上に苦労した経験を備忘録として書いておきます。 何に苦労したかというとヘッダー画像のサイズが合わなかったこと。余白が合わないとかパンくずリストから下にヘッダー画像がはみ出してしまったりと…

お問い合わせフォームの作成と設置方法

お問い合わせフォームの作成と設置方法について備忘録として書いておきます。 Google Adsenseやアフィリエイトをするならお問い合わせフォームは必須ですね。将来のことを考えて早めにお問い合わせフォームを設置するのがお勧めです! Google Formを利用して…

CSSだけでtableを見やすく表示するカスタマイズ方法

CSSだけを使ってtableを見やすく表示するカスタマイズ方法を備忘録として書いておきます。 スマホ表示もレスポンシブ対応を含めて考えていきます。 tableを見やすくするためにテーブルセルに枠線をつけます。さらにヘッダ領域に背景色をつけ、何を比較してい…

ファーストビューを意識してブログをカスタマイズする

ファーストビューとはサイトが表示されたときに訪問者が一番初めに目にすることのできる領域のことを指します。 スクロールせずに見ることができる範囲と言ってもいいでしょう。 今回はファーストビューを意識してブログをカスタマイズする方法について考え…

はてなブログテーマInnocentに色の統一感を出すカスタマイズ

はてなブログテーマInnocentは素のままではとてもシンプルです。 もともと自分でCSSをいじってカスタマイズすることを前提としたテーマなのです。今回は、はてなブログテーマInnocentに色の統一感を出すカスタマイズを施していきます。 はてなブログテーマIn…