はてなブログカスタマイズ

ブログを始めたら、まずは書くことに集中！これ大事ですよね＾＾ しかし、ある程度記事が溜まってきたら「ブログの見た目👀」気になりませんか？？ ✅何だか、他の人のと比べて見辛いな💦 ✅一体、どのくらいの文字サイズが適正なの？ ✅変えたくても、初心者だから分からないよ‼ と頭を悩ませている方！今回は、「読みやすい文字の大きさ」について紹介させていただくので、是非参考にして下さいね＾＾ 💡私が利用しているのは、初心者でも簡単！はてなブログPro📝なので、ここでははてなブログでの「文字サイズの変更方法」を紹介しています。 ブログで推奨される文字サイズは？ PCだけでなく、モバイルからの見た目も重要!!!…

先日、はてなブログに記事の最終更新日を表示する機能が追加されました🙌✨staff.hatenablog.comわーい！待ってました！ 最終更新日の表示機能は嬉しい実装です。 最終更新日の設定方法 デザインのカスタマイズ方法 最終更新日を表示するメリット (adsbygoogle = window.adsbygoogle || []).push({}); 最終更新日の設定方法 設定する際の補足 最終更新日のカスタマイズ デザインCSS カスタマイズの注意点 最終更新日を表示するメリット メリット：まとめ おわりに 最終更新日の設定方法 1 はてなブログのダッシュボードから、左側にある🎨デザインの…

はてなブログテーマ「stripes」を、もっとシンプルなデザインにしたい。そんな方のためのカスタマイズです。 いずれのカスタマイズも、管理画面 > デザイン > カスタマイズ (スパナのアイコン) > 「デザインcss」に投入します。投入手順の詳細については、こちらをご参考ください。 ※ 2023.7.9 更新デフォルトのストライプの太さを変更しました。プレビューよりちょっと太め・薄めです。 デザイン & css サイドバーを白背景に変える サイドバーを白背景 + ボーダーに変える サイドバーを灰背景に変える サイドバーをグラデーション背景に変える 全体の背景色を変える + サイドバーにボーダ…

ブログタイトルに背景画像を設定すると、めちゃくちゃ残念なデザインになってしまいます。 カスタマイズすればなんとかなるだろうけど、よくわかんないし、めんどくさいからもういいや…って、あきらめた経験はありませんか。 そんな残念感を解消するため、ブログタイトルに背景画像を設定するだけでいい感じに表示するcssを、はてなブログテーマ「fade」「stripes」へ追加しました。 ぜひお試しください。 fade - テーマ ストア stripes - テーマ ストア ※ はてなブログは、わりと強めのキャッシュが残ります (=最新のcssが反映されるのに時間がかかる)。テーマを再インストールいただくと、最…

はてなブログの「読者になるボタン」を記事を読んだ人が目に入りやすいよう記事直下に配置する方法を調べたので、他にも設置しようと考えている方向けに設置方法のご紹介になります。 やり方の流れざっくり ①"読者になるボタン"のHTMLを調べる ②記事直下に貼り付けるコードの中①のコードを入れる ③デザイン⇒カスタマイズ⇒記事⇒記事下欄に貼り付ける 完成形 こんな感じになります。 なお②を抜かして①⇒③でもボタン配置は出来ますが、以下のように記事からは離れて配置されるため目に留まりにくくなってしまいます。 設置方法 ①読者になるボタンを表示するHTMLを調べる ダッシュボード⇒設定⇒詳細設定にいきます。…

デザインCSSのTipsです。テーマのインストールはこちらから。 blog.hatena.ne.jp 「ブログ名」「ひとこと説明」の横に、プロフィールアイコンを表示した様子 次のコードを、デザインCSSに追記してください。 #blog-title { position: relative; padding-left: 78px; text-align: left; } #blog-description { margin: 2px 0 0; } #blog-title-content #title a::before { position: absolute; overflow: hidden…

こんにちは。シンプルライフ ナビです。 ブログの読者が他の記事を参照してもらえるように、ナビゲーション・バー（ナビゲーションメニュー）を設置している人も多いと思います。*1 便利なのですが、ナビゲーション・バーが常に表示されていると、記事の表示面積が狭くなってしまいます。 そこで、画面の上下のスクロールの動きに合わせて、ナビゲーションバー（グローバルナビ ゲーションやボトムナビゲーション）を自動表示させたり、消したりする方法をご紹介します。*2 画面の動きに合わせて、ナビゲーション・メニューが自動でオン・オフするのでとても便利ですよ。 (adsbygoogle = window.adsbygo…

この記事では、シンプルなドロップダウンメニューの実装方法を解説します。 今回ご紹介するコードは、Webページに簡単なドロップダウンメニューを実装するためのものであり、CSSとHTMLの基本的な知識があれば理解できるものです。 メニューの表示と非表示を制御するためにチェックボックスとラベルを使用し、CSSを使ってアニメーションとスタイリングを実現しています。 ハンバーガーアイコンをクリックすると、メニューがスムーズに表示され、ユーザーがナビゲーションを行えるようになります。 メニュー項目にホバーするとアンダーラインが表示されるなど、ユーザーエクスペリエンスを向上させるための機能も組み込まれていま…

いろいろ試したけど、これが使いやすい。透過させる類似の色範囲をパーセント指定できる。 CanvaとかだとPro版にしないと透過にできないんですよね…。 rakko.tools できること 選択した色や類似のトーンを透明にする 選択した色を保持して他の色を透明に置き換える すばらしい！ 使用例 キャラやロゴ画像のまわりを透明にして背景と合成～ 下の記事もおすすめ↓ rubirubi.hateblo.jp rubirubi.hateblo.jp ランキング参加中デザイン ランキング参加中なんでもオッケーグループ！ ランキング参加中はてなブログカスタマイズ Webデザイン良質見本帳［第2版］ 目的別…

negi こんにちは！negiです♪ この記事は、わたしがこのブログでやった「関連記事をおしゃれにするカスタマイズの設定」を記録しています。 ▼このブログは、こちらのテーマを使用させて頂いております。 関連記事のカスタマイズ 設定したコード 関連記事のカスタマイズ ある程度記事の数が増えてくると、関連する記事が本文の下にズラッと（５つ分）並びます。 このブログで何も設定していない状態だと、関連記事の部分は以下のように表示されます。 【PC版】 【スマホ版】 PCとスマホでそれぞれ、こんな感じで見えます。 negi 5記事ってなんか多いし記事の冒頭部分がダラダラ書かれてるのが気になるなぁ ちょっ…

ブログを書いているけど何かパッとしないなぁ～って感じる事ないですか？ ブログは【内容】が肝心というのは確かですが、その内容を引き立てる為の見た目も大事だと思っています。 真っ白な背景に文字だけが並んでいる小説のようなブログ。 それも良いかもしれません。 女性の方が『わぁ～素敵♪こんな風にしたいなぁ～』ってのが強いかもです。 でも、それってブログへの想いが強いってことです。 しかもブログは生もので放置してると枯れちゃうんですよ。 メンテナンスやちょっと変えてみるって大事です。 この記事で、ブログを書いていても何かパッとしないなぁ～という気持ちが解消する！かもです。 ブログは手を掛けて育てれば愛着…

みなさんは、ブログ記事のカテゴリーの表示に階層化設定を使っていますか？ ご覧の通り、アラフィフママの雑記ブログはカテゴリーが多いので、なるべくスッキリわかりやすいように階層化表示を使っています。 …が。 今日久しぶりに自分のブログをよく見てみたら、階層化の表示が崩れて全部開いた状態になってるじゃないですか！ 階層化設定にしてあるカテゴリーが全部展開されちゃってるので、サイドバーにカテゴリーがズラッと並ぶ異常事態。 めちゃめちゃ見にくい…。 ということで、急遽メンテナンスをしました。 結構同じ状況になっちゃってる人も多いみたいで、直し方を検索すると案外すんなりと解決方法にたどり着くことができまし…

(adsbygoogle = window.adsbygoogle || []).push({}); 「自分らしい、オシャレなはてなブログにしたい！」 カスタマイズに悩んだ時、わたしは以下のブログやサイトをを参考にしています。 ほとんどがCSSコードをコピペして、該当の場所に貼り付けるだけでOK。 はてなブログのデザインカスタマイズを探している人は、以下をブックマークしておくのをおすすめします。 ポップなデザイン満載「フジブロッ！」 定番を網羅「Minimal Green」 ピンポイントでとりいれたい「Nomad Code」 【自学】HTMLとCSSが少し読めれば、はてなブログのデザインは思い…

ココナラでアイコンを作ってみたいけど、ちゃんと作ってもらえるか不安。収益が少ないうちは無料素材で十分かな･･･？ 本記事ではこんなお悩みを解決します。 先に結論ですが、 ブログやSNSをより楽しみたい人や収益化を本気で考えている人はオリジナルアイコンは必須 絵を書くのが苦手な人は、プロ級の絵をアマチュア価格で作ってもらえるココナラ がおすすめ その理由をココナラ ヘビーユーザーの私が詳しく解説していきますね。 ＼ 無料登録で300ポイントもらえる！ ／ さらに、紹介コード入力で＋1000ポイントもらえるのでコピペして使ってくださいね。 紹介コード：J6SADB まずは、私の利用履歴をココナラ …

ランキング参加中はてなブログカスタマイズ どうも、なぜか階段の踊り場で記事書いてるメメント・オレです。 理由は床が冷えて気持ちいいから、ノーパソの充電コードがそこまでしか伸びないから。 記事の更新してたらパンくずリストの階層化が解除されてることに気づいた。 TwitterのTLとかでも同じ症状のひとがいるみたいだからオレなりにまとめるわ。 なんで解除されたか 修正方法 あとがき なんで解除されたか blog.wackwack.net 開発者のブログに「サーバーのスクリプト配信を停止しました」の文字が。もしかしたら、またこういう症状が起きるかもしれんけど、とりま、今は直せるところ花おしておこう。…

【ブログ】を始めた時、アレも書きたいなぁコレも書きたいなぁ～って始めたんじゃないですか？ 私も最初のブログはそうでしたねぇ～。 でもね、ある時から『何書いたらええんやろ』『コレ書いて意味ある？』とか迷いだしたんですよね。 この【ぶろぐライフ】を【はてなブログ】で始めたおかげで色々な人に見てもらうようになり感謝です。 やっぱり継続させていく事って難しいけど見てくれてる人いる！ってのは大きいです。 【はてなブログ】は、それを感じれる場なのでマジありがたいです。 そこで感謝の気持ちを込めて私の【読者登録】さんサイトや【ココナラ】でカスタマイズさせて頂いたサイトを訪問したんです。 この記事では『ブログ…

ネットを利用して自分のスキルを武器に収益を得たいけど、自分のスキルは必要とされないのではないかと思っていませんか？ かつての私は、自分のカスタマイズスキルを販売するという考えが全くなかったです。 当ブログサイトを見た方から『ココナラでカスタマイズ販売始めたら良いのに』と言われた時も一歩踏み出すのに時間が掛かりました。 背中を押された事でスタートしてみると、ひと月もしない間に購入して頂き本当に始めて良かった！ この一歩を踏み出す事こそがスキルアップする方法なんです。 この記事では併せて販売するコツもお届けします。 まずは無料でココナラ登録して1000ptゲットしてくださいね。 ココナラ無料登録す…

●解決 ・記事一覧表示 【はてなブログ】トップページを記事一覧に変更してスッキリさせる方法 | アプリログス ・見出し編集 【コピペOK】はてなブログで使える見出しデザイン19選！CSSを貼り付けるだけ - おおまめとまめ育児日記 ・minimalismの枠線を消したい ブログデザインMinimalismのカスタマイズ その2ナビゲーションバーを枠いっぱいに広げて縦の枠線を消す。 - なまけろぐ ・文字背景に塗りつぶし枠を付けたい コピペするだけ！はてなブログで使えるアレンジ囲み枠１３選 - すまてくブログ はてなブログカスタマイズ記事のまとめ - Minimal Green ・日付表示カスタ…

●解決 ・記事一覧表示 【はてなブログ】トップページを記事一覧に変更してスッキリさせる方法 | アプリログス ・見出し編集 【コピペOK】はてなブログで使える見出しデザイン19選！CSSを貼り付けるだけ - おおまめとまめ育児日記 ・minimalismの枠線を消したい ブログデザインMinimalismのカスタマイズ その2ナビゲーションバーを枠いっぱいに広げて縦の枠線を消す。 - なまけろぐ ・文字背景に塗りつぶし枠を付けたい コピペするだけ！はてなブログで使えるアレンジ囲み枠１３選 - すまてくブログ はてなブログカスタマイズ記事のまとめ - Minimal Green ・日付表示カスタ…