デザインCSS

自分で作成したブログデザイン(デザインCSS)を確認してみましょう。 ブログをすでに公開されている方は、確認用のブログを作ることをおすすめします。

「はてなブログタグ」が付けられるようになって少しだけ変更したことの備忘録です。 どれもデザインCSSに張り付けています。 トップページの「はてなブログタグ」を非表示にしたい ブログのトップページを一覧形式にしています。 「はてなブログタグ」を記事に付けてみたら、トップの記事概要欄にも表示されました。 ここにはなくてもいいかなぁ、、、と消すことにします。 .archive-entry-tag {display: none;} 現在このブログは、スター、はてなブックマーク、カテゴリーもトップページの一覧には載せていません。 あと、個別の記事のページ上のカテゴリーも表示させないようにしてみました。 …

前回、はてなブログの記事編集について 文字装飾が少ないのでマーカーをつけられるようにする記事を書きました。 今回は、記事タイトルに帯をつけたいと思い、調べてみました。 やりたかったこと 文字サイズを少し小さく 背景色をつけたい 丸枠の帯をつけたい 開業したときに少し間隔を開けたい 完成はこんな感じです。 ---------------------------------------- Before ----------↓---------- After ---------------------------------------- 編集する場所は、 ダッシュボード → デザイン → スパナマ…

どうも！LSSです！！ CSS、いじくりだすと楽しいですねｗ 前回、前々回と「コメントボタン」をカスタマイズしていましたが、今回は「コメント欄にいただいた、ひとつひとつのコメント」をCSS装飾してみました！ サンプル コード 解説 コメント欄全体を囲もうとしてたのに サンプル ↑こんな感じにコメントが表示されるようにしてみました。 なお、引用させていただいたのはギャクバリ(id:minimalist_gyakubari)さんから、昨日の記事にいただいたコメントです。 このコメントを読んでLSSが思ったのは「コメント欄全体を枠で囲むようなデザインにすれば、コメントボタンがはてなブログ標準のコメン…

ブログをはじめてみたいけどnoteはなんだか信用できないな…と思っている人へ はてなブログが良いですよ 私ははてなブログが好きなのではてなブログ以外のことはよく知らないのですが、はてなブログ(無料)でもできるカスタマイズについて書いていきます。 CSSカスタマイズ デザインテーマを利用する フォントサイズを変更する 改行幅を狭くする 見出しのデザインを変更する 引用のデザインを変更する 商品紹介リンクをカスタマイズする アフィリエイト / 解析ツール Google AdSense Amazon Associates Google Analytics 考察 CSSカスタマイズ はてなブログ(無料…

私が現在使用しているのは、無料版はてなブログで、テーマは「UnderShirt」です。 以前のテーマは「Afternoon」でしたが、トップページをカード型にするためにテーマを変更しました。 カスタマイズの知識がない私でも、いろいろな方々のカスタマイズを参考にすることで、現在のブログデザインに変更できました。 初心者でもできるカスタマイズをまとめましたので、ぜひ参考にしてください♪ 全体のカスタマイズ 色を変更する アイコンを変更する トップページのカスタマイズ 一覧形式にする 一覧形式のデザインを変更する パソコン用グローバルナビゲーション スマホ用ボトムナビゲーション ヘッダー下におすすめ…

記事中に貼り付けた画像に枠と影をつけようかな、と思ったので、今回はそう改造する方法です。 変更方法 変更手順 追加CSS 変更結果 説明 変更方法 記事中に貼り付けた画像を対象として枠と影をつけます。 変更手順 管理画面から以下のようにたどります。 デザイン ＞ レンチマーク ＞ デザインCSS ここに追記をします。 追加CSS .entry-content img { border: 1px #000 solid; box-shadow: 5px 5px 2px #ccc; } 変更結果 PNG透過なし画像 PNG透過あり画像 透過の有無に関わらず同じような表示になります。 説明 以降、設定…

強調文字が太字だけだと目立ちっぷりが足りないので、蛍光マーカーを引いたような見た目に改造する方法です。 変更方法 変更手順 追加CSS 変更結果 説明 変更方法 エディタの「B」ボタンで強調した部分の装飾です。 Markdown で書くと **強調** の部分に当たります。 変更手順 管理画面から以下のようにたどります。 デザイン ＞ レンチマーク ＞ デザインCSS ここに追記をします。 追加CSS .entry-content strong { background: linear-gradient(transparent 30%, #a6d9fe 30%); font-weight: b…

はてなブログのデザインをカスタマイズしてみたくなり、CSSを編集してみました。その時の手順をまとめておきます。

こんにちは！こなゆです(´艸｀*) 今日ははてなブログで「ヘッダー下にオススメ記事を固定する方法」を紹介します。 これが結構いいんですよね。 なんかこう、ブログっぽい感じが出るじゃないですか。笑 以前このブログで紹介した、「Twitterをブログに埋め込む」ことも そのブログっぽさを出せると思っています。 と、ブログっぽさはさておき、 見えやすいところにオススメ記事を置くことで、 ブログ内の回遊率を格段にアップさせることができます。 これで直帰率を少しでも下げられたらいいな、なんて思っています(*'▽') 実際、未設置時と設置後を比較すると明らかにクリックされています。（PVも増えたので、正確…

ベースはテンプレート、ディテールは自分好みにしたい はてなブログにはデフォルトでたくさんのテンプレートがあります。 どれも素敵なものばかりですが、 自分のイメージとぴったり合うものってなかなか無いんですよね。 雰囲気は好きだけど見出しのデザインがちょっと 全体的にシンプルですごい見やすいけどコードハイライトが少し見にくい とか 自分でテンプレート作るのもいいんですが、 そこまでするならもはや自分でブログサイト作ったほうがいい気がしますし その労と時間を割くためのサービス利用なので、 自分に合ったテンプレートが使えるのが一番だと思ってます。 というわけで今回はコードハイライトを自分好みにカスタマ…

はてなブログの目次のカスタマイズ★CSSだけで開閉式にする方法です。 ↓↓これです！ この記事の目次 このカスタマイズの特徴 １）どのテーマでも大丈夫！ ２）記事によって決められる！ 目次の表示切り替えのコード（CSS/HTML） CSSコード CSSコードを貼り付ける場所 HTMLコード HTMLコードを貼り付ける場所 コードの解説＆使い方（CSS/HTML） CSSコードの解説 HTMLコードの解説 コードの公開についてのお願い はてなブログでは、簡単に目次を設定することができますが、見出しをたくさん使っていると、目次がだらーって長くなってしまうことないですか？ 特にスマホで見ると画面ぜん…

はてなブログでは2021年2月26日（金）まで「デザインテーマコンテスト」を開催中です！ そこで「0からはじめるブログデザイン」と題し簡単なデザインカスタマイズからデザインテーマ作成まではてなブロガーさんのアイディア詰まった記事をご紹介する連載をしています。第2回は「デザインテーマを作ってみたい」と考えている方に向けて、「CSS初心者さんが参考にしたサイトまとめ」から「デザインテーマの制作の工程」までさまざまな記事をピックアップしました！はてなブログのデザインテーマストアには、プロのデザイナーさんはもちろん、CSS初心者の方もたくさんテーマを投稿されています。「CSSって難しそう……」と感じて…

ブログに表を作るには CSSを追加する ブログに表を作成する はてな記法で作る タグを使って作る エクセルで表を作ってブログ用に変換する まとめ ブログに表を作るにはデータを表示したり、比較や一覧を表示するとき、表にしたら見やすいですよね。はてな記法で表が作れるみたいなので試しに作ってみたら文字が縦書きになったり、 変なところで改行されたりととんでもないことに…どうやら横幅に合わせて調整されてしまうみたいですね。 これじゃあ使えないなと思っていたら、調整を無視して、 スクロールさせて表示する方法があるみたいです！これできちんと見られる表ができる！漆うしる (id:UrushiUshiru)様の…

ブログの配色とダークモードに挑戦した感想 テーマをUNDER SHIRTに変更 minimalismというテーマを使っていたが、デザインCSSを忘却したせいか管理不足なのか、とりあえずブログ誤動作や不具合が出始めた。 気分転換のつもりでランキング上位だったテーマを試しに変更してみたら、よさげだったので思ったので乗り換えを実行。 UnderShirt - テーマ ストア noteとか見てると2カラムの需要は少ないし時代遅れかもしれないけどがんばれば1カラムにも変更できるっぽいのでテーマをインストールした。 閲覧者のブラウザに合わせた配色 ブログが各OSのダークモード対応させたい。 白背景はずっと…