カスタマイズCSS

簡単！CSSコピペでできる「マーカー」の設定 はてなブログの記事を作成するとき、本文を太字で強調したり、マーカー（蛍光ペン風の下線）を使って文字装飾したい時がありますよね。 CSSコードを使うと簡単に蛍光ペン風の下線（アンダーライン）の文字装飾を使えるようになりますよ。 「CSSってなに？」という人もいると思いますが、ご安心を。 この記事では、蛍光マーカー（蛍光ペンの下線）のCSSコードをコピペして、はてなブログの本文で文字装飾を簡単に利用できるようにしました。ぜひ参考にしてください。 ブログ記事の本文で「マーカー（蛍光ペンの下線）」を使うと、記事の表現の幅が広がって便利ですよ。 なお、文字に…

病院のSEとして10年以上働いている@whitefox21seです。 ▼Xで最新記事をツイートしてます。こちらもよろしくお願いします！ @whitefox21seをフォロー はてなブログで、カスタムしたHTMLやデザインCSSを間違って消してしまい、バックアップも取っていなかった…というミスをしたことはありませんか？ はてなブログにはこれらのソースコードを復元できる機能がないため、バックアップがなければ一からコードを書き直す必要があります。 私は以前「ヘッダ」のHTMLをいじろうとした際、間違えて「フッタ」を編集してしまい、保存してしまったため、青ざめたことがありました。バックアップを取ってい…

Google AdSense合格者９人目の方の部分でカスタマイズについて触れたので軽くご紹介！ ※リンクを貼るために作成しました（笑） 私が愛用しているHTMLカスタマイズ３選になります！ コピペで使える他のサイトもたくさんあるのでお好みのものをぜひ見つけてみてください！ オレンジ色枠 使用したい方は下記をコピペ！ 赤色枠 使用したい方は下記をコピペ！ テープ付き付箋 使用したい方は下記をコピペ！ 簡単使用方法説明 ①「使用したい方はコピペ」部分のコードをコピー ②「HTML編集画面」に移動 ③「HEML編集画面」に「貼り付け」 ④「編集みたまま」に戻る まとめ オレンジ色枠 ◆この記事はこん…

どうもしっくりこなかったのでデスクトップ版のブログヘッダーをカスタマイズしてみました。 デザインテーマはMinimalismをベースにしているよ。 赤丸部分をカスタム。 左側にブログタイトル、右側にグローバルナビゲーションへ、よくあるヘッダーになります。 HTMLは「デザイン」→「カスタマイズ」→「ヘッダ」→ブログタイトル下の空欄に記述したら反映されるようです。 とりあえずヘッダーを新たに追加。※コピペオッケーです <header class="header" id="header-wrap"> <h1 class="header-logo"> <a href="/"> <img src="任…

バナー（リンクなし） みなさん、こんばんは。ハテブカスタムです これを流したい→ 「はてなブログ初心者によるブログ初心者のためのブログ」 ←これを流したい バナー（リンクあり） これは宣伝→ 今月公開 絶賛上映中！ 【新着情報】お知らせテキストをここに入れてください！ こちらの記事を参考とさせていただきました。 web-dev.tech テキストが横に流れるCSSを使用して、ブログタイトル下の文字をスクロールさせてみたいと思います。以下がコードと説明です。 テキストが横に流れるCSSの実装方法: HTMLの適切な場所に以下のようなコードを追加します。ここでは、<div> 要素でテキストを囲み、…

少し前に「codocの投げ銭機能」を導入して、やっとデザインのカスタマイズもできたので、導入方法とカスタマイズ方法をご紹介します。 投げ銭機能の導入方法 codocですること はてなブログですること カスタマイズ方法 注意点【!importantは消さない】 (adsbygoogle = window.adsbygoogle || []).push({}); 投げ銭機能の導入方法 codocですること 【1】codocに登録する codoc | WEBメディアのためのコンテンツ販売サービス コードクにアクセスし、必要項目を記入して登録をする（スマホ・パソコン、どちらからでも利用可能）。【2】投…

更新日の表示（はてな公式設定） こんにちは。はてなブログも4年目のしゅーれいです。 はてなブログ公式から「記事の最終更新日を表示する」機能ができたと発表があったので、今までHTMLでいじっていたものを公式に変更してみました。 使っているテーマは「smooth」。 設定の仕方は以下のはてなブログヘルプのとおりです。 help.hatenablog.com 今までの更新日表示方法 HTML CSS 注意点：過去の記事更新には反映されない 今までの更新日表示方法 自分の過去の記事をもとに、今の更新日表示方法を確認。 ブログ初心者の人には、カスタマイズを記録しておくことを強くオススメします。 カスタマ…

このテーマの特徴 ソースコード このテーマの特徴 このHTMLテンプレートは、ブログ記事のアイキャッチをデザインするための、カスタマイズ可能なテンプレートです。主な特徴は以下の通りです。 1. カスタマイズ可能なデザイン カラーテーマ: ベースカラー、グラデーション、テキストカラー、アクセントカラー、アイコンカラーを :root の変数で定義しています。これにより、CSSの変更だけで簡単にデザインを変更できます。 カテゴリーによるカスタマイズ: body.category-{FirstCategory} を使うことで、カテゴリーごとに異なる背景グラデーションを設定できます。 コンテンツの丸み:…

このテーマの特徴 ソースコード このテーマの特徴 このHTMLテンプレートは、ブログ記事やウェブサイトのアイキャッチとして利用できる、スタイリッシュで視覚的に魅力的なデザインとなっています。以下に、テンプレートの特徴を詳しく説明します。 1. 視覚的な魅力 背景画像のぼかし効果: filter: blur(10px); を使用して、背景画像にぼかし効果をかけることで、コンテンツを際立たせ、視覚的な興味を惹きつけます。 オーバーレイ: 半透明の黒色のオーバーレイ (background-color: var(--bg-overlay);) を使用することで、背景画像を暗くし、コンテンツの視認性を…

目次の作り方から知りたい方はこちら takeosusume.hatenablog.com 今回は 目次のデザインの変更をしていきます💡 PC版画面よりデザイン→カスタマイズ→CSSタグ の順に開いていきます💡 CSSタグ部分をタップすると 書き込めるようになります💡 そこにCSSタグを貼り付けるのですが CSSタグをコピー出来るようにしてくれてる 『フジブロっ！さんのCSSタグ一覧』☜tap こちらでお好きなデザインをコピーして下さい💡 CSSタグをコピー出来れば もともと左側の数字１〜７に書かれているタグを消さないように ７の１番後ろにカーソルを合わせ改行します。 すると８が出来ます。もう一…

HTMLのテーブルのヘッダー設定方法とカスタマイズ HTMLでのテーブルヘッダーの設定 CSSによるヘッダーのカスタマイズ 固定ヘッダーの設定 レスポンシブデザインの考慮 ヘッダーに追加するスタイリング まとめ HTMLのテーブルのヘッダー設定方法とカスタマイズ HTMLテーブルのヘッダーを設定し、カスタマイズする方法について説明します。 ヘッダーはテーブルの最上部にあり、各列の内容を説明するための重要な部分です。 ここでは、基本的なヘッダーの設定から、スタイリング、固定ヘッダー、レスポンシブデザインまで幅広くカバーします。 HTMLでのテーブルヘッダーの設定 HTMLでは、テーブルヘッダーを…

10+ Online CSS Pattern Generators For Background 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 背景画像で使えるパターンを生成するジェネレーターを10+1選ご紹介します。 生成したパターンは画像のほか、CSSやSVGコードとして取得できます。 Magic Pattern: CSS Background SVG Backgrounds Hero Patterns Cool Backgrounds Bgjar Visiwig Animated CSS Background from wweb.de…

WEBデザインを学ぶ際、CSSは欠かせない要素の一つです。CSSを使いこなすことで、見栄えの良いウェブサイトを構築したり、ユーザビリティを向上させたりすることが可能です。 このガイドでは、WEBデザイナーのためのCSSコーディングに関する基本から最新のトレンド、効果的なテクニック、そしてレスポンシブデザインへの対応まで、7つのステップで詳しく解説します。CSSに関する疑問や質問に対する回答も含んでおり、初心者から上級者まで幅広く役立つ情報を提供しています。 さあ、一緒にCSSの世界を探索してみましょう。 【PR】Webデザイナーを目指す方におすすめのWebデザインスクール！ 副業・フリーランス…

ブログカスタマイズの第8回目です！ 今回は、ブログ記事でよく見かける「タイトル付きの囲み枠」の作り方を紹介します。 「タイトル付きの囲み枠」は、簡単にコピペで作れるとよく紹介されていますが、CSSを使わずにstyleプロパティを直接指定して作成する方法が一般的です。 しかし、この方法では、後でスタイルを変更したい場合に、一つずつ「タイトル付きの囲み枠」を変更する必要があります。 そこで、ここではCSSを使った「タイトル付きの囲み枠」の作り方と、本文の枠にタイトルの枠をどのように重ねているかを解説します。 それでは、早速やっていきましょう！

はいどうも、べんがらでございます。 はてなブログのデザイン（テーマ）をいろいろ変更していたのですが、ようやく納得いく形になってきました。 せっかくなので、CSSも公開します。反映されないで困っている方は、コピペで同じデザインにできます。できなかったらすみません。 （※PC版についての内容です。スマホ版には反映されていません） はてなブログのテーマをカスタマイズ CSSをコピペできます それぞれのコードについて ブログをカスタマイズできると楽しい

こんにちは ご訪問ありがとうございます。 今回の記事では、はてなブログのヘッダー画像上部余白がchromeの検証機能で消す事が出来たので手順をまとめておきたいと思います。 (adsbygoogle = window.adsbygoogle || []).push({}); 参考にさせて頂いた記事はこちらです。↓ ↓ ↓ saruwakakun.com 目次 操作手順 問題箇所発見！ ＣＳＳ書き替え前後の確認 まとめ (adsbygoogle = window.adsbygoogle || []).push({}); 操作手順 ①問題が発生しているヘッダー画像上部余白付近にカーソルを持って行き、…

はてなブログ × codoc｜有料記事のデザイン変更こんにちは、シンプルライフナビです。はてなブログは、codoc（コードク）との連携により有料記事の販売 が可能です。そして、実際にかなりの人が、記事の有料販売を始めています。ところで、簡単に有料記事の掲載ができる、codocのボタン表示をカスタマイズする方法を知りたい人もいるのではないでしょうか？例えば、 codocの標準ボタンの色（青）がダサい codocボタンの色をブログのイメージカラーに合わせたい codocボタンの表示文字の大きさを変更したい などなど。 codocのボタンの色をカスタマイズ CSSやHTMLが多少わかるようになると、…

参考にしたサイト 説明だったり CSS一覧 ネタバレ文字を黒くする ネタバレ画像を黒塗りにする ネタバレ画像をぼかす ネタバレ文字をぼかす 参考にしたサイト 【黒塗り・ぼかし】ネタバレ伏せにコピペで使えるHTML/CSSコード2種 | 創作・同人サイト制作支援サイト do まとめラボ - 論理と心理 説明だったり ぼかし画像とか黒海苔画像とかぼかしを使いたかったので、CSSで再現してみました コピー＆ペーストで利用できると思います、カスタマイズCSSに入れてください 記述したい部分にHTMLの部分を入れてください はてな記法で動作確認済みです、HTML記法だともうちょっと隙間とかできなくなるん…