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

基本的な設定は前回記事まででできたかなと思います。 見たい方は以下をクリック。 はてなブログで最初にやっておくべき初期設定〜基本設定と詳細設定〜 - まだ大阪で消耗してます。 続・はてなブログで最初にやっておくべき初期設定〜詳細設定を詰める〜 - まだ大阪で消耗してます。 はてなブログの公開設定を後悔しないように設定する - まだ大阪で消耗してます。 はてなブログ設定のaboutページ編集について - まだ大阪で消耗してます。 何だかんだと記事を書いているうちに多少はてなブログにも慣れてきた感じがあります。 このままはてなブログが親兄弟以上の存在になるように日々やっていきたいなと思ってます。

ブログテーマを変えました はてなブログ使ってない人からしたら「何の話？」って感じだと思うのですが、ブログのデザインを変えました。 何で急にそんな面倒なことをしたかというと、2月14日に急にブログが開かなくなったのです。 いや、正確に言うとパソコンからは時間をかければ見れる、スマホからは真っ白な画面になるだけでいつまで経っても開かないという具合です。原因は不明。 私はこういうことがまったくもって得意ではないので、ひたすらGoogleで調べつつ、ブログが重くなりそうなHTMLやCSSは片っ端から削除。いろいろと調べていくうちに私が使用していたブログテーマ「DUDE」は重い、と書いてある記事を見つけ…

このサイトの上部にはグローバルメニューが固定で設置してあるのですが(PCサイズのみ)、一つ悩みが。 それは目次から見出しに飛ぶとき。 見出しがメニューバーに隠れて見えなくなってしまうのです。 しょうがなくh3タグのpaddingを多めに取ったりしていたのですが… あっさりCSSのみで解決できたのでご紹介します。 参考サイト: ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック | コリス コピペするコード はてなブログのカスタマイズから、デザインCSSにこれを貼り付けるだけ。 html {scroll-padding: 50px;} 要素がどこまでスクロールされるかを指…

トップページをブログカード式にするには、記事一覧表示を選択しないとできないらしい。つまり、無料ブログでは、基本的にカード式表示はできないということになる。しかし、無料ブログでもトップページをカード式に表示させる裏技があったのだ。👇こちらのブログ、カスタマイズが凄いな～と思って拝見していたのだけど、無料ブログでもトップがカード式になっている。 無料ブログでは、トップページを一覧形式にする選択はできない。それでは、どのように記事を一覧表示させるのか。その裏技は意外と単純で、トップページからアーカイブ（記事一覧表示ページ）に強制的に飛ばしてしまうというやり方だった。なので、無料でカード式表示のブログ…

⬆️画像だよ クリックで拡大⬆️レスポンシブデザインに対応しているはてなブログのデフォルトの公式テーマ「Smooth」を使ったブログの表示がiPhoneで見ると横揺れがするのでCSSを見てみたら、犯人がちゃんといるじゃあ、ありませんか笑。 entry-footer-adというclassの左右のマージンがネイティブマージンになっていたのだ。⬇️画像だよ 横揺れの根本的な原因はこれ⬇️ なんでネイティブマージンでデザインをととのえたのか理由はわからないけど、とりあえずCSSを修正。 (max-width: 767px) { .entry-footer-ad { margin-left: 0; ma…

↑こんな感じになります↑ レスポンシブデザインに対応しているはてなブログのデフォルトの公式テーマ「Smooth」のサイドバーのアイキャッチ画像を右側に表示してみました。 システム側のblog.cssでアイキャッチ画像をfloat:left;で、左側に寄せているので、float: right;に書き換えて、marginを調整するだけです。 floatを使ってますがシステム側のblog.cssで回り込みの解除(clear fix)はやってくれるので、CSSの記述はこれで良しとします。 自分用の備忘録としてCSSのソースコードを残しておく。 使う方はお好きなのをデザイン→カスタマイズ→デザインCSS…

↑上の画像が表示結果だよ↑ ベーシックなデザインで最も利用者の多いオフィシャルテーマ「Epic」。 レスポンシブデザインに対応してないのでレスポンシブデザインにするCSSの追加コードを作りました。 公式テーマ「Epic」専用のCSSになります。 他のレスポンシブデザインに対応してない公式テーマでは使えません。 自分用の備忘録としてCSSのソースコードを残しておく。 ↓使う方はデザイン→カスタマイズ→デザインCSSに以下のコードをコピペでどうぞ↓ /* EpicをレスポンシブデザインにするCSSコード */ /* Add Responsive design CSS for Theme Epic …