2018年9月にテーマを「Minimalism」に変更してカスタマイズしてきました。
文系人間の私のカスタマイズはすべてコピペです。
オーソドックスなカスマイズはほぼ完了したので、ここらで一度まとめてみました。
コピペだけでカスタマイズしたい方々の参考になれば嬉しいです。
SNS シェアボタンのカスタマイズ
SNS シェアボタンの設置と関連記事を記事下よりも下へ移動
はてなブログ標準の SNS シェアボタンをオリジナルに変更しました。
また、ボタンの表示場所が関連記事の下だったので、関連記事をボタンより下に移動しました。
maximal-life.hateblo.jp
SNS シェアボタンの変更
私のブログは 50% 以上の方がスマホで閲覧しているようです。
そうなると LINE ボタンが必須という事で SNS シェアボタンを変更してみました。
maximal-life.hateblo.jp
LINE ボタンの PC 時の非表示化
LINE ボタンって PC では意味がないので、スマホ以外では非表示にしました。
maximal-life.hateblo.jp
シェアボタンを画面横・画面下に固定
記事上下ではなく、ブラウザの左サイドに縦長の SNS シェアボタンを設置しました。
maximal-life.hateblo.jp
プロフィールに SNS ボタンなどを設置
サイドバーのプロフィールに、読者になる、Twitter、Feedlyボタンを設置しました。
maximal-life.hateblo.jp
読者になるボタンのカスタマイズ
標準だと目立たない、読者になるボタンを大きく目立つようにしました。
maximal-life.hateblo.jp
サイドバーのカスタマイズ
プロフィール画像を大きく目立たせる方法
サイドバーにある標準のプロフィール画像を大きく目立つようにしました。
maximal-life.hateblo.jp
サイドバーに Twitter のタイムラインを表示しました。
maximal-life.hateblo.jp
サイドバーの一番下のコンテンツの固定
サイドバーの一番下のコンテンツを固定して、無駄な空白を無くしました。
maximal-life.hateblo.jp
固定ページを利用したカスタマイズ
プライバシーポリシーの設置
プライバシーポリシーのページを作成し、サイドバーからリンクさせました。
maximal-life.hateblo.jp
about ページを格好良くカスタマイズ
格好良い about のページを作成しました。
maximal-life.hateblo.jp
ヘッダー周辺のカスタマイズ
おしゃれなアイキャッチ画像の作成
ヘッダー画像、アイキャッチ画像用におしゃれな画像を作成しました。
maximal-life.hateblo.jp
ヘッダー部分に好みの画像を挿入
ヘッダーにオリジナルの画像を挿入し余白などの細かい部分を調整しました。
maximal-life.hateblo.jp
グローバルナビをコピペで追加
ヘッダー画像下にグローバルナビゲーションを設置しました。
maximal-life.hateblo.jp
目次・見出し・記事タイトルのカスタマイズ
記事タイトルをおしゃれにカスタマイズ
maximal-life.hateblo.jp
見出しを格好良くカスタマイズ
maximal-life.hateblo.jp
目次の作り方とカスタマイズ
目次を設置してちょっとだけおしゃれにしました。
maximal-life.hateblo.jp
フッター周辺のカスタマイズ
フッターにコピーライトを記載
maximal-life.hateblo.jp
WordPress 風にフッターをカスタマイズ
フッターをちょっとオシャレにカスタマイズしました。
maximal-life.hateblo.jp
その他のカスタマイズ
エントリーの文字サイズの変更
標準だと小さくて読みにくいのでブログの文字を大きくしました。
maximal-life.hateblo.jp
強調表示の太字部分に蛍光ペンのアンダーラインをつける方法
太字で強調した部分に蛍光ペンのアンダーラインをつけて目立たせました。
maximal-life.hateblo.jp
Font Awesome 5 で格好良いアイコンを使う方法
about ページ、グローバルメニューなどにアイコンを挿入しました。
maximal-life.hateblo.jp
自分の過去ブログをブログ内に貼り付ける方法
ブログ記事の中に自分の過去記事をカード形式で挿入してみました。
maximal-life.hateblo.jp
アコーディオンパネルでテキストの表示・非表示を切り替え
長い HTMLコードやネタバレ対策としてアコーディオンパネルを使ってみました。
maximal-life.hateblo.jp
上に戻るボタンの設置
ブログの最下部に上に戻るボタンを設置しました。
maximal-life.hateblo.jp
パンくずリストの導入
読者が現在位置を把握できるようにパンくずリストを設置しました。
maximal-life.hateblo.jp
記事一覧に「前のページ」ボタンを追加
maximal-life.hateblo.jp
テスト用ブログの作成
maximal-life.hateblo.jp
大見出しタグを h3 から h2 へ自動で変更
SEO 的によろしくないと言われているはてなブログの見出しの構造。
これを h3→h4→h5 から h2→h3→h4 に自動で変更しました。
maximal-life.hateblo.jp
スマホでヘッダー画像がきちんと表示されない場合の解決方法
レスポンシブデザインでヘッダー画像がスマホに正しく表示されないことがあります。
きちんと表示されるように解決しました。
maximal-life.hateblo.jp
終わりに
HTML とか CSS とか全く知らなくても、このくらいまでならできちゃいます。
一部、どうしても思うようにならずに断念した事もありますが。
今後は少しだけ、HTML とか CSS とか勉強してみようかなぁ...なんて思ってます。
↓ ランキングに参加しています。よろしければポチッとして下さい。
