はるなぴログ

WEBサイト作成技術研究

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

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

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

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

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

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

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

見出しを見栄えよくするCSS設定

見出しを見栄えよくするCSS設定を備忘録として書いておきます。 はてなブログテーマInnocentを使っています。InnocentはCSS編集をして自分好みに改造することが前提で作られています。 Innocetデフォルトの見出しは、ただ単にフォントサイズが大きくなっただ…

ブログの文字が小さすぎなのでフォントサイズをCSSで大きくしてみた

はてなブログのテーマのフォントサイズって小さいものが多いと思いませんか? はるなぴはどうも小さすぎるように思うのでCSSカスタマイズで大きくしてみました。 今回はブログの読みやすさについても深堀りして考えてみました。 一行の文字数とフォントサイ…

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

はてなブログテーマInnocentにナビゲーションバーを設定する方法について備忘録として書いておきます。 はるなぴのサイトを例に具体的なHTMLを載せてありますので是非ご参考にしてみてください。分かりやすい記事を心がけて書きました。 ナビゲーションバー…

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

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

はてなブログProで独自ドメイン取得するときに注意するべきこと

はてなブログProで独自ドメイン取得するときに注意するべきことについて備忘録として書いておきます。 はてなブログを無料版からProにした後すぐにお名前ドットコムで独自ドメインを取得しました! ついに自分の土地を持ったという感じです!ドメイン名はhal…

Zenbackがhttps化非対応(混在コンテンツ)らしく止めるかどうか迷う話

Zenback(ゼンバック)というブログパーツサービスを利用しているのですが、https化(常時SSL化)に対応していないため混在コンテンツとなっており止めるかどうか思案中です。 Zenbackには拡散効果があるという話もあり、導入を止めるかどうかは判断が難しい…

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

はてなブログテーマInnocentでコードブロックの背景を黒にするCSSカスタマイズを紹介します。背景を黒、文字色を白にすることによってコンソール風の表現を狙います。 はるなぴはコンソール表示がいちばんプログラミングしている感じが出ていて好きです。 In…

斜体(イタリック体)による強調は日本語には合わない

英文など欧文をたくさん使う記事がなく日本語の記事がほとんどを占めるサイトの場合、斜体(イタリック体)で強調表示を行うのは考えものです。 はてなブログで強調表示の表現をCSSカスタマイズしてみます。 はてなブログテーマInnocentの強調表示 斜体(イ…

はてなブログに外部CSSを当てる方法とそのメリット

はてなブログに外部CSSファイルをリンクする方法を備忘録として書いておきます。 ポイントはドロップボックスなどの共有フォルダにCSSファイルを置いてリンクを張るという点です。最近はこうしたサービスもhttps化されていますので、はてなブログのhttps化に…

はてなブログテーマInnocentのデフォルト表示を見た感想

はてなブログのテーマInnocentを使っています。 テーマストアで見るとInnocentは人気順の3位に入っています。この前の記事でデフォルト表示をいろいろと確認してみました。しかしCSSをカスタマイズしていくと記事の見栄えも変わってしまいます。 覚えている…

Innocent(はてなブログテーマ)の表示を確認する

はてなブログのテーマInnocentを使っています。Innocentは非常に人気の高いテーマで2018年6月現在人気順位3位です。 非常にシンプルなテーマのInnocentが、プレーンな状態ではHTMLがどのように表示されるか確認してみます。 見出し(Header) 見出しレベル3…