カスタマイズ記事リスト

カスタマイズ
CONTENTS

F-light 用カスタマイズ

名前 / URL でのコメント投稿者のサイトファビコンをアバターとして表示させる

ファビコンふじろじっく
サムネイル
【F-light】名前 / URLで投稿されたコメントアバターをサイトのファビコン画像に置き換える
コメント投稿時にURLを入れるとアバターの所にサイトのファビコンが表示されるようにしてみました
https://fujilogic.blogspot.com/2024/08/show-favicon-avatar-of-non-login-commenter.html

固定ページに更新日を表示

ファビコンふじろじっく
サムネイル
【F-light】固定ページで公開・更新日を表示させる
F-lightの固定ページに更新日を表示させてみるのはいかが？
https://fujilogic.blogspot.com/2024/06/show-timestamp-on-F-light-static-page.html

番号ページネーションの外していた機能の活用方法

ファビコンふじろじっく
サムネイル
【F-light】記事一覧ページの上部にページ番号を表示させる
番号ページネーションの不要と思っていた機能の思わぬ活用方法を発見
https://fujilogic.blogspot.com/2023/10/display-current-page-number-on-pagetop.html

テーマデザイナーを実装する

ファビコンふじろじっく
サムネイル
【F-light】テーマデザイナーを利用する方法
F-light をテーマデザイナー仕様に改造する手順とテーマデザイナーの使い方
https://fujilogic.blogspot.com/2023/06/F-light-theme-designer.html

カードレイアウトに改造する

ファビコンふじろじっく
サムネイル
【F-light】カードレイアウト化する
F-light テーマをカードレイアウトに改造する方法を紹介します
https://fujilogic.blogspot.com/2022/12/F-light-Card-Layout.html

はてなスターボタンを付ける

ファビコンふじろじっく
サムネイル
【F-light】はてなスターボタンを付けてみた
F-light テーマにはてなスターボタンを設置する手順を紹介します
https://fujilogic.blogspot.com/2022/12/Hatena-Star-on-F-light.html

まとめ記事

ファビコンふじろじっく
サムネイル
F-light カスタマイズ集 (随時追加予定)
作者おすすめの F-light テーマカスタマイズを紹介します
https://fujilogic.blogspot.com/2022/10/F-light-customize.html

F-light に最適化した サイトマップ & 最新コメント ウィジェットコード

ファビコンふじろじっく
サムネイル
【F-light】カスタム サイトマップ & 最新コメント ウィジェット (ダークモード対応 CSS 付きコード)
F-light テーマのダークモード対応済み「サイトマップ」「最新コメント」コードを紹介します
https://fujilogic.blogspot.com/2022/08/F-light-customized-widget-code.html

QooQ 専用カスタマイズ

コメント欄の管理者名に判別マークを付けたりアイコンサイズを拡大する方法

ファビコンふじろじっく
サムネイル
【QooQ】コメント欄の表示をカスタマイズ
管理者名に判別マークを付けたり、コメントアイコンサイズをカスタマイズする方法を解説
https://fujilogic.blogspot.com/2022/03/comment-display-customize.html

投稿日の横にコメント件数を表示させる

ファビコンふじろじっく
サムネイル
【QooQ】投稿日の横にコメント数を表示させる
QooQ で投稿日の横にコメント数を表示させる手順です
https://fujilogic.blogspot.com/2021/10/QooQ-display-comment-number.html

トップページのラベルをサムネ上に配置してマウスホバー時に浮き上がらせる

ファビコンふじろじっく
サムネイル
【QooQ】トップページのラベルの表示を変えてみた
トップページのラベルをEmporio風にしてみた
https://fujilogic.blogspot.com/2021/08/hided-label-placed-on-thumbnail.html

記事編集アイコンコードを改造して使用する方法

ファビコンふじろじっく
サムネイル
【QooQ】Bloggerの仕様変更に影響されずに記事編集アイコンを使い続ける方法 (2021/10/08: 別のコードを追記しました)
便利な記事編集アイコンを今後も使い続けるための方法を紹介
https://fujilogic.blogspot.com/2021/07/quick-edit-icon-on-QooQ.html

ナビバー開閉ボタンのカスタマイズ

ファビコンふじろじっく
image
【QooQ】ナビバー開閉ボタンのカスタマイズ
お手軽カスタマイズでナビバーボタンをカッコよくしてみよう
https://fujilogic.blogspot.com/2021/01/QooQ-navibar-button-customize.html

サイドバーを左に移動させる方法

ファビコンふじろじっく
サムネイル
【QooQ】サイドバーを左に移動させる方法
CSSだけで簡単にレイアウトを変更
https://fujilogic.blogspot.com/2020/10/sidebar-move-to-left.html

QooQ を1カラム化する

ファビコンふじろじっく
サムネイル
1カラムレイアウトにしてみた (1カラム化手順を追記しました)
サイドバーを取っ払ってみたら見やすくなった？
https://fujilogic.blogspot.com/2020/10/1-column-rayout.html

OGP 画像を設定

ファビコンふじろじっく
image
【QooQ】OGP 画像を設定しよう
OGP画像とアイキャッチについて
https://fujilogic.blogspot.com/2020/08/QooQ-setting-og-image.html

サイドバーウィジェットを追従させる方法

ファビコンふじろじっく
image
【QooQ】サイドバーウィジェットを追従させる方法
QooQ で何故かついてこないサイドバーウィジェットを追従させる方法
https://fujilogic.blogspot.com/2020/07/QooQ-sidebarwidget-sticky.html

注目の投稿ガジェットをカスタマイズ

ファビコンふじろじっく
image
【QooQ】注目の投稿ガジェットをカスタマイズ
注目の投稿のデザインと UI を改善してみた
https://fujilogic.blogspot.com/2020/07/Featured-Post-gadget-customize.html

前後記事リンクの位置を変える

ファビコンふじろじっく
image
【QooQ】前後記事リンクの位置を変える
前後記事リンクは一番下にあったほうがよくね？
https://fujilogic.blogspot.com/2020/06/nextprev-link-move-to-bottom.html

ナビゲーションバーを上部に固定する方法

ファビコンふじろじっく
image
【QooQ】ナビゲーションバーを上部に固定する方法
CSS の追記だけでナビバーを上部に固定する
https://fujilogic.blogspot.com/2020/03/fixed-and-sticky-navbar.html

ナビゲーションバーの中に検索ボックスを埋め込む

ファビコンふじろじっく
image
【QooQ】ナビゲーションバーの中に検索ボックスを埋め込む
検索ボックスの置き場所をカスタマイズ
https://fujilogic.blogspot.com/2020/03/searchbox-in-navibar.html

関連記事ウィジェットのカスタマイズ

ファビコンふじろじっく
サムネイル
【QooQ】関連記事ウィジェットのカスタマイズ
QooQ用関連記事ウィジェットのデザインと機能をカスタマイズ
https://fujilogic.blogspot.com/2020/02/QooQ-mrp-customize.html

オリジナルSNSシェアボタンの設置

ファビコンふじろじっく
image
【QooQ】オリジナルSNSシェアボタンの設置
オリジナル SNS シェアボタンの設置手順～QooQ編
https://fujilogic.blogspot.com/2019/09/original-snssharebutton-for-qooq.html

様々なテーマで適用可能なカスタマイズ

目次に戻るボタン（IB-Note 製の目次ウィジェット専用）

ファビコンふじろじっく
目次に戻るボタンを付ける | ふじろじっくのサムネイル
目次に戻るボタンを付ける | ふじろじっく
IB-Note製の目次専用の戻るボタンを付ける手順を紹介します。
https://fujilogic.blogspot.com/2023/10/Back-to-TOC-button.html

ランダムでピックアップされた記事に飛ぶボタン

ファビコンふじろじっく
サムネイル
ランダムポスト表示ボタンを置いてみました
このウィジェットで古い記事を見てもらえる機会が増えるかもしれない？
https://fujilogic.blogspot.com/2023/09/random-post-view-button.html

Blogger 専用カレンダーウィジェット

ファビコンふじろじっく
サムネイル
【Blogger】カレンダーウィジェット
6年ぶりにカレンダーウィジェットを導入。改良版のコードを紹介します。サイトマップページに置くのがオススメ？
https://fujilogic.blogspot.com/2023/05/blogger-calendar-widget.html

コメント内の外部リンクにアイコンを付けてを別タブで開くようにする

ファビコンふじろじっく
サムネイル
【Blogger】JavaScript でコメント内の外部リンクを別タブで開くようにする
コメント内の外部リンクにアイコンを付けて新しいタブで開くようにする方法を紹介します。
https://fujilogic.blogspot.com/2023/01/comment-external-link-open-in-new-tab.html

JavaScript 不使用でアーカイブページ用ページャーを導入する方法

ファビコンふじろじっく
サムネイル
【Blogger】JavaScript 不要のアーカイブページ専用ページャーを導入しました
JavaScript不使用のアーカイブページ用ページャーに変えてみました
https://fujilogic.blogspot.com/2022/03/nojavascript-archive-pager.html

CSS clip-path で画像や背景の形を手軽にデザイン

ファビコンふじろじっく
サムネイル
【CSS】clip-path で手軽に図形デザイン
CSS の clip-path で画像や背景の形を手軽にデザインしてみよう
https://fujilogic.blogspot.com/2021/06/clip-path.html

BloggerにアップしたアニメGIF画像をMP4動画ファイル化する方法

ファビコンふじろじっく
サムネイル
【Blogger】アニメGIF画像をMP4動画ファイル化して埋め込む
Blogger画像のアニメGIFをお手軽にMP4変換する方法
https://fujilogic.blogspot.com/2021/06/Blogger-gif-convert-to-mp4.html

オリジナル SNS シェアボタン 【JavaScript 版】

ファビコンふじろじっく
サムネイル
オリジナル SNS シェアボタン 【JavaScript 版】(2021/05/14: コードをアップデートしました)
ふじろじっくオリジナルSNSボタンのコードをJavaScript化してみた
https://fujilogic.blogspot.com/2021/05/SNS-share-buttons-JavaScript.html

ライト / ダークモード切り替えボタンを実装

ファビコンふじろじっく
サムネイル
ライト / ダークモード切り替えボタンを付けてみた
明るい画面がお好みの方はボタンで切り替えてみてね
https://fujilogic.blogspot.com/2021/04/light-dark-mode-switch.html

ShareThis リアクションボタンの導入

ファビコンふじろじっく
サムネイル
リアクションウィジェットをリニューアルしました
リアクションウィジェットが廃止されてしまったので、別のリアクション機能を導入してみました
https://fujilogic.blogspot.com/2021/03/changed-reaction-widget.html

匿名コメント投稿者のアバターを表示させる

ファビコンふじろじっく
サムネイル
【jQuery】匿名コメント投稿者のアバターを表示させる
jQueryで画像を置き換えて匿名アバターを表示させてみた
https://fujilogic.blogspot.com/2021/03/display-anonymous-avatar-jquery.html

<head>内のメタタグを最適化

ファビコンふじろじっく
サムネイル
head内のメタデータをカスタマイズ
メタタグを整理して自分好みに最適化してみた
https://fujilogic.blogspot.com/2021/03/optimized-meta-tags.html

highlight.js を導入

ファビコンふじろじっく
image
highlight.js を導入しました
ソースコードの表示を見栄え良くして、便利なコピーボタンも付けました。
https://fujilogic.blogspot.com/2020/08/highlight.js.html

ネイティブ Lazyload を導入

ファビコンふじろじっく
image
ネイティブ Lazyload を導入してみた
画像遅延読み込みでページの表示速度改善！
https://fujilogic.blogspot.com/2020/06/Native-Lazyload.html

自動目次とスムーススクロール

ファビコンふじろじっく
image
自動目次とスムーススクロール
目次自動生成&スムーススクロールのスクリプトを導入しました。
https://fujilogic.blogspot.com/2019/10/auto-toc-with-smooth-scroll.html

コメント欄のデザインカスタマイズ

ファビコンふじろじっく
image
【QooQ 他】コメント欄のデザインカスタマイズ
コメント欄を色々装飾してみよう。
https://fujilogic.blogspot.com/2019/06/comment-field-design-customize.html

Blogger画像のパラメータをいじって色々カスタマイズ

ファビコンふじろじっく
サムネイル
Bloggerの画像の小技 (2021/10/08: 新仕様 URL に関して追記しました)
Bloggerにアップロードした画像に関するちょっとした便利ワザをご紹介します。
https://fujilogic.blogspot.com/2019/06/blogger-image-tips.html

「次の投稿」「前の投稿」を記事タイトルに置き換えるスクリプト

ファビコンふじろじっく
サムネイル
「次の投稿」「前の投稿」を記事タイトルに置き換えるスクリプト (別のおすすめスクリプトを追記しました)
「次の投稿」「前の投稿」を記事タイトル表示にしてみよう
https://fujilogic.blogspot.com/2019/05/posttitled-pagenation.html

オリジナルデザインのSNSシェアボタンを付ける

ファビコンふじろじっく
image
オリジナルデザインのSNSシェアボタンを付ける
ふじろじっく仕様のかわいい丸型デザインです。リンクコピー機能も付いてます。
https://fujilogic.blogspot.com/2019/05/original-sns-sharebuttons.html

HTML サイトマップウィジェット

ファビコンふじろじっく
サムネイル
HTML サイトマップウィジェット (2022/07/10 一部を改良したコードを公開しました)
日本語仕様に改変しました。
https://fujilogic.blogspot.com/2019/05/sitemap.html

番号付きページャーの設置

ファビコンふじろじっく
サムネイル
番号付きページャーの設置
ページ数の多いブログで便利な定番ウィジェット。
https://fujilogic.blogspot.com/2019/05/numbered-pagenation.html

ページャー機能付き最新記事ウィジェット

ファビコンふじろじっく
サムネイル
ページャー機能付き最新記事ウィジェット
色々自分好みに改造してます。
https://fujilogic.blogspot.com/2019/05/recent-post-widget.html

最新コメントウィジェット

ファビコンふじろじっく
サムネイル
最新コメントウィジェット (別のおすすめウィジェットを追記しました)
投稿者名とコメント概要のみのシンプル表示。アイコンや投稿時刻も表示される別のおすすめウィジェットも追記しました。
https://fujilogic.blogspot.com/2019/05/recent-comment-widget.html

ページトップ・ページ最下部に飛ぶボタンの設置

ファビコンふじろじっく
サムネイル
ページトップに戻るボタンの設置(ページ最下部へ飛ぶボタンを追加しました)
jQuery を使った定番ウィジェット。
https://fujilogic.blogspot.com/2019/05/page-top-button.html

Contempo, Emporio 等の公式新テーマ用のカスタマイズ

新バージョンのテーマで記事編集アイコンを表示させる方法

ファビコンふじろじっく
サムネイル
【Blogger】新バージョンのテーマで記事編集アイコンを表示させる (2021/10/08: 別のコードを追記しました)
新バージョンテーマで廃止された記事編集アイコンを表示させる方法
https://fujilogic.blogspot.com/2021/07/quick-edit-pen-on-new-version-theme.html

ホームリンクを付ける

ファビコンふじろじっく
image
【Contempo 他】ホームリンクを付けてみた
メニューバーを消したことにより無くなってしまったホームリンクを設置してみた。
https://fujilogic.blogspot.com/2019/06/add-a-home-link.html

ページリストとハンバーガーアイコンを記事ページでも表示させる

ファビコンふじろじっく
image
【Contempo】ページリストとハンバーガーアイコンを記事ページでも表示させる
Contempo 改善シリーズ第3弾。自分でもどこをどう弄ったのか解らなくなってた所を整理しました。
https://fujilogic.blogspot.com/2019/06/display-pagelist-and-hamburgericon-on-postpage.html

全てのページでラベルを表示させる

ファビコンふじろじっく
image
【Contempo】全てのページでラベルを表示させる
Contempo テーマの謎仕様改善シリーズ第2弾。
https://fujilogic.blogspot.com/2019/06/display-postlabels-allpage.html

Bloggerにはてなスターを付ける

ファビコンふじろじっく
image
【Contempo他】Bloggerにはてなスターを付ける
今回のカスタマイズは Contempo 等の公式新テーマ(Emporio を除く)限定です。
https://fujilogic.blogspot.com/2019/06/Hatenastar-on-Blogger.html

トップページのサムネイル画像にパーマリンクを付ける

ファビコンふじろじっく
image
【Contempo】トップページのサムネイル画像にパーマリンクを付ける
スマホでのユーザビリティも向上するはず。
https://fujilogic.blogspot.com/2019/05/toppage-thumbnail-permalink.html

投稿日表示のフォーマットのカスタマイズ

ファビコンふじろじっく
サムネイル
投稿日表示のフォーマットのカスタマイズ
年月日表示を日本式にわかりやすくします。
https://fujilogic.blogspot.com/2019/05/timestamp-format-customize.html

ページネーション(前後記事リンク)を表示させる

ファビコンふじろじっく
サムネイル
ページネーション(前後記事リンク)を表示させる
これは基本的に無くてはならない機能ですよね。
https://fujilogic.blogspot.com/2019/05/display-pagenation-link.html