the japanese girlfriend.

洋服ブログ。SNAP(コーディネート)を中心に好きなものを撮影していきます

【はてなブログ】テーマSOHOにカスタマイズしてみました

f:id:the_japanesegirlfriend:20191219000004j:plain

前回、デザインテーマをSOHOにしたことをお話ししたので、今回はさらに当ブログで行っているカスタマイズのお話を。

当ブログでは、多くのサイトさんにお世話になってカスタマイズを完成させています。
今回はそんなサイトさんへのお礼の気持ちと、自分のための記録をかねてリンクをまとめてみました。興味のある方は参考にしてみてください。

※当ブログは有料版の『はてなブログPRO』を利用しています。無料版では同じように表示されない場合がありますので、ご注意ください

 

  

ヘッダー画像の表示調整

f:id:the_japanesegirlfriend:20190829121600j:plain

はてなブログPC画面のヘッダーサイズは1000×200。 そのサイズの画像を用意して貼り付けたところ、なぜかいらない余白が…嫌な予感の中、スマホ画面でも確認してみると、同じく余白+画像が拡大されて表示されていました。
絶望を感じながら、なんとか解決する術はないものかと探したところ、救世主のような記事に出会いました。


画像サイズなどの関係から、紹介されているコードを少し調整して使用していますが、驚くほどするっと問題を解決することができました。

 

 

記事欄に枠をつける

f:id:the_japanesegirlfriend:20190829121703j:plain

PC画面では2カラムで表示されるので、記事とサイドバーの部分が分かりやすいように記事欄を枠で囲みたいと思い、またしても探し回りました。


紹介されているのはデザインテーマ『Spriea』のカスタマイズですが、SOHOでも問題なく反映されました。

 

 

記事一覧表示を可愛く

f:id:the_japanesegirlfriend:20190829121731j:plain

トップページ記事一覧(PROのみ)、カテゴリー記事一覧、アーカイブ記事一覧などなど…いくつもある一覧表示のデザインをもう少し可愛くできないかと悩んでいた時、こんな記事に出会いました。


ただ囲っただけなのにこんなに変化するとは!と感動してしまった私は、さらに画像の表示を大きくたいと考え、こちらの記事を参考にさせていただきました。


他にもPC画面で二列に表示、日付やカテゴリーなどを非表示にとちょこちょこ手を加えて今の状態を完成させました。

 

 

フッターに問い合わせなどのリンク 

f:id:the_japanesegirlfriend:20190829121803j:plain

はてなブログをPROにすると、もとあるフッター部分を非表示にすることができます。 当ブログでも導入したところ、なんだか寂しい感じになってしまったので、改めてフッター部分をカスタマイズすることに。何件か紹介されている記事を見かけたのですが、こちらがとても分かりやすかったです。

 

 

上に戻るボタン

f:id:the_japanesegirlfriend:20190829121828j:plain

個人的に大好きな上に戻るボタン。せっかく設置するなら動きがスムーズなのがいいな、うっすら透けてるのがいいな、などと考えながら探しまわりようやく出会えたのがこちらの記事でした。


色などを調整して、お気に入りのボタンが設置できました。

 

 

終わりに 

皆さんのおかげでとっても簡単にカスタマイズすることができました。本当に感謝感激です。リンクばかりのまとめ記事になってしまいましたが、これもどなたかのお役にたてば幸いです。

以上、『【はてなブログ】テーマSOHOにカスタマイズしてみました』でした。

 

▶︎ 追記:2019.12.24

この記事を書いてからしばらく経ちまして、当ブログではさらにカスタマイズを追加しました。

そこで続編となる『【はてなブログ】テーマSOHOにカスタマイズしてみました2 』を書かせていただきましたので、よければ続けてご覧ください。

  

ブログカスタマイズ記事一覧>>