ブログのデザインをカード型に一新しました!テーマ「Thumnail2」おしゃれです【はてなブログ】

変更したデザインのブログトップページ


【追記:2019.5.11】
2019年3月下旬にはてなブログからWordPress(テーマ:THE THOR)に引っ越しをしました。


ブログをはじめて2ヵ月以上が過ぎ、3回目のテーマ変更です。

初心者すぎて、カスタマイズに一週間ちかくかかってしまいました。ブログの更新をストップして集中したはずが!!

テーマ「Thumnail2」とても気に入ってます。嬉しくて、記事に残すことにしました。

テーマ「Thumnail2」に、たどりつくまでの経緯

今回で3度目のテーマ変更に至ったわけですが、一番初めはminimalgreenさんが作成された「Haruni」を使わせていただいていました。

めちゃくちゃ可愛いんですよ!

サムネイル画像も大きくて、グラデーションがきれいで、レスポンシブデザインで一目で気に入りました。

しかし、悲しい事に、老化現象なのか、ピンク地に白の文字が見えずらくなってしまって、だんだん目を凝らして見るように・・・

私、目がいいのが自慢でしたが、老眼になるのは早そうです😭

カラーを変えればいい事だけど、一覧表示の際に『タイトルの下に本文も入れたいな』っと思いまして、テーマ変更にチャレンジ。

本文がない方がすっきりしているのですが、自分がよそのブログを見に行く時、たくさん記事がある場合は、タイトル下の本文を参考に選ぶことが多いので。

あたり前の事なんでしょうけど、CSSが破壊されてびっくり!!!

続きまして、こちらはシンプルかつカスタマイズしやすいデザインの「Sentence」を使ってみることにしました。

作成者は、しめひつさんで、私の決め手は何といっても文字が大きめでレスポンシブデザインである事でした。そう、いろんな意味で文字大きくないときつい!!

初心者の私でもとても使いやすかったです。

悩みはただ1つ、サムネイル画像が小さいよーーーー😭カスタマイズでどうにかできたのかな???

一応ブログの項目に『自作イラスト』が入っているんですよ、うちのブログ。

まだブログ始めて、5枚しか描いていませんけど(汗)

唯一の趣味なので、こここだわりたい!サムネイル大きいのがいい・・・

でもサムネイル画像を大きくすると読み込みに時間がかかるの?こういうのがきっかけでデザイン度の高いWordPressに移行する方も多いのかしら??

ホームページ作成ソフトでAdobe GoLiveとSiriusは使ったことがあるので、頑張ればWordPressもできるかもしらないと、考えた事もあったのですが、はてなブログ居心地いいな~

またブログテーマに悩む日々。そんな中、はてなブログで1500人以上の読者をお持ちのめんおうさんが、

「雑記ブログを100コ読んで、そのいいところと、よくないところをまとめます!」

といったすごい企画をTwitterで発表!

私もすぐさまリツイートして、お願いしました。(参加条件が、企画発表のツイートをリツイートする事だった為)

結局めんおうさんは100コどころではなく、雑記ブログを230コも読んで、10000文字以上の記事を出してくださいました。

簡単にできることではないですね。本当にありがとうございました。

その記事はこちら🔻

名指しで書かれてたらどうしよう・・・なんて、ドキドキしながら読みましたが、そんなことはなく、純粋に多くのブログを比較して、いいところとよくないところをまとめていらっしゃいます。

雑記ブログじゃなくても参考になりますね。

特に「ブログの読みやすさの重視」に関しては、いくつも思いあたるので、この辺も気にしながら、サムネイルが大きいテーマに変更しようと決めました。

私の思う、ブログテーマの希望

  • 一覧表示でサムネイルが大きいカード型デザイン
    トップページだけじゃなく、カテゴリーから表示したときもカード型で表示してくれる
  • サムネイル画像の下にタイトルと本文が入っている

そして、やっと出会えました!!「Thumnail2」

テーマ「Thumnail2」の感想

作成者は、ろくぜうどん さんです。

はてなブログで、いくつもテーマを発表されている方で、ご本人のブログもとてもおしゃれです!

サムネイル画像大きい!!なんかちょっとWordPress風!?

ただ私、ブログ初心者ですからね・・・カスタマイズは苦労しています・・・

いまだにグローバルメニューを画面の上部に固定できず💢

気づけば一週間近く、カチカチいじっていてびっくり。

一週間もかかったのに、画面の表示サイズによってはデザインくずれぎみ💦

rokuzeudonさん、素敵なデザインを活かせずごめんなさい。

ご本人は、新テーマの「UnderShirt」をおすすめされていますが、「Thumnail2」には本文も入っているので、やっぱり惹かれます。

追記:昨日の今日で、大変申し訳ありません。
私の確認不足でした。「UnderShirt」もタイトルの下に本文を入れることができます。
サイドバーの感じも気に入っているので、私はこのまま「Thumnail2」を使ってみます。(更新:2018.08.08)

 

追記2
2019年2月から、テーマを「UnderShirt」にかえました。
「UnderShirt」の方が全体的に軽く感じます。
スマホ・モバイル・パソコン、全部希望通りに表示されて本当にありがたいです。

ろくぜうどんさん素敵なテーマをありがとうございます!(更新:2019.03.01)

外部CSSファイルを共有化してカスタマイズ

今回、テーマ変更とカスタマイズに時間がかかった理由の一つに『ドロップボックスに外部CSSファイルを置いて共有化』に挑戦してみました!

なんせ「ドロップボックスってなに??」「CSSファイルってなんのソフトで作るの??」ってところから始まっているので、直リンクできた時の感動は涙が出るほど嬉しかったです。

無事にCSSファイルを共有化して、カスタマイズを進めてみて、本当に作業のスムーズさに驚きました。

はてなブログのダッシュボード画面から、CSSのコードを入れるボックスまで道のり、長いしボックスは小さいし、更新するといちいちデザインの画面に戻るし・・・

はてなブログさん、辛口でごめんなさいね。

ドロップボックスに置いたCSSファイルをいじって、上書き保存するだけで、適用されるので本当に楽です。

くわしくは、はるなぴさんのブログで丁寧に説明してくださっています。

それと、外部CSSの直リンクの方法を試している間に、c-miyaさんの外部CSSについての記事も見つけたので一緒に貼らせていただきました🔻

c-miyaさんは、はてなブログでテーマを多数発表されている方です。やはりご本人のブログもすっきりされていて素敵です!

私も一通り、外部CSSでカスタマイズが終わったら、はてなブログ指定のCSSボックスに貼り付けてみます。

最後に

3回目のテーマ変更でつくづく思ったのですが、やっぱり知識がないので、前回のカスタマイズしたコードが、消していいのか悪いのか、どれが何だか忘れてしまい困りました。

日本語で何のコードか入れてある部分もあるけど、入れ忘れたコードもあるので、どこまでが何のコードかよくわからない。

バックアップをとった意味がない💢💢

次はカスタマイズした内容も備忘録的に残しておこうと思いました💦「あなただけよ」と言われたら返す言葉がありません。

『夏休み長いなー、もういらないよー』と思っていましたが、気づけば残り約半分。長いようであっという間ですね。

毎日子ども達と格闘しております。でも去年はできなかったお手伝いができるようになっていたり、宿題の時間が短縮されていたり、成長を感じます。

ただ、今年の宿題が多すぎて、まだまだかかりそうです・・・

デザインも一新して、これからもがんばります!
本日も読んでくださり、ありがとうございました。

WordPress初心者だからこそ
高機能レシポンシブ有料テーマ
THE THOR(ザ・トール)

\公式サイトで詳細をみる/

THE・THOR│公式サイト