Maximal Life

渋谷で働く営業本部長のブログ

はてなブログ:コピペだけで実施した Minimalism のカスタマイズまとめ

f:id:ss17935:20190324091333j:plain

 

 2018年9月にテーマを「Minimalism」に変更してカスタマイズしてきました。

文系人間の私のカスタマイズはすべてコピペです。

オーソドックスなカスマイズはほぼ完了したので、ここらで一度まとめてみました。

コピペだけでカスタマイズしたい方々の参考になれば嬉しいです。

 

 

SNS シェアボタンのカスタマイズ

SNS シェアボタンの設置と関連記事を記事下よりも下へ移動

はてなブログ標準の SNS シェアボタンをオリジナルに変更しました。

また、ボタンの表示場所が関連記事の下だったので、関連記事をボタンより下に移動しました。

www.maximal-life.work

 

SNS シェアボタンの変更

私のブログは 50% 以上の方がスマホで閲覧しているようです。

そうなると LINE ボタンが必須という事で SNS シェアボタンを変更してみました。

www.maximal-life.work

 

LINE ボタンの PC 時の非表示化

LINE ボタンって PC では意味がないので、スマホ以外では非表示にしました。

www.maximal-life.work

 

シェアボタンを画面横・画面下に固定

記事上下ではなく、ブラウザの左サイドに縦長の SNS シェアボタンを設置しました。

 

www.maximal-life.work

 

プロフィールに SNS ボタンなどを設置

サイドバーのプロフィールに、読者になる、Twitter、Feedlyボタンを設置しました。

www.maximal-life.work

 

読者になるボタンのカスタマイズ

標準だと目立たない、読者になるボタンを大きく目立つようにしました。

www.maximal-life.work

 

サイドバーのカスタマイズ

プロフィール画像を大きく目立たせる方法

サイドバーにある標準のプロフィール画像を大きく目立つようにしました。 

www.maximal-life.work

 

サイドバーに Twitter のタイムラインを表示

サイドバーに Twitter のタイムラインを表示しました。

www.maximal-life.work

 

サイドバーの一番下のコンテンツの固定

サイドバーの一番下のコンテンツを固定して、無駄な空白を無くしました。

www.maximal-life.work

 

固定ページを利用したカスタマイズ

プライバシーポリシーの設置

プライバシーポリシーのページを作成し、サイドバーからリンクさせました。

www.maximal-life.work

 

about ページを格好良くカスタマイズ

格好良い about のページを作成しました。

www.maximal-life.work

 

ヘッダー周辺のカスタマイズ

おしゃれなアイキャッチ画像の作成

ヘッダー画像、アイキャッチ画像用におしゃれな画像を作成しました。

www.maximal-life.work

 

ヘッダー部分に好みの画像を挿入

ヘッダーにオリジナルの画像を挿入し余白などの細かい部分を調整しました。

www.maximal-life.work

 

グローバルナビをコピペで追加

ヘッダー画像下にグローバルナビゲーションを設置しました。

www.maximal-life.work

 

目次・見出し・記事タイトルのカスタマイズ

記事タイトルをおしゃれにカスタマイズ

www.maximal-life.work

 

見出しを格好良くカスタマイズ

www.maximal-life.work

 

目次の作り方とカスタマイズ

目次を設置してちょっとだけおしゃれにしました。

www.maximal-life.work

 

フッター周辺のカスタマイズ

フッターにコピーライトを記載

www.maximal-life.work

 

WordPress 風にフッターをカスタマイズ 

フッターをちょっとオシャレにカスタマイズしました。

www.maximal-life.work

 

その他のカスタマイズ

エントリーの文字サイズの変更

標準だと小さくて読みにくいのでブログの文字を大きくしました。

www.maximal-life.work

 

強調表示の太字部分に蛍光ペンのアンダーラインをつける方法

太字で強調した部分に蛍光ペンのアンダーラインをつけて目立たせました。

www.maximal-life.work

 

Font Awesome 5 で格好良いアイコンを使う方法

about ページ、グローバルメニューなどにアイコンを挿入しました。

www.maximal-life.work

 

自分の過去ブログをブログ内に貼り付ける方法

ブログ記事の中に自分の過去記事をカード形式で挿入してみました。

www.maximal-life.work

 

アコーディオンパネルでテキストの表示・非表示を切り替え

長い HTMLコードやネタバレ対策としてアコーディオンパネルを使ってみました。

www.maximal-life.work

 

上に戻るボタンの設置

ブログの最下部に上に戻るボタンを設置しました。

www.maximal-life.work

 

パンくずリストの導入

読者が現在位置を把握できるようにパンくずリストを設置しました。

www.maximal-life.work

 

記事一覧に「前のページ」ボタンを追加

www.maximal-life.work

 

テスト用ブログの作成

www.maximal-life.work

 

大見出しタグを h3 から h2 へ自動で変更

SEO 的によろしくないと言われているはてなブログの見出しの構造。

これを h3→h4→h5 から h2→h3→h4 に自動で変更しました。

www.maximal-life.work

 

スマホでヘッダー画像がきちんと表示されない場合の解決方法

レスポンシブデザインでヘッダー画像がスマホに正しく表示されないことがあります。

きちんと表示されるように解決しました。

www.maximal-life.work

 

終わりに

HTML とか CSS とか全く知らなくても、このくらいまでならできちゃいます。

一部、どうしても思うようにならずに断念した事もありますが。

今後は少しだけ、HTML とか CSS とか勉強してみようかなぁ...なんて思ってます。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ