はてなブログ無料版でも出来る限りデザインに凝ってみた
皆さまこんにちは！ぶーちゃん夫です。
この休日はブログデザインの勉強をしておりました！
はてなブログ無料版でどこまでデザインを設定できるのか試行錯誤していました！
普段から支出の最適化を掲げているぶーちゃん夫婦にとっては、
有料版を使うのさえも節約の意志に反する行為となるので必死に勉強しました。
このブログに以前からお越しになっている方は、
もうお分かりかと思いますが、
ブログデザインが一新しております！
使用したテーマはこちら👇
「Pucca」
水色とピンクの淡いパステル調のテーマです。
当ブログにぴったりなイメージのため、即決定しました！
当初からデザイン設定がされていて、
例えば目次はこのように表示されます！
斜めボーダーがおしゃれ！
Puccaの既定デザインは？
大見出しは例えばこのように表示されます！
見出しデザインを確認
大見出し
斜めボーダーが特徴的なおしゃれな見出し！
中見出し
チェックマークが使い勝手が良いですねー！
小見出し
うん。シンプル。
ブログテーマデザインを確認！
フッターはこんな感じ。
コメントボタンがおしゃれ！
スマホレスポンシブ対応
今やスマホからの流入がメインとなるので、これは欠かせません。
ぶーちゃん夫婦は普段スマホ/タブレットから更新をしているので、スマホ版での見た目しか気にしていません！
今回の記事で出てくるデザイン画像は全てスマホ仕様のものです！
ブログデザインを自分なりにアレンジ
ただただテーマを選んではい終わり、
とはいきません！
ぶーちゃん夫婦なりのアレンジを加えました！
トップページ構成
見やすく落ち着いた構成にしております！
1番のポイントは、
はてなブログでは無料版ですと
トップページがカード型デザインにできないので大変見にくいのですが、
擬似的に1カラムのカード型デザインに変更する事ができました！
トップページに飛んできた人を即時記事一覧画面に飛ばす設定でプログラムを組んでおります！
タイトル下/記事間の帯
テーマ通りのパステルボーダーラインがおしゃれです！
背景画像にプリセットのピンクを加えてパステル感を増しました！
タイトル下ナビゲーションにこだわった
正直ここに一番こだわり、時間をかけました！
よく有料版のブログで見かける様なナビゲーションの帯を入れました！
なんと横スクロール付きです！
ボタン形式になっており、例えばインテリアのボタンを押すと、インテリアのカテゴリー記事がずらっと1カラムで出てきます！
うん。見やすい！
何度も言いますがこれスマホから見てますからね！
最後に...読者登録よろしくお願いします！
デザイン面については、
ぶーちゃん夫婦が初心者ということもあり、
当ブログでは全く無関心でしたが、
これからはただ記事を書くだけでなく、
デザインにもこだわり、
皆様に愛されるブログを作りたいと考えております！
宜しければ読者登録お願いします🤲
