HTML-CSS-デザイン
ブックマークレットで「はてなブログ風ブログカード」を取得して使っている方は多いと思うのですが、なぜか昨日から突然作動しなくなってしまい困っていました。ネットを見ると他にもそのような方がいるようでしたので、ひとまず私がたどり着いた解決方法を…
「はてなブログ」のカスタマイズ方法や設定の手順をまとめました。 (別ブログからの順次記事移行中です…しばしお待ちを。リンクがあるところは読めます。) はじめに はてなブログ・コピペでできるカスタマイズ はてなブログのサービスについて ブログを書…
「はてなブログ」あけたら、なんか右上に「読者になる」ボタンが表示されてて、デザインも崩れるし、若干ウザい。 右上のこれ↓ これは何かのバグ??とりあえず、いらないんですけど… と思って非表示にする方法を掲載しましたので、ご参考にしてくださいね(^…
「はてなブログ」は、クリックひとつで目次を挿入してくれる便利な機能がありますよね! ↓↓これです。 でも、この目次って少し見にくくありませんか???テーマにもよりますが… デフォルトこんなの↓ そこで!はてなブログの目次をかっこよく&オシャレに&…
はてなブログの目次のカスタマイズ★についてはこちらで解説していますが、今回はjQueryを使って自動で開閉式にする方法です。開閉式とは、↓↓これです! このカスタマイズの特徴 1)どのテーマでも大丈夫! 2)自動的に開閉式にできる! 目次の表示切り替え…
はてなブログの目次のカスタマイズ方法はこちら★で解説していますが、 今回は目次を開閉式にする方法です。 ↓↓これです! この記事の目次 このカスタマイズの特徴 1)どのテーマでも大丈夫! 2)記事によって決められる! 目次の表示切り替えのコード(CSS…
自分のブログを訪れてくれた人に読んでもらいたい「おすすめ記事」をトップページのヘッダー下に表示する方法です。 ブログは日々新しい記事が更新されるので、読んでもらいたいイチオシ記事も埋もれてしまいがちです。★★「はてなブログ」では、トップページ…
スマホ用のフッターに固定する「ボトムメニュー」のCSSを紹介します。HTMLとCSSをコピペするだけで出来るので、ぜひ試してみてください。「レスポンシブ」にする方法は、PCの時は表示しない↓↓をご覧ください♪♪ ボトムに張り付く固定メニューバーの設置方法 …
★今回はブログやサイトのiPhone X 画面の対応に関して★ CSSで画面の被りを解消する方法 「iPhone X」の画面の構造 セーフエリアの考え方 ①METAタグで「セーフエリアあるよ」と教える! ②次も簡単!CSSでセーフエリアまで底上げすれば良い はてなブログの人は…
画面上部に固定するグローバルナビゲーションのCSSとHTMLを公開しています。常にユーザーの目に入るところに設置することにより、回遊率やユーザビリティが向上し、SEO対策にも有効です。 階層メニューにも対応。CSSのみで動いているので作動も重くならずス…
自作の名前変換小説などに使える簡易スクリプトを紹介します♪♪ ページ上で任意の文字列を入力してもらい、元々の文字列からそっちに変更できるって言う、名前変換小説などに使えるスクリプト。 私の文章力では説明が難しいので実際に見てもらおう↓↓ テストし…
自分用の備忘録です。WordPressやはてなブログなどブログサービスで、特定のページだけにCSSを反映する方法です。色々調べても簡単な方法が見つからなかったので、誰かのお役に立てればと思いこちらに公開します♪♪ 投稿や記事の中(bodyの中)に直接CSSを記…
2018/11/29 こちらの記事では、スマホ画面のボトムに常に表示するグローバルメニューのカスタマイズ方法を紹介しています。設置すると回遊率、アクセス数のアップが期待されます。コピペで簡単にできます!
こちらのグローバルナビゲーションは、はてなブログのテーマストアに公開されているオリジナルのテーマ「Palette(パレット)」のカスタマイズです。 テーマを使ってない方は↓↓でCSSを公開してますので参考になさってください♪♪ コピペでOK!画面上部に張り…
ヘッダー画像を画面の横幅いっぱいに表示したい場合のやり方。1280px以上またはそれ以上の画像を用意する。 ダッシュボード→デザイン→カスタマイズ→一番上の「背景画像」から変更する。 (注)「ヘッダ」からではないので注意すること! 2018/12/04 - 追記 …
全くの素人がテーマを作成して公開するまでに色々とお世話になったサイトたちです❤︎ テーマを作りながら、その都度、参考にしたページを追加しているので、基本的なこと〜マニアックなことまで、きちんと整理ができていなくて、キーワードの羅列など少し読み…