フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

はてなブログでサイドバーを固定して追従させるカスタマイズ

はてなブログのサイドバーを、スクロール時に固定して追従させるカスタマイズを紹介しています。 反映されない時の注意点や、アレンジの仕方等をまとめたのでご覧下さい。

ステップバー(タイムライン)で手順の説明をオシャレに分かりやすくするCSS

手順の説明や時系列の説明に便利なステップバー(タイムライン)を作りました。 デザインも5種類用意し色のカスタマイズもしやすいように工夫してあるので、是非この記事を読んでご自身のブログに導入してみてください。 さまざまなブログサービスにも対応…

サイト表示速度の改善をさせる 画像遅延読み込み【loading="lazy"】

どうも!フジグチです! 前回妻のブログで出たCLSエラーについて調べる際にPageSpeed Insightsを使い、修正の確認作業を行いました。 その際あまりにもパフォーマンススコアが低かったので、改善する方法を探してみたところ記事によっては20ポイントほどのス…

サーチコンソールで「CLS に関する問題」が出た時の対処法

どうも!フジグチです! 先日妻のブログが「ウェブに関する主な指標」の「CLS に関する問題: 0.25 超(モバイル)」というサーチコンソールのエラーが出ました。 あまり見慣れないエラーにどう対応して(当ブログの問題ではないのですが)エラーを修正できた…

CSSが反映されない?そんな時に確認すべき6つのこと

どうも!フジグチです! 当ブログではカスタマイズ系の記事をよく書くので、コードの確認を「非公開のカスタマイズ専用のブログ」でテーマを何種類か入れ替え、問題なく反映されるか確認していました。 しかし、その入れ替え作業がだんだんめんどくさくなり…

【アフィリエイトリンクボタンの作り方】8個のボタンサンプル付き

どうも!フジグチです! 先日、ただのテキストリンクより目立つボタンタイプのリンクに出来ないか?と妻に頼まれリンクボタンを作成しました。 そのボタンを使用した記事がこちら▽ その時に「ボタンにリンクの貼り付け方が分からない」と言われ設定したので…

カスタマイズし過ぎるとサイトスピードは低下する?検証してみた!

どうも!フジグチです! 「ブログをカスタマイズしすぎるとサイトの表示速度が低下する」こんなことを聞いた(読んだ)ことはありませんか? ブログを書くよりカスタマイズ! カスタマイズした三日後にはまた別のデザインにカスタマイズ! というカスタマイ…

箇条書きにアイコンフォントを使ってオシャレにする方法3パターン

どうも!フジグチです! おかげさまで【見たまま編集で使えるボックスデザイン】の記事は、はてなブロガーのみなさんからのアクセスが非常に多い記事となっています。 このボックスは箇条書きのボックスとしても使えうことができるのですが、リストマーカー…

ブログの作成時に使えるショートカットキー

どうも!フジグチです! みなさんショートカットキーは使っていますか? もちろん仕事でPCを使う方なら当然のように使っているかと思いますが、普段PCに触れる機会がない私は「ctrl + C」⇒ コピー「ctrl + X」⇒ コピーして切り取り「ctrl + V」⇒ 貼り付けと…

サブブログからコメントへの返信が出来るようにカスタマイズしてみた!

どうも!フジグチです! 当ブログでは以前LSSさん(id:little_strange)のネタを勝手にパクって拝借して「コメントを書く」の文字を「コメントくださいね♪」にするカスタマイズの記事を書きました。 このカスタマイズは元々の文字の上に、別の文字を被せて隠す…

ブログの本文を読みやすくする基本のカスタマイズ

どうも!フジグチです! 今日はブログの基本に返って記事を読みやすくするカスタマイズを確認したいと思います。 この設定はブログを書き始める時に出来るだけ早くやると、記事の書き方のルールを固めることが出来るので早めにすることをお勧めします。 100…

ブログカスタマイズに役立つツールを紹介!アイキャッチ作成にも!

どうも!フジグチです! 今回は私がブログをカスタマイズする時や、作成する時に使っているツールをご紹介します。 ブログを始めてまだ2ヶ月の初心者ですが、メインブログのカスタマイズはその前から行っていたりしますので「初心者の若造が何言ってやがる…

【はてなブログ】コメントボタンのカスタマイズ

どうも!フジグチです! 今日は普段読ませて頂いているLSSさんのブログで「コメントを書く」ボタンのカスタマイズをしている記事を読みました。 little-strange.hatenablog.com フジグチ そこをカスタマイズするのか! と衝撃?刺激?を受けたので当ブログで…

【Twitter便利機能】予約ツイートの使い方

どうも!フジグチです! 私は1ヶ月前にTwitterを始めたの(全然使えてない)ですが、つい先日Twitterに予約ツイートという新しい機能が追加されたようなので、この機能の使い方に触れてみたいと思います。 予約ツイートを使う理由 サブブログの縛り ツイー…

コピペして定型文に登録するだけ!見たまま編集で使える吹き出しや便利なコード集

どうも!こっそりアイキャッチの雰囲気を変えていってるフジグチです! 過去記事で定型文を利用した囲み枠のカスタマイズの記事を出したのですが、当ブログの中ではアクセスやブックマーク数が多い記事となっています。▼ はてな記法やMarkdown記法でも使えま…

【天空の城ラピュタ】の名言と共にブログを始めるまでの事を振り返る

どうも!フジグチです! 私が今年の1月からHTML、CSSを勉強し始めて丸4ヶ月が経ちました。 HTMLが1ヶ月とCSSが3ヶ月ほどなのですが、3ヶ月過ぎると「CSS初心者です!」ってアピールしづらい気がするのは私だけでしょうか?出来ればまだまだ甘えたいので…

【はてなブログ】最新記事、関連記事、注目記事を2列にするカスタマイズ

どうも!フジグチです! 最近は毎日誰も気付かないような細かい部分のデザインをいじって、カスタマイズの勉強をしています。 見た目が大きく変わる部分としては最新記事を横長のカード型から、記事一覧のようなカード型にして2列表示にしました。 記事一覧…

コピペして定型文に登録するだけ!見たまま編集で使える囲み枠

どうも!フジグチです! みなさんは先日はてなブログにリリースされた新機能【定型文貼り付け】機能使っていますか? 記事をまたいで繰り返し使うあいさつや文章を登録しておけばクリックするだけですぐに挿入できるということで、記事の執筆がはかどります…

はてなブログ【UnderShirt】スマホ2列表示時に6記事見せるカスタマイズ

どうも!フジグチです! 当ブログも更新の頻度は遅めですが、少しずつ記事が増えてまいりました。(まだまだこれで8記事目ですが) トップページの記事数を10記事としているので、スマホで記事一覧を見るとそれなりにスクロールしないと下の記事に辿り着…

はてなブログ【目次カスタマイズ】コピペで使えるデザイン集

はてなブログで使える目次のカスタマイズを紹介しています。コピペしてすぐ使えるものや、当ブログで使用している「大学ノート風」の目次も公開しています。ご自身でカスタマイズできるように個別に指定する方法も解説しているので、ご覧下さい。

はてなブログ【UnderShirt】記事一覧のカスタマイズ

どうも!ヘッダーとアイコンを変更して心機一転のフジグチです! 当ブログのテーマはUnderShirtを使用しています。 カードタイプで記事一覧が見やすいのと【UnderShirt】という「この上にドンドン着飾ってオシャレしてくださいね!」という心意気を感じる(※…

アフィリエイトで使える?文字を派手にグラデーションするカスタマイズ

どうも!フジグチです! 巷はコロナコロナで大変な時ですが、皆さんはどうお過ごしでしょうか? フジグチも外出が制限され、生活必需品を買いに出ても常に感染のリスクに怯えストレスが溜まっています。 ブログも始めたしおうち時間が増えたのでPCを新調した…

はてなブログ記事内の画像クリック時にポップアップ表示を解除する方法

どうも!フジグチです! 以前書いた、ホバー時に”ふわっ”とさせるカスタマイズの記事↓ これを書いたあとに読み返していて、「なんか分かりづらいな...」と思っていました。 PCで見るとカーソルを合わせるだけで画像が浮くので良かったのですが、スマホから見…

【初心者でも簡単に】ブログをカスタマイズする方法

どうも!フジグチです! はてなブログにはおしゃれなテーマが数多くありますが、人気のテーマは使っている人も多くカスタムしていかないと個性を表現しづらいと思います。 自分のブログをカスタマイズするにはCSSの知識が(HTMLも)必要ですが「ブログを始め…

【はてなブログ】記事一覧を”ふわっ”とさせるカスタマイズ

どうも!フジグチです! ブログのカスタムをしたいけど記事がない。 記事を書かなきゃダメだけどカスタムがしたい!と、考えてるうちにどんどん睡眠不足に陥りふわふわしております。 ということで、今日はマウスオーバーをした時に”ふわっ”とさせるCSSを書…

【はてなブログPro】の機能を引き継いで別IDでサブブログを運営する方法

はじめまして!フジグチです! ブログ初心者の方が運営に慣れてきた時に「違うブログも始めてみたいな~」「心機一転して別ブログ始めたいな~」って思ったことないですか? はてなブログには複数のブログを始める方法が2つあります。 メインブログ以外の作…

トップへ戻る