バンビの初心者ブログ教室

私がブログ運営で月間10万円稼いだ方法を教えます!

HTML-CSS-デザイン

【初心者向け】はてなブログのカスタマイズや設定手順、コピペでできるコードなど〜まとめ〜

「はてなブログ」のカスタマイズ方法や設定の手順をまとめました。 (別ブログからの順次記事移行中です…しばしお待ちを。リンクがあるところは読めます。) はじめに はてなブログ・コピペでできるカスタマイズ はてなブログのサービスについて ブログを書…

【2021年7月】はてなブログの右上の「読者になる」ボタンを非表示にする方法

「はてなブログ」あけたら、なんか右上に「読者になる」ボタンが表示されてて、デザインも崩れるし、若干ウザい。 右上のこれ↓ これは何かのバグ??とりあえず、いらないんですけど… と思って非表示にする方法を掲載しましたので、ご参考にしてくださいね(^…

【はてなブログ】目次のカスタマイズ おしゃれにかっこよく!(コピペで簡単&解説付き)

「はてなブログ」は、クリックひとつで目次を挿入してくれる便利な機能がありますよね! ↓↓これです。 でも、この目次って少し見にくくありませんか???テーマにもよりますが… デフォルトこんなの↓ そこで!はてなブログの目次をかっこよく&オシャレに&…

はてなブログ目次を自動で開閉式にする方法 - jQuery コピペOK(目次の表示/非表示切り替え)

はてなブログの目次のカスタマイズ★についてはこちらで解説していますが、今回はjQueryを使って自動で開閉式にする方法です。開閉式とは、↓↓これです! このカスタマイズの特徴 1)どのテーマでも大丈夫! 2)自動的に開閉式にできる! 目次の表示切り替え…

はてなブログ目次をCSSだけで開閉式にする方法 コピペOK(目次の表示/非表示切り替え)

はてなブログの目次のカスタマイズ方法はこちら★で解説していますが、 今回は目次を開閉式にする方法です。 ↓↓これです! この記事の目次 このカスタマイズの特徴 1)どのテーマでも大丈夫! 2)記事によって決められる! 目次の表示切り替えのコード(CSS…

【はてなブログ】ヘッダー下におすすめ記事やアイキャッチを並べて表示するカスタマイズ方法

自分のブログを訪れてくれた人に読んでもらいたい「おすすめ記事」をトップページのヘッダー下に表示する方法です。 ブログは日々新しい記事が更新されるので、読んでもらいたいイチオシ記事も埋もれてしまいがちです。★★「はてなブログ」では、トップページ…

スマホのボトムメニューCSSコピペでOK!【レスポンシブ】フッターメニュー、ボトムナビゲーションでアクセスUP!

スマホ用のフッターに固定する「ボトムメニュー」のCSSを紹介します。HTMLとCSSをコピペするだけで出来るので、ぜひ試してみてください。「レスポンシブ」にする方法は、PCの時は表示しない↓↓をご覧ください♪♪ ボトムに張り付く固定メニューバーの設置方法 …

iPhone Xのセーフエリアとは?表示が画面下のホームバーと被る時の対処法(CSSのみで対応可)

★今回はブログやサイトのiPhone X 画面の対応に関して★ CSSで画面の被りを解消する方法 「iPhone X」の画面の構造 セーフエリアの考え方 ①METAタグで「セーフエリアあるよ」と教える! ②次も簡単!CSSでセーフエリアまで底上げすれば良い はてなブログの人は…

【レスポンシブ】固定グローバルナビゲーションの設置方法 | コピペで簡単!ブログのアクセスが倍増!

画面上部に固定するグローバルナビゲーションのCSSとHTMLを公開しています。常にユーザーの目に入るところに設置することにより、回遊率やユーザビリティが向上し、SEO対策にも有効です。 階層メニューにも対応。CSSのみで動いているので作動も重くならずス…

名前変換「ドリーム小説」コード★無料&簡単コピペでOK!ページ上で文字列を置き換えるスクリプト[ javascript ]

自作の名前変換小説などに使える簡易スクリプトを紹介します♪♪ ページ上で任意の文字列を入力してもらい、元々の文字列からそっちに変更できるって言う、名前変換小説などに使えるスクリプト。 私の文章力では説明が難しいので実際に見てもらおう↓↓ テストし…

特定のページだけにCSSを適用する方法★body内にstyleでCSSを直接書き込むことはできる?!

自分用の備忘録です。色々調べても、あまりコレ!っていう記述が見つからなかったので、誰かのお役に立てればと思いこちらに公開します♪♪ <body>内に<style>~</style>を書いて、その中に直接CSSを記述できるか? 通常はCSSは<head>内に記述するか、外部から読み込む 特定のページにだけC</head></body>…

スマホ画面下に固定表示「ボトムナビゲーション」の設置方法@はてなブログ「Palette(パレット)」

2018/11/29 こちらの記事では、スマホ画面のボトムに常に表示するグローバルメニューのカスタマイズ方法を紹介しています。設置すると回遊率、アクセス数のアップが期待されます。コピペで簡単にできます!

画面トップに固定のグローバルナビゲーション@はてなブログテーマ「Palette(パレット)」

こちらのグローバルナビゲーションは、はてなブログのテーマストアに公開されているオリジナルのテーマ「Palette(パレット)」のカスタマイズです。 テーマを使ってない方は↓↓でCSSを公開してますので参考になさってください♪♪ コピペでOK!画面上部に張り…

【はてなブログ】ヘッダーに画像を貼る方法(余白なし横幅、画面いっぱいに表示)

ヘッダー画像を画面の横幅いっぱいに表示したい場合のやり方。1280px以上またはそれ以上の画像を用意する。 ダッシュボード→デザイン→カスタマイズ→一番上の「背景画像」から変更する。 (注)「ヘッダ」からではないので注意すること! 2018/12/04 - 追記 …

【はてなブログのテーマ作成する方法】素人がテーマを制作するにあたって色々と参考にしたページ一覧!SPECIAL THANKS TO ALL❤︎

全くの素人がテーマを作成して公開するまでに色々とお世話になったサイトたちです❤︎ テーマを作りながら、その都度、参考にしたページを追加しているので、基本的なこと〜マニアックなことまで、きちんと整理ができていなくて、キーワードの羅列など少し読み…