sorademo.com

お妻さんとの旅行記をメインに綴るブログ

sorademo.com

はてなブログテーマ「UnderShirt」でブログカスタマイズしました!

f:id:sorademo:20190330225026j:plain

こんにちは。sorademoです。

久しぶりのブログ更新です。この空白の3週間に何をやっていたかというと主に仕事とブログカスタマイズです。

 

はてなブログテーマを「UnderShirt」に変更しました!

いままで使っていたテーマ「DUDE」もイカしたカッコいいデザインだったのですが、アイキャッチ(サムネイル)画像を大きく表示することができる「UnderShirt」に惹かれてブログデザイン変更に踏み切りました!

ついでにブログタイトルも変更しました!

旧ブログタイトル「そらでも飛びたい。」

もう意味わかんないタイトルですよね。仕事で疲れた日に、そらでも飛んで旅行に行きたいなあという想いを言葉にしたのですが、旅行とかマイル以外の記事も増えてきたので、100記事突破したら記念に変更しようと思っていました。ですが、ブログテーマを変更するこのタイミングが丁度良いので、ブログタイトルも変更してしまいました!

新しいブログタイトルは「sorademo.com」

idがsorademoなんですよ。由来は旧ブログタイトルで。なんのひねりもないです。

新しく導入したブログカスタマイズ!

堂々と言いますが、すべてコピペです!

先人の方々のカスタマイズは本当に参考になりました。感謝、感謝です!

 

一覧形式をアイキャッチ画像に変更する!

UnderShirtの大きなサムネイル画像をアイキャッチ画像に変更するカスタマイズです。この方の記事のバグフィックス版を使わせていただきました。紹介されているhtmlでは記事一覧における変更のみになりますが、page-indexをpage-archiveに変更することで、記事一覧だけでなくカテゴリーやアーカイブページにおいてもアイキャッチ画像をサムネイルとして表示することができました!

 

ブログのヘッダー画像をhtmlで入れる!

以前は写真の一部分しか表示できていなかったので、今回は適切な大きさのヘッダー画像を用意し、画像にブログ名も入れ込んで画像自体にトップページへのリンクを入れました!

 

グローバルナビを変更する!

以前まではスマホ画面でトグルボタンメニューが表示されるデザインにしていました。シンプルで気に入っていたのですが、トグルボタンを押さないとメニューが表示されないので(←あたりまえ)、最初からメニューが見えていた方が良いかもと思い、スマホ画面では2列にメニューが表示されるカスタマイズを採用しました!

 

フッターの「powered by ブログ名」を追加する!

ブログのフッターがデフォルトでは「powered by hatena」になっていますが、PROであれば詳細設定から非表示にできます。そこに自分の「powered by sorademo.com」を追加しました。

 

一覧表示で本文とはてなスターを消して、アイキャッチ画像のみ表示する!

この方のブログカスタマイズは大変参考になりました。他のカスタマイズもだいたいこの方を参考にしています。感謝です!

UnderShirtにおいて、記事の直下に画像と「続きを読む」を設置することで記事一覧のページにはサムネイル画像しか表示しないスタイリッシュな感じになります。ですが、如何せんすべての記事の「続きを読む」の箇所を変更するのは大変なので、こちらのカスタマイズで消したいところは非表示にしています。

 

「前のページ」ボタンを追加する!

この方の記事にあるように、はてなブログの記事一覧は「次のページ」ボタンがあっても、「前のページ」ボタンがないです。無いよりはあった方が良い派なので、参考にさせていただきました。デザインCSSも記載されていますので、助かりました。

カテゴリーやアーカイブページでは初めから「前のページ」ボタンがあります。こちらの方のコードでは「前のページ 」ボタンが一覧の最終ページで重複しないような工夫があります。

 

お洒落な囲みを設置する!

先ほどから登場しておりますお洒落なボックスデザインです!情報が上手くまとまっている記事には必ずと言っていいほどポイントの囲みがある気がします。要所要所で使っていきたいです。

 

プロフィールカードを設置する!

ブログ記事の下にある「この記事を書いた人」ってやつです。ここに読者登録のリンク、Twitterのリンク、インスタグラムのリンクを付けています。導入してみたかったのです。

 

Font Awesomeを追加する!

前からFontAwesomeはカスタマイズの一部に使っていたのですが、古いバージョンだったので新しくバージョンに変更しました。このFontAwesomeを使いつつ、各見出しのアイコンを見直しました。ベーシックなデザインから遊び心が効いたものまでバリエーションがすごいです!

 

以上、sorademo.comとして再発進です!!

ページが重くなってしまったので、なんとかしないといけないとは思うのですが。

 

「なぜあのサイトはうまくいっているのか?」と一度でも思ったら読んでほしい1冊です。出版社: 日本実業出版社 (2018/11/20)