ブログで手を入れてみたとこ備忘録
自分のブログをいじっているうちに「ああいうデザインにしたいな」「こういう使い方ができたら便利だな」と思うことが細々と出てきました。
ネットで調べたり、手法を公開してくださってる先人の方にならったり、あるいは身近で詳しい人に尋ねたりと、試行錯誤しながら進めています。
それに伴いブログに関する備忘録を記録するようになり、それも自分のブログ上で見られると(自分が)扱いやすいなと思ったので、箇条書きでまとめてみました。 ブログカスタマイズtipsと言うよりも、ブログを形作るにあたって手を入れたところのほぼ全てに関する備忘録です。
自身が見直すための備忘録としてまとめているため、細かい説明など省いてる箇所が多くあります。また、自分自身ブログカスタマイズについて学習中のため、混み入ったご質問等はご容赦ください。
各項目で、参考にさせていただいたサイト様へのリンクを貼らせていただいます。わかりやすく教えてくださる先達の方々からの情報にいつも助けられており、とてもありがたいです。
外部ファイルの呼び出し
CSSの外部化
画像ファイルの外部化
アイコンフォントの利用
FontAwesomeの利用手順。詳細
jQueryの利用
head内に呼び出しのためのコードを追加する。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
初期設定、基本設定
記事のnoindex化
必要のないページが、検索にかからないようにする設定。詳細
はてなブログ専用設定
テーマの設定
レスポンシブ対応テーマにする場合は、
デザイン>スマートフォン>詳細設定>レスポンシブデザイン
にチェック。
カテゴリの階層化
親・子・孫カテゴリを作り、サブメニューのカテゴリ欄にも折りたたみ式で表示する方法。 詳細
トップページの一覧表示化
はてなブログでは、トップページを一覧表示にするには有料会員登録が必要。ただ、トップページのURLからアーカイブページへ転送することで、見かけ上トップページが一覧になっているように表示することはできる。詳細
aboutページ
設定>基本設定>aboutページ
から編集。自由記述欄はhtmlを直接書き込める。
プロフィール欄
はてなIDの非表示化
完全に消すことはできない。はてなの良いところはSNS的な機能があることなので、非表示にこだわる人は別サービスのほうが良いのかも。 詳細
本体デザインCSS
テキスト、見出し、リストなどのデザイン変更
ブログタイトルを2段にする
トップへ戻るボタン
ハンバーガー型ドロワーメニュー
テーマ「マテリアルぽっぷ」用
メイン/サブカラー配色変更
テーマ作者さんの解説ページ >> 配色の変更方法 - マテリアルぽっぷ
カラム数変更とサイドバー設置
アーカイブページのカード整形
縦長タイル型のカードが横に2~3列並ぶデザインを、横長タイルが1列で並ぶデザインに変更。カード内のサムネイルや文字の位置も調整した。 詳細
記事修飾用CSS
アイコンフォント付きボックス
FontAwesomeのアイコンをワンポイントに付けたボックス。2タイプで、色・角の丸み・アイコンを自由に変更できる。 詳細