こんにちは。sorademoです。
久しぶりのブログ更新です。
この空白の３週間に何をやっていたかというと主に仕事とブログカスタマイズです。
※ブログはワードプレスに移行しましたので、当時のブログカスタマイズをまとめています。
はてなブログテーマを「UnderShirt」に変更しました！
いままで使っていたテーマ「DUDE」もイカしたカッコいいデザインだったのですが、アイキャッチ（サムネイル）画像を大きく表示することができる「UnderShirt」に惹かれて、ブログデザイン変更に踏み切りました！
ついでにブログタイトルも変更しました！
旧ブログタイトル「そらでも飛びたい。」
もう意味わかんないタイトルですよね。
仕事で疲れた日に、「そらでも飛んで旅行に行きたいなあ」という想いを言葉にしたのですが、100記事突破したら記念に変更しようと思っていました。
ですが、ブログテーマを変更するこのタイミングが丁度良いので、ブログタイトルも変更してしまいました！
新しいブログタイトルは「sorademo.com」
idがsorademoなんですよ。由来は旧ブログタイトルで。なんのひねりもないです。
※ワードプレス移行後は『SORADEMO BLOG』に変更しました。
新しく導入したブログカスタマイズ！
堂々と言いますが、すべてコピペです！
先人の方々のカスタマイズは本当に参考になりました。感謝、感謝です！
一覧形式をアイキャッチ画像に変更する！
UnderShirtの大きなサムネイル画像をアイキャッチ画像に変更するカスタマイズです。
この方の記事のバグフィックス版を使わせていただきました。
紹介されているhtmlでは記事一覧における変更のみになりますが、page-indexをpage-archiveに変更することで、記事一覧だけでなくカテゴリーやアーカイブページにおいても、アイキャッチ画像をサムネイルとして表示することができました！
ブログのヘッダー画像をhtmlで入れる！
はてなブログにデザインテーマのBrooklynを適用＆カスタマイズ！
以前は写真の一部分しか表示できていなかったので、今回は適切な大きさのヘッダー画像を用意し、画像にブログ名も入れ込んで、画像自体にトップページへのリンクを入れました！
グローバルナビを変更する！
スマホで横2列の縦組み、パソコンで均等な横並びになるレスポンシブなナビゲーションメニュー
以前までは、スマホ画面でトグルボタンメニューが表示されるデザインにしていました。
シンプルで気に入っていたのですが、トグルボタンを押さないとメニューが表示されないので（←あたりまえ）、最初からメニューが見えていた方が良いかもと思い、スマホ画面では２列にメニューが表示されるカスタマイズを採用しました！
フッターの「powered by ブログ名」を追加する！
【はてなブログカスタマイズあるある】だいたい皆、フッターは無視
ブログのフッターがデフォルトでは「powered by hatena」になっていますが、PROであれば詳細設定から非表示にできます。
そこに自分の「powered by sorademo.com」を追加しました。
一覧表示で本文とはてなスターを消して、アイキャッチ画像のみ表示する！
この方のブログカスタマイズは大変参考になりました。
他のカスタマイズも、だいたいこの方を参考にしています。感謝です！
UnderShirtにおいて、記事の直下に画像と「続きを読む」を設置することで、記事一覧のページにはサムネイル画像しか表示しないスタイリッシュな感じになります。
ですが、如何せんすべての記事の「続きを読む」の箇所を変更するのは大変なので、こちらのカスタマイズで、消したいところは非表示にしています。
「前のページ」ボタンを追加する！
はてなブログの記事一覧に「前のページ」ボタンを追加する方法【コピペOK】
この方の記事にあるように、はてなブログの記事一覧は「次のページ」ボタンがあっても、「前のページ」ボタンがないです。
無いよりはあった方が良い派なので、参考にさせていただきました。
デザインCSSも記載されていますので、助かりました。
はてなブログに「前のページ」ボタンを設置する（jQuery）
カテゴリーやアーカイブページでは初めから「前のページ」ボタンがあります。
こちらの方のコードでは、「前のページ 」ボタンが一覧の最終ページで重複しないような工夫があります。
お洒落な囲みを設置する！
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
お洒落なボックスデザインです！
情報が上手くまとまっている記事には、必ずと言っていいほどポイントの囲みがある気がします。
要所要所で使っていきたいです。
プロフィールカードを設置する！
はてなブログの記事下にプロフィールカードを表示するカスタマイズ
ブログ記事の下にある「この記事を書いた人」ってやつです。
ここに読者登録のリンク、インスタグラムのリンクを付けています。
導入してみたかったのです。
Font Awesomeを追加する！
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
前からFontAwesomeはカスタマイズの一部に使っていたのですが、古いバージョンだったので新しいバージョンに変更しました。
このFontAwesomeを使いつつ、各見出しのアイコンを見直しました。
ベーシックなデザインから遊び心が効いたものまでバリエーションがすごいです！
以上、sorademo.comとして再発進です！！