サイトやブログを運営していく上で、やはり気になるのは読者が見てどうか…という点でしょうか。
その中で、コンテンツの質だったり画像や表などを使った見やすさだったり、全体的なデザインだったり、表示までの速さだったりしますよね。
今回、デジタルに未だに弱すぎる私がデザインを変えようとして、経験した事や思った事・感じた事を書いていきたいと思います。
デザインテーマ変更時の注意点
これは、先人様が必ずと言っていいほど仰っていた言葉ですが、
必ず元のデータをバックアップ！
(経験者は語る)
これを取っておかないと、思ったようにいかなかった場合や戻したい時に大変な事になります。（特にデジタル弱者や初心者は）
デザイン崩れやうまく表示されない事も結構あったので、別にサイトを一つ用意して確認しながらやるのも良いと思いました。
はてなブログのデザインテーマ
公式テーマや、テーマストアでは沢山の人がデザインしたものをインストールする事が出来ますよね。
今回、私は一覧ページをカード型にしたかったのとメインカラーをブラックかグレーあたりで落ちつかせたて、あとはちょこちょこ変えたいなと考えていました。
バックアップや元のデザインの画像など全然残してなかったのですが、元々（今も）のデザインは、ゴトーさん(id:hogehoge223)の【510 – テーマ ストア】です。
レスポンシブ対応なのと、見出しや全体的なデザイン、モバイルでの読みやすさ・操作性に注力しています、との事でコレだと思いインストールし、1年弱使いました。
ナビゲーションは付けずカスタマイズもほぼせずノーマルの状態での使用です。
そして、デザインを変えようと試したのは、
こどみすさん(id:codomisu)作
【Minimalism – テーマ ストア】
【Codomisu Flat – テーマ ストア】
・絶大の人気テーマ、『NO TITLE』でお馴染み
シロマさん(id:shiromatakumi)作
【Brooklyn – テーマ ストア】
・カード型一覧デザインの
orefolderさん(id:c-miya)作
【ZENO-TEAL – テーマ ストア】
・シンプルデザインでカラーバリエーション豊富
JOEさん(id:dreamark)作
【CONTENTS – テーマ ストア】
などを、訳わかんないなりに試行錯誤しながら試したわけです。
サイトの表示速度
www.yuuu-nii.com
購読させて頂いている『ゆうう兄さん』(id:yuu-tunamayo)の記事がきっかけで、画像を多用(ラップみたい笑)している私のサイトはさぞかし通常の通信では重いのだろうと思って【PageSpeed Insights】とやらで測定してみることに…
画像は残していませんが「モバイル」「パソコン」ともに黄色の７０点台でした。
うわ〜やっぱりなかなか重いんだなぁ…と思いましたが。
(が…この続きは後ほど)
ブログの表示速度において重いと言われているもの
色んなサイトを読み漁ってましたが、コレは重くなるとか書いてあったのをあげてみると、
・JavaScriptの多用
・動画やアニメーション
・リンクが多い
・はてなスター、デフォルトのソーシャルボタン、はてブコメント
・カスタマイズのしすぎ
・Milliardなどの関連記事
などが、サイトが重い理由としてあげられていますよね。
他にも、スペックの低いパソコンやアクセスの集中など他が原因のこともあるようですが。
デザイン変更後の表示速度
《変更前》
【デザインテーマ（５１０）】
・関連記事Milliard(2列にカスタマイズ)
・圧縮していない大きめの画像多数
・スター、デフォボタン等そのまま
という感じで、
「モバイル」「パソコン」ともに【７０点台】
《変更後》
【Brooklyn】
cssは真っ白な状態から
・一覧はカード型
・トップページの記事一覧をflexboxにて、カード型２カラムのレイアウトに変更してみる。（はてなブログpro限定） – 神戸グルメゲリラ
・はてなブログ トップページをカード型レイアウトにカスタマイズしよう！【PCのみ】 – あいすのブログ
・はてなブログのトップページ一覧表示機能を利用してカード型っぽいレイアウトにするカスタマイズ – つばさのーと
この4つで試した結果。
（が…の続き）
Milliardも外した状態でコレ。
4つの何に変えても【赤Poor】でした。
上記の画像の下に改善策的なのが表示してもらえるんですが、
オメェ〜のブログ画像が重てぇ〜んだよ
と、お叱りを受けました。
やっぱりカード型や他が重いのかなぁ〜と…一覧ページのはてなスターを非表示にしたり、デザインテーマを変えてみたり、カード型を変えてみたりしましたが、
・カード型の画像が崩れて直せない
・記事ページの画像がサイドバーを突き破る
・微妙な調整がきかない
・シェア、フォローボタンが崩れる、表示されない
・スマホ表示が何とも言えない
など、超初心者を抜け出せない私は、修正のしようがありませんでした。
何百枚もある画像を全て貼り直せば、ある程度は軽くなるのかもしれませんが、何よりデザイン崩れが酷いので下手したら全てのページを1からやり直す必要が出てきます。
打つ手がないので、再び【デザインテーマ（510）】をインストールし直して、一覧ページを同じカード型にして表示速度を調べてみると、
えぇ〜！！！
同じカード型にしただけで他何もイジってないのに？
あら、不思議♡
何が違うのでしょうか。
記事書いてるもの自体で、書かれた記事に合わせたせい？
何はともかく、画像の圧縮はしていくとしいて、記事を全てやり直すのは無理があるので、このまま【510】で所々カスタマイズしていく事にしました。
結論(まとめじゃない)
試した数が少ないのでハッキリと断言してしまうのも良くないですが、
修正・調整出来ない私に問題アリ！
あ、違った(違ってないけど)
デザインテーマによってテーマそのものが重い可能性アリ！
ですかね。
特に【カード型テーマ】【Brooklyn】は、画像を多用する人には向いていないんじゃないかと思いました。
決して悪いと言っている訳ではありません。
修正や微調整が出来ない人にとっては、表示速度を優先させるならば難しいテーマなのかな、と感じた次第です。でも魅力的な事には変わりません。
現在のカスタマイズ
デザインテーマ【510】に決めて、少しずつカスタマイズします。
まずは、譲れない一覧ページのカード型。
先述した4つのサイトを参考にしましたが、いずれも
・部分的な色や表示、非表示を変えたくても上手くいかない
・スマホ対応していない、表示がおかしな事になる
・思ったのとちょっと違う
などの理由から断念。
他にないのか探したところ、ありました！
blog.wackwack.net
スッキリと見やすいデザインで、モバイル表示も対応。しかも、トップ一覧だけでなくカテゴリ一覧にも対応、そしてデザインや画像などが崩れる事がないという、最高です。
唯一バーの色が変わるトコだけなくしました。
他にやった事。
・メニューバー入れた
・シェア、フォローボタン
・カエレバ、ヨメレバ、トマレバ
・見出し、サイドバータイトル、ボタンリンク
・見出し付囲い
・会話形式取り入れ
・関連記事
などです。
CSSが結構たくさんになりました。
画像の圧縮はまだ10枚程しかやっていません。
デザイン等の参考にした記事のご紹介
今現在、カスタマイズするにあたって参考にさせて頂いた記事です。
関連記事は今の状態で2列にしたいのに、(丁寧に説明もあるのに)上手くいきません。Milliardのカスタマイズのゆきひーさんの記事も何か見れなくなっちゃってるし…デジ弱お手上げ！
会話形式なんですが、最初は、優しすぎるぼっちさん(id:Apps)の【会話形式のブログ記事を半自動でつくるテンプレートを作った – ぼっちサーファーのブログ】で試したのですが、なんと！
入力までは上手くいったものの、いざテキストコピーしようとしたら、変なふうに変換されちゃって出来ない！
何度か繰り返したのですが、同じだったので断念。
あと、シロマさんの【吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 – NO TITLE】を試したら、何も出〜ん！言葉のみ…上手くいかん。
というわけで、クリアメモリさんのやつに、シロマさんのCSSにあった画像と吹き出しのシャドウを頑張って入れてみた。
デジ弱乙(笑)……そっ閉じ
……
あら、残念♡
先日まで会話ごとの間隔が大きすぎて直しても直らなかったのに、いつの間にか変わってる…
もうちょっと変更したい部分もあるので、できる時に出来ることだけやっていきます。
ちなみに、ここまでのカスタマイズをして(画像は圧縮してない)
【モバイル80点、パソコン75点】
(あ、パソコンがなぜか１点上がってる)まぁまぁですかね。
あとは、重くなりそうな項目を修正していこうと思います。
さいごに
今回デザインテーマ自体が実は表示速度を遅らせているんじゃないか、という事で書かせて頂きました。
画像を多用しているにも関わらず、同じカスタマイズでこれだけの差が出るのはやはり大元に原因があるのかな、と思いました。
同じようなデザインテーマを使っている人も多いかと思いますので、Wi-Fi環境じゃない時に表示されるまで重いなぁ〜と感じている人は、参考にしてみて下さい。
表示速度で読んでいる人に離脱されるなんて勿体ないですもんね。
コンテンツの質と共に、読まれる前の段階も大事にしたいと思いました。
コメント