【コピペだけ】はてなブログ UnderShirtsのカスタマイズまとめ

 

f:id:senazilla:20200318072457j:image

 

wordpressからはてなブログに引っ越したので、当ブログで行ったカスタマイズをまとめました。htmlやCSSが1mmもわからなくても(わたしです)、コピペだけで簡単にできるものばかりです。ときどき追記更新します。

 

 

使用テーマ

UnderShirt - テーマ ストア

さんざん迷った挙句UnderShirtに。

理由

・レスポンシブ

・カード型

・シンプル

・見やすい

 

グローバルナビ

スマホで横2列の縦組み、パソコンで均等な横並びになるレスポンシブなナビゲーションメニュー | web sign*

レスポンシブメニュー、かつJavaScriptjQuery)を使わずCSSだけで作れるものを探していて、結局シンプルなこの形に。

 

↓実装してないけどこれも試した。追従メニューにしたいひとはこっちがおすすめ。

固定グローバルナビゲーションでアクセス倍増!コピペで簡単! - Bambi's BLOG @ hatena

 

フッター固定ナビ

【レスポンシブ】スマホ固定フッターメニュー★ボトムナビゲーションでアクセスUP! - Bambi's BLOG @ hatena

グローバルメニューを追従しない代わりに、モバイルのフッター固定メニューを追従に。

  

サイドバーのデザイン変更

はてなブログで使えるサイドバーカスタマイズまとめ - Minimal Green

もともとサイドバーに入っていた灰色の線?(区切り線)を消す方法を探していてたどり着いた。ついでにサイドバーのタイトル?見出し?もおしゃれな感じに変更。

 

検索窓

【はてなブログ】ブログ内検索ボックスをスマホ用ページの上部に表示させる方法 - チップの日常

サイドバーの灰色の線?を消したらサイドバーがぼんやりした感じになったので、ブログ内検索ウィンドウをhtmlで作成して設置。

 

カテゴリ表示位置を左上に

はてなブログ【Under Shirt カスタマイズ】「カテゴリ」名の文字位置をアイキャッチの上にする - papico's note

記事一覧ページで見たときに、カテゴリ表示をアイキャッチの上にするカスタマイズ。

 

目次

【CSS】コピペするだけ!「目次」をカスタマイズする方法 - えむしてっく

ぬるっと動くのが気に入っています。デザインもう少し凝りたいな。

 

シェアボタン

コピペで簡単!はてなブログのSNSシェアボタンをカスタマイズ | SHIROMAG

ブログの雰囲気と合わせて四角いフラットデザインに。影は消しました。おしゃれでお気に入り。

 

関連記事をシェアボタンより下に

はてなブログの関連記事を記事下よりも下に移動させるカスタマイズ | SHIROMAG

記事ページで、関連記事がシェアボタンより上に出るのが気になったので修正。みんないろんな方法を書いてましたがリンク先のコードを入れたら一発で直りました。神なんですか……?

 

フッター

はてなブログのフッターに『コピーライト』や『お問い合せリンク』を導入する方法を紹介しますの! - 元IT土方の供述 

フッターにコピーライト©︎を入れたりお問い合わせを入れたり。  

 

パンくずリスト ※現在使用していません

【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ

 パンくずリストでカテゴリーを階層化。

 

カテゴリーをタグクラウド風にする

【はてなブログ】スマホ版デザインにタグクラウド風カテゴリ一覧を表示する方法 - YUN MOM

上のパンくずリストがテーマと干渉する(?)ようで、デザインが崩れるのでタグ風に変えました。

 

もしもアフィリエイトのかんたんリンク

【もしもアフィリエイト】かんたんリンクをCSSコピペだけでカスタマイズする方法 -ハッピーお父さんの人生と財産

リンク先をベースに、色味だけ雰囲気と合うように調整。

 

スマホで表示した時に、右側に変な空白?ができるのを改善

【はてなブログ】スマホで見た時に余白によって横ブレする現象の対処法【レスポンシブ】【横揺れ】 - キリンノックスのブログ

微調整。スマホ(iPhoneXSです)で表示したときに右側がなぜか余っていたので修正。

 

おまけ はてなブログで使えるfontawesomeまとめ

はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい!