2019.09.12はてなブログのトップページに施したカスタマイズをまとめました。できる限りオシャレっぽく、はてなブログ感を薄める感じのコンセプトです。今の当サイトのトップページはこんな感じです。目次トップにおすすめ記事を表示htmlcss新着記事の見出しを追加サイドバーを非表示にナビゲーションメニュートップにおすすめ記事を表示トップページにおすすめの記事を固定表示しています。はてなモジュールを使って人気記事やブックマーク数が多い記事を表示することもできますが、サイトが重くなるのが嫌なのでhtmlにしました。人気記事を自動表示したい場合は「はてなブログで人気記事を任意の場所に表示する方法」も合わせて参照してください。読んでほしい記事や、アナリティクスで調べた人気記事を載せると良いと思います。htmlトップページに記事を固定表示するhtmlです。下記の例では6件表示しています。お好みで修正してください。私のサイトではアイキャッチに文字を入れているので、タイトルは省きました。シンプルな画像を使っているサイトでしたら、画像の上にタイトルを重ねてもおしゃれです。/></div></a></div></div>csscssのポイントとしては、recommend-wrapを非表示にして、page-index(トップページ表示時にbodyに設定されるクラス)のときに表示させることです。どのページにどのクラスが設定されるのかは「はてなブログでページによって異なるコンテンツを表示する方法」を参照してください。あとは画面幅によって3列→2列→1列と変化していく点や、マウスオーバーで画像が拡大される装飾も付けました。新着記事一覧の上部にも、おすすめ記事とお揃いの見出しを付けました。下記のcssを追加すると表示できます。2px;}サイドバーを非表示にこのサイトはスマホからのアクセスが7割を超えていることもあり、サイドバーを廃止しました。私自身があまりサイドバーを見る習慣がないという理由もあります。サイドバーを非表示にするには下記のcssを追加します。#wrapperの部分はテーマによって変わるかもしれません。これはUnderShirtの例です。auto;}ナビゲーションメニューナビゲーションメニューの実装については別の記事に書いています。「ハンバーガー廃止⇒画面幅でメニュー数が増減するナビゲーション」を参照してください。コピーニケッチャニケッチャメモ関連記事ブログ運営はてなブログで人気記事を任意の場所に表示する方法はてなブログではサイドバーだけではなく、記事の下やトップページのなどに人気記事(注目記事)を表示したい場合があると思います。この記事で紹介するコードをコピペすれば、簡単に好きな場所に人気記事を表示できます。はてなブログで人気記事を表示する...ブログ運営はてなブログのURLからentryの文字を消す方法はてなブログのURLはドメイン/entry/日付(もしくはカスタムURL)という構成になっています。今後はてなブログから別のブログへ移転する可能性がある場合、この「entry」が邪魔になってしまうことがあります。はてなブログに移転してき...ブログ運営UnderShirtカスタマイズ-インフィード広告を表示するはてなブログのテーマ「UnderShirt」でインフィード広告を馴染ませるためのcssを紹介します。インフィード広告を貼る方法は「はてなブログにインフィード広告と記事内広告を自動で貼る方法」を参照してください。インフィード広告を馴染ま...ブログ運営はてなブログでページによって異なるコンテンツを表示する方法はてなブログのトップページだけに表示したい情報がある場合や、記事ページだけに設定したいcssがある場合などに役立つ情報です。はてなブログでは、記事一覧ページには「page-index」、各カ...ブログ運営はてなブログにインフィード広告と記事内広告を自動で貼る方法Googleアドセンスの記事内広告とインフィード広告の貼り方を紹介します。はてなブログで記事内広告やインフィード広告を挿入するには、スクリプトを使う必要があります。ゲーム、読書、食べることや自然と触れ合うことが好きです!楽しいことや美味しいものの情報を発信していきたいと思います。Twitterではブログ運営に役立ちそうな情報をツイートしてます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。ニケッチャメモ.メニューゲーム読書ブログ運営プロフィールホーム検索トップタイトルとURLをコピーしました。