フジブロっ!

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

はてなブログ デザインテーマコンテスト2021でCanva賞を受賞しました!

どうも!フジグチです! 以前より応募していた、はてなブログのデザインテーマコンテストの結果が発表されました。 2021年「はてなブログ デザインテーマコンテスト」結果発表!はてなとCanvaが選ぶ受賞5作品は? - 週刊はてなブログ 結果は見事にCanva賞を…

はてなブログテーマCappuccinoのQ&Aを作成しました

どうも!フジグチです! 当サイト製作のテーマCappuccinoのQ&Aを作成しました。 実際にコメント頂いたことや、私が思いつく疑問に思いそうな部分を挙げてみたので、カスタマイズする際や何かおかしい?と困った時にお役立て下さい。 全体 テーマのカラーを変…

ブログが消えた!?落ち着いて原因と対処法を確認する

どうも!フジグチです! ここ最近立て続けに「ブログが消えた」「一部しか表示されない」「一部が表示されない」といった悩みを聞きました。 私の読者やフォロワーの数は100人程ですがその中で3、4件もそういう事例があるということは、はてなブログ全…

プロフィールをおしゃれにカスタマイズするデザイン10選

どうも!フジグチです! 今回はCappuccinoのデモサイトに設置している、プロフィールカードのカスタマイズを公開いたします。 「近日中に公開する」とデモサイトに書いていたのですが、まさかのテーマ2作目の製作をするという想定外のことが起きて、自分で…

はてなブログで使えるフォローボタン【Pinterest、テーマNeumorphism対応】※追記あり

どうも!フジグチです! 今後当サイトではプロフィール欄のカスタマイズを公開する予定なので、プロフィール欄にはフォローボタンを設置したいのではないかと思い、先にフォローボタンを作成してみました。 ご自身が使用しているSNSを選び、設置したい場所に…

はてなブログ記事一覧をiphone風にカスタマイズしてみた

どうも!フジグチです! 先日公開した新テーマ【Neumorphism】ですが、さっそく面白いカスタマイズをしてみたので紹介します。 このカスタマイズはゲームブログ、特にスマホゲームのブログを運営している方にぴったりのカスタマイズとなっています。 きっか…

はてなブログテーマ「Cappuccino」「Neumorphism」記事内各種リセットCSS用意しました

どうも!フジグチです!当サイト製作のテーマをお使いの方が、記事内のカスタマイズをする際にCSS同士が干渉しないように、各種装飾をリセットするCSSをご用意したのでカスタマイズする際にご利用ください。目次については当サイトでもカスタマイズを紹介し…

はてなブログテーマNeumorphismを公開しました!

どうも!フジグチです! 当サイト製作のテーマ【Cappuccino】公開から1ヶ月が過ぎ、289インストール(※2021/1/5時点)でありがたいことに、「人気のテーマランキング」にも入るなど多くの方々に使って頂いています。 Cappuccino公開からスパンは短いですが、…

はてなブログCappuccinoにおすすめ記事を設置するカスタマイズ

※この記事内のコードは当サイト製作テーマ【Cappuccino】と【Neumorphism】共通で使えます。(Neumorphismではデザインがテーマに合ったデザインに変更されます) どうも!フジグチです! 当サイト製作のはてなブログテーマ【Cappuccino】に、おすすめ記事を…

LINE新カラーにも対応!シェアボタンをテーマCappuccinoに設置しました

※この記事内のコードは当サイト製作テーマ【Cappuccino】と【Neumorphism】共通で使えます。(Neumorphismではデザインがテーマに合ったデザインに変更されます) どうも!フジグチです! 当サイト製作のはてなブログテーマ【Cappuccino】が、シェアボタンに…

ヘッダー画像の余白を無くして綺麗に表示!どんな画面サイズにも対応

※2021/1/16「画像とテキストを表示」してお使いの方では画像の表示がずれてしまうため、「ヘッダー画像周りの余白を消す」コードを一部修正しています。お手数ですがコードを入れ直してください。 どうも!フジグチです! 先日リリースしたはてなブログテー…

はてなブログテーマCappuccino着せ替えデザイン12選

どうも!フジグチです! ありがたいことに先日リリースした新しいはてなブログテーマ【Cappuccino】は、リリース直後から人気テーマのランキングに入るなど、予想以上に多くの皆様に使って頂いています。 今回はこのテーマの配色の変更方法と、コピペで使え…

はてなブログテーマCappuccinoを公開しました!

どうも!フジグチです! 当サイトでは、はてなブログのカスタマイズを主に行ってきました。 そんな私がこの度、オリジナルテーマ【Cappuccino】(カプチーノ)をテーマストアに公開したのでお知らせいたします。 テーマのコンセプトはラテアート(アイキャッ…

HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】

どうも!フジグチです! 前回の記事で「ページ内リンク」について書きました。 ページ内リンクを使いこなせば、閲覧する側のちょっとした手間を省くことが出来るので、ユーザビリティが良くなります。 このページ内リンクを使えば色々なサイトでよく見かける…

サイト内の指定した場所にリンクしてユーザビリティを上げる!

どうも!フジグチです! 前回の記事の「スムーズスクロールのメリット」の見出しの中で「ページ内リンクを記事に入れることがある」ということを書きました。 指定した場所へリンクすることによって、読者を迷わせることなく目的の場所まで導くことが出来ま…

CSSのみ!簡単にスムーズスクロールを導入する

どうも!フジグチです! 目次から見出しに移動する時やトップへ戻るボタンのように、ページ内をリンクで移動する時にスムーズにスクロールするのを見たことはありませんか? 当サイトでもスムーズスクロールを設定しているのですが、とても簡単な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 フジグチ そこをカスタマイズするのか! と衝撃?刺激?を受けたので当ブログで…

トップへ戻る