この記事では、当ブログで実施した改造内容を一覧にまとめます。詳細を記事にしたら、そのリンクを貼っていきます。
* in English: [Blogger] My customization list
ちなみに、当ブログでは日本産フリーテーマの"QooQ"を使用しています（タイル表示の通常版ではなく、シンプルなリスト版にしました）。最初はBlogger Official Themeの"Notable"を選んでみたものの、見た目や改造しやすさにちょっと不満があり、すぐに切り替えた経緯があります。
QooQは、高速かつ必要最低限の機能が搭載されていて、カスタマイズしやすいのが特徴です。あまりやりすぎて読み込みが遅くならないようにしようと思いつつも、改造にはまってしまい記事そっちのけでいじってました…。QooQの改造は既にいろんな方が書いてくださっているので、先輩方から学びつつアレンジを加えて好みに近づけていきました。ありがとうございます。Webデザインは未経験で、HTML、CSS、JavaScriptは少しかじった程度でしたが、いっぱい学んで良い経験になりました。
以下が改造一覧です。基本設定や他のテンプレートにも共通する改造も含みます。
一応、大まかに分類していますが、つながっているものもあります。
もし使えそうなのがあれば、どうぞご自由にアレンジして使ってください。
※2021/2/2追記: 筆者は音楽制作にはまってしまったので、Blogger改造記事は当面そっちのけになります。もし詳しく知りたい改造があればコメントください。優先的に書きたいと思います！
もし興味があれば、ヘッダーリンクから音楽制作(Studio One)シリーズものぞいてみてください。喜びます。
レイアウト、カスタマイズ、設定
- 配色の変更(共通)
- サイドバーの配置変更(共通)
- faviconの設定(共通)
- 記事下のカテゴリボタンを削除(QooQ)
- 記事上下のSNSシェアボタンを削除(QooQ)
- 記事下にサムネイル付き関連記事を表示(QooQ)
- 「検索向け説明」を有効化(共通)
- コメントの表示場所を「ポップアップウィンドウ」に(共通)
- サイトフィードの設定を「先頭のみ」に(共通)
- 「カスタムロボットヘッダータグ」を有効化(共通)
- 自分のページビューを追跡しない設定(共通)
- Google Search Console に登録(共通)
- Google Analytics の設定(共通)
- 「メールでフォロー」ガジェットを追加(共通)
HTML, CSS, JavaScript
- ブログタイトル、記事タイトルを改行する(共通)
- Attributionをフッター下のCopyright部分に移動(共通)
- 記事下の「前の記事」「次の記事」ボタンを削除(QooQ)
- 記事タイトルに背景色と枠線追加(共通)
- 引用文に自動で枠線追加(共通)
- uタグでマーカー下線を引く(共通)
- olタグで囲みを付ける(共通)
- ナビゲーションバーをタイトルの下に移動(QooQ)
- ヘッダーとナビゲーションバー固定(QooQ)
- FontAwesome追加(共通)
- 検索ウィンドウをヘッダーに表示(QooQ)
- 「Introduction」ページリンクをヘッダーに表示(共通)
- jQuery追加(共通)
- ページトップへ戻るボタンを追加(共通)
- 記事の最初に目次を自動で追加(共通)
- サイドバーに目次を追加+スクロール追従(共通)
- SyntaxHighlighter追加+改造 … やめて highlight.jsに乗り換え(共通)
- Highlight.js追加(共通)
- Code Box Copy追加 … 自作Copy Buttonに変更(共通)
- Copy Buttonを改良＋highlight.jsをインライン化(共通)
- パンくずリストにアイコン追加(QooQ)
- リンクホバー時に文字色を変える＋動かす(共通)
- フォント変更(共通)
- 記事に最終更新日とアイコンの表示(共通)
- 記事上下にオリジナルシェアボタン追加(共通)
- スマホ用ハンバーガーメニュー追加(QooQ)
- 魚を泳がせる～CSSアニメーション～(共通)
- OGP画像の設定(共通)
- 自己紹介の配置変更(共通)
- highlight.js用HTMLコード生成ツール公開(共通)
- ブログカード+テキストリンク作成用ブックマークレット作成(共通)
- ブックマークレット作成ツール公開(共通)
- ホームページの記事リストデザイン変更(QooQ)
- 関連記事のデザインと表示内容を変更(QooQ)
- ホームページに「人気の投稿」を表示(QooQ)
- サイトマップ（記事一覧）追加(共通)
- オリジナルアイコン「水かき」追加(共通)
No comments:
Post a Comment