フジブロっ!

はてなブログのカスタマイズに役立つ記事やツール、デザインテーマの制作を行なっている、カスタマイズ専門ブログ

カスタマイズ

主にはてなブログを中心に、ブログのカスタマイズに使えることをまとめています。

はてなブログのトップページをカード型にする

どうも!フジグチです! はてなブログには様々なテーマがありますが、トップページがカード型のテーマは意外に少なかったりします。 アイキャッチやタイトルが見やすく、ビューポート内に情報を多く見せられるといったメリットのあるカード型に惹かれる方は…

はてなブログ-アイコンを使ってカテゴリを分かりやすく表示する

どうも!フジグチです! 前回はてなブログで使えるアイコンフォントをまとめましたが、今回は早速そのアイコンフォントを使い、サイドバーにアイコンを並べてカテゴリを表示するカスタマイズをしていきます。 記事内では「カテゴリ」として紹介しますが、お…

はてなブログで使えるアイコンフォント全125種

はてなブログのアイコンフォント全125種をまとめています。アイコンを大きく表示して探しやすくし、ワンクリックでコピー、タグなどのコードも付与してコピー出来るようにしています。 はてなブログのカスタマイズをする際に活用してください。

はてなブログ-フォローボタンのカスタマイズ【Twitter、Pinterest、YouTubeにも対応】

はてなブログで使えるフォローボタンのカスタマイズです。 入力フォームに必要事項を入力するだけでコードが作成でき、その場で形も変えることが出来ます。 コピペするだけなのでとてもかんたんです。Pinterestにも対応。

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

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

はてなブログヘッダー下におすすめ記事を設置するカスタマイズ

どうも!フジグチです! 今回は、おすすめ記事を設置するカスタマイズを紹介したいと思います。 以前Cappuccinoで(Neumorphismでも)使えるおすすめ記事の設置方法は紹介しましたが、今回ははてなブログのどのテーマでも使えるおすすめ記事を設置するカスタ…

はてなブログカスタマイズまとめ-カスタマイズマップを作成しました

どうも!フジグチです! 当サイトでは、今まではてなブログのカスタマイズを行ってきました。 1年間サイトを運営してきた区切りとして、カスタマイズの記事をまとめたカスタマイズマップを作成いたします。 これからカスタマイズを行っていくたびに、このま…

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

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

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

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

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

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

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

はてなブログテーマ【Cappuccino】【Neumorphism】で使えるシェアボタンです。あらかじめCSSはテーマに組み込まれているので、HTMLをコピーするだけで簡単に使うことが出来ます。デザインの変更の仕方も解説しています。

ヘッダー画像をレスポンシブにきれいに表示する方法

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

はてなブログテーマCappuccino着せ替えデザイン12選+カラー変更ジェネレーター

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

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

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

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

どうも!フジグチです! 目次から見出しに移動する時やトップへ戻るボタンのように、ページ内をリンクで移動する時にスムーズにスクロールするのを見たことはありませんか? 当サイトでもスムーズスクロールを設定しているのですが、とても簡単なCSSのみで実…

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

はてなブログタグの機能が使えるようになりました。 新たに使えるようになったことで、今までは想定していなかったようなデザイン崩れに悩んでいませんか? そんな方のために、はてなブログタグのデザインの調整の仕方を書きました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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