the japanese girlfriend.

洋服を楽しむことを推奨していきたいブログ

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

f:id:the_japanesegirlfriend:20190827142637j: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にカスタマイズしてみました』でした。