tsuyu-noteHOME備忘録ガーデニングツールプライバシーポリシーお問い合わせtsuyu-noteめんつゆが買ったものとか勉強したことをつらつら書くよ。2019年7月31日ブログをとことんカスタマイズしてみました。最近変更したテーマ、Thumbnail(サムネイル)はアイキャッチが大きく表示しておすすめのテーマです。まとめブログをとことんカスタマイズしたよ5月はブログのカスタマイズに時間をかけることが多かったです。絶賛カスタマイズ中ですが、はてなブログでカスタマイズしたことをまとめました。当ブログは現在WordPressで運用しております。テーマをMinimalismからThumbnailにブログのテーマをMinimalismからThumbnailに変更しました。ストアヘッダの画像も削除して、トップページ、記事ページともにがらりと変わりました。【トップページ】before↓after【記事ページ】before↓after以前からテーマを変えたいなとは思っていて、この条件を満たすテーマがなかなかなくて、テーマを探すのに時間がかかりました。トップページがカード型であること記事ページが1カラムであることトップページをカード型にしたいブログの写真はなるべく綺麗なものを使うようにしています。フリー素材を使うなら下の2つのサイトを使うことが多いです。写真素材なら「写真AC」無料(フリー)ダウンロードOKオーダンは特におすすめ。下の画像もオーダンから持ってきました。しまむらの服のことを書いているのに写真がおしゃれっていう。お花の写真をブログに載せることが多いです。ブログでは画像を重視しているため、より画像が大きく表示されるカード型のテーマを探していました。記事ページを1カラムにしたいずっと気になっていた右側のサイドバーのわちゃっと感。サイドバーは他の記事を探したりするときには便利だけど、記事を読むときには使用しませんよね。他の記事を見てもらうためのメニューは、フッターや記事下に置けばいいわけだし、トップにはグローバルメニューもあるし。1カラムのすっきり感に憧れ、1カラムのテーマを探しました。1カラムのテーマって本当に少ない。ストア他にもあるのかもしれませんが、今は2カラムが主流のようですね。ストアをインストールすることになったわけです。グローバルメニューにfontAwesomeを導入グローバルメニューは以前のテーマMinimalism導入時に、下の記事を参考にカスタマイズしたもの。ひつじの雑記帳グローバルメニューは問題なく導入できたものの、fontAwesomeのアイコンがことごとく読み込めなかったです。私の環境ではツールのスパナアイコンしか表示できませんでした。スパナ以外なぜか□で表示されるの、文字化け?そのため一時はアイコンが全部スパナでした。いや何かしらアイコンはあったほうが可愛いかと思って。調整した結果、以下のHTMLを追加したらグローバルメニューでfontAwesomeのアイコンが使えるようになりました。参考にしたのはこちらの記事です。技術を磨くだいぱんまんアイコンのグラデーションはこの記事を参考に、カスタマイズしました。宇宙時代より(旧)シェアアイコンでもfontAwesomeを使っています。シェアアイコン用に下のHTMLをheadに追加しました。先ほどグローバルメニューのところでfontAwesomeの話をしましたが私の環境では2つのHTMLをheadに追加しないとうまく動きませんでした。crossorigin="anonymous">なぜだ・・・。fontAwesomeは便利だけどやっぱり苦手だなとも思います。記事下の2つに絞りました。○個目のh2タグという指定をするために、下のサイトを利用させていただきました。ありがとうございます。UXエンジニアになりたい人のブログフォントタイプを游ゴシックにフォントタイプを游ゴシックに変更しました。ブログ名を変更しました。新:tsuyu-noteブログ名変更に至った理由ヘッダ画像を使いたくなかったからです。過去にこんな記事を書いているくらいですから、以前はばりばりヘッダ画像を使っていました。tsuyu-noteではなぜヘッダ画像を使いたくない、と思ったかといいますと。皆さんは自分のブログの読み込み時間を測ったことはありますか?私は恥ずかしながら今までありませんでした。最近このサイトを使って初めて測ってみました。Insightsスコアは100点満点で0〜49(遅い):赤50〜89(平均):オレンジ90〜100(速い):緑色だそうです。モバイル、パソコン両方のスコアが表示されます。ちなみにAmazonのモバイル版はこんな感じでした。19という恐ろしい数字をたたき出しました。(すみません、スクリーンショットはとり忘れました。tsuyu-noteをiPhoneで、WiFiではなく4G環境下で開いてみましたが、画像の読み込みにすごく時間がかかりました。いうより途中で開くのを諦めました。こんなに待たせていたなんて本当に申し訳ないです。これではまずいと思いよく読まれる記事の画像の圧縮、再アップロード。スライダーの削除(この記事を参考に導入しましたが、残念)。はてな公式のソーシャルボタンの削除(はてなスターは残しました)。トップページに表示するページ数を9から6に減らす。実施しましたが改善されませんでした。あとできることといえばヘッダ画像の削除くらい。ちなみにこのときは下のヘッダ画像を設定していました。ヘッダ画像にブログ名を入れていましたが、画像にブログ名を入れてヘッダ画像として使用すると、モバイル版で文字がぼけることが、以前から気になっていました。そこで思い切ってヘッダー画像を削除することにしました。上の画像をヘッダに設定してiPhoneで見るとこうなります。画像を加工しましたが、ヘッダを削除すると確かこんな感じでした。「めんつゆの学習帳」の文字と、下のサムネイルがあっていない気がしてすごく違和感を感じました。ヘッダタイトルにGoogleフォントを使うことも検討しましたが(というより一時期使っていた)、あまり好きなフォントがありません。私が日本語フォントで好きなのは、うずらフォントのような手書き感のある文字です。そこで愛着のあったブログ名でしたが、変更するに至りました。ブログ名変更後にしたことブログ名変更後の処理に関しては下のブログを参考にしました。Google」は旧サーチコンソールの機能のようです。新しいサーチコンソールで再クロールを依頼する方法は、下の記事がわかりやすかったです。昨日の夜再クロールを依頼して、今朝には新しいブログ名に変わっていました。グーグルさん仕事が早い。まとめブログをカスタマイズして綺麗に見せたい、便利な機能を追加したい。読み込み速度を改善して読者にストレスを感じさせたくない。いう2つの要素は相反していますが、どちらもブログを運営する上で大事な要素だと思います。この2つの要素の落としどころを見出したいがために、いろいろ模索した結果、この記事にまとめた方法で落ち着きました。ブログの読み込み速度についてですが、今はなんとかスコアが30まで上がりました。これからも改善していきたいです。パソコンは基本的に70以上のスコアで、すごく早くはないけど問題はなさそうです。「このページの読み込み、すごく遅いんだけど」とかありましたら、フッターのお問い合わせより連絡をいただけると嬉しいです。[...]関連記事ブログ作成時に使っているサービス、ツールまとめブログ作成時に使っているサービス、ツールをまとめました。AirMoreに関して追記、修正しました。iPhoneでも画像に□とか○とか矢印とか追加...iPhoneでも画像に矢印、◻︎を追加できる、アプリskitchについてまとめました。【アクセス数微増】2019年4月のアクセス数に...ブログを始めて2か月たちました。わずかながらアクセス数が伸びたので、アクセス数に関してお話ししたいと思います。【ニキビ】私の肌荒れが直った理由はグリセリンフ...「10年前の私に今の私の肌を見せてあげたい。」そう思えるほど、昔の私の肌は最悪でした。めんつゆが買ったものとか勉強したことを、つらつら書いています。質問などありましたら、フッターのお問い合わせより、お気軽にお問い合わせください。損益報告プライバシーポリシーお問い合わせtsuyu-noteめんつゆが買ったものとか勉強したことをつらつら書くよ。