このブログを立ち上げて色々いじった箇所を忘れないための覚え書き。
ブログ
blogger

Blogger.com - あなただけの素敵なブログを簡単に作成できます。
伝えたいことを自分らしく発信できます。あなただけの素敵なブログを作成して、自分の知識や経験、最新のニュースなど、伝えたいことを投稿しましょう。
ドメイン
XServerドメイン

ドメイン名取得【XServerドメイン】
ドメイン取得サービス【XServerドメイン】は格安1円から取得可能!人気の.com/.net/.jpは1円からご利用いただけます。
テンプレート
くうく堂さんのQooQ list版を使用。

blogger日本語テンプレート「QooQ」ダウンロードページ
ダウンロード QooQダウンロード(59KB) QooQ list版ダウンロード(59KB) ワードプレス版「...
お問い合わせページ
Googleフォーム
Google フォーム: オンライン フォーム作成ツール | Google Workspace
undefined
フォント
Google FontsのBIZ UDGothic(本文)と、Reggae One(タイトル)のフォントを使用。

Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
アイコンフォント
Google Material Symbols

Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
最終更新日表示
mizusameさんをベースにMaterial Symbolsのアイコンを使用。

【Blogger】投稿に最終更新日を表示させる(ウィジェットバージョン1用)
バージョン1のブログの投稿ウィジェットにおいて、投稿ページに最終更新日を表示させるカスタマイズを行いました。 すでに同じテーマで多くの記事が書かれていますが、筆者のカスタマイズの場合それらとは方法が若干異なるため、備忘録として記しておきます。
TOPページの記事一覧にスニペット表示 + No Image画像の自動挿入
No.8さん。

QooQ トップ記事一覧のカスタマイズ【Blogger】 | No.8
私はQooQのリスト版を使うことにしましたが、シンプルすぎてちょっと寂しいので、記事をいくつか書いてから記事一覧部分(新着記事)のカスタマイズをしました。 完成イメージはこちら。 記事サムネイルの画像を大きく QooQリスト版では、記事サムネイルとして丸い画像がポツンとあ...
フッター
kamoshakeh webさんをベースにカスタマイズ。
![[Blogger] フッターレイアウト - AttributionとCopyright](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYAL-46GUBqqkuOKLJxxFXQzuqdMDpJCyYLmUQ764SBQa4fKXP6hIx_Q_gVDp8hvvq2uHkwXUi9B0keETJBpJfO4Q_S-9p_j77Ql4_elM4NwwBNZw5tCkcyg9_KA2URVeuqfc4TlA0gIw/w1200-h630-p-k-rw-no-nu/blogger-footer-layout.png)
[Blogger] フッターレイアウト - AttributionとCopyright
この記事では、「フッターレイアウト」の変更についてまとめます。フッターは、おそらくブログの中で最も見られることの少ない部分でしょう。でも、だからこそ、そこがきれいに整っていると「おっ」と思ってもらえます(たぶん)。
TOPへ戻るボタン
インドアな日々さんをベースにMaterial Symbolsのアイコンを使用。

簡単に設置できる!Blogger ブログでトップへ戻るボタンを設置する
目次
IB-Noteさん。

【全見出しタグ対応】高速&シンプルな自動生成目次 | IB-Note
いろいろな自動生成目次のソースコードを読んで比較検討を重ねた結果、「これだ!」と思う理想の目次を作ることができました。
引用
サルワカさんをベースにカスタマイズ。

CSSで作る!魅力的な引用デザインのサンプル30(blockquote)
画像を使わずにHTMLとCSSだけで実装できる「引用ボックス」のデザインを30個紹介します。シンプルなものからカッコイイものまで。
ブログカード
The other way roundさん。

ブログカード作成ブックマークレットをアップデートしました
FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...
外部リンクアイコン
インドアな日々さんをベースにMaterial Symbolsのアイコンを使用。

【 QooQ カスタマイズ 】 Blogger ブログでリンクの装飾を CSS でカスタマイズ 【 外部リンクアイコン他 】
ここでは、外部リンクと内部リンクを区別するため、a タグにリンクアイコンを付ける方法を紹介します。また、マウスカーソルがリンクの上に乗ったとき、色が変わる調整も一緒にやっています。
このカスタマイズによりmoreタグ、目次、画像、ブログカードにも外部リンクアイコンがでるようになり、最初の3つはこちらのページの対処法で非表示にできたものの、ブログカードの非表示のやり方が 分からずめっちゃ悩んで頑張った結果cssに下記を追加でなんとかいけました。
.blogcard a::after { display: none; }
SNSボタン
X公式

自分のウェブサイトにXボタンを追加する方法
自分のウェブサイトにXボタンを追加したい場合があります。その方法は以下のとおりです。
TOPページのサムネイルを大きく
リモスキさんをベースにカスタマイズ。

【Blogger】QooQリスト版 トップページ記事一覧のサムネイル画像サイズを変更する方法 | リモスキ
QooQ リスト版のサムネイル画像サイズを変更する方法をまとめました。
トップページのパンくずリストを非表示に
勉強でもするかさん。

【Blogger/QooQ】トップページのパンくずリストは廃止したい
QooQのトップページを少しカスタマイズします。今回はトップページの時だけパンくずリストを非表示とする変更です。
ナビゲーションバーをヘッダー下に移動
インドアな日々さんをベースにカスタマイズ。

【 QooQ カスタマイズ 】 ナビゲーションバーをカスタマイズする
吹き出し
ICS MEDIAさん。

HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ(吹き出し)。この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。
ラベルをカテゴリーとタグに分ける
IB-Noteさん。なかなかうまいこといかずかなりイジってたらできた...

【Blogger】ラベル表示をカテゴリーとハッシュタグに分ける方法 | IB-Note
JetThemeのブログでよく見かけるあの仕様を通常テーマで再現する方法について、詳しくご紹介します。
関連記事
ふじろじっくさん。

【QooQ】関連記事ウィジェットのカスタマイズ | ふじろじっく
QooQ用関連記事ウィジェットのデザインと機能をカスタマイズ
最新の投稿ウィジェット
IB-Noteさん。

【超軽量】Blogger用最新の投稿ウィジェット | IB-Note
フィードを利用して、最新の投稿ウィジェットを作ってみました。ある程度の表示は欲しいけど重いのはちょっとなぁ…という方におすすめです。
0 件のコメント:
コメントを投稿