Mattaku

まったくなことを全く新しい方法でなんとかしたいヤキブリです。

はてなブログ無料版はどのくらいデザインカスタムできる?

おはようございます。ヤキブリです。

今日のテーマははてなブログの無料デザインカスタマイズ。

 

無料でデザインいじりたい

現在のところ、ヤキブリははてなブログを無料で使用しています。

そのうち、proに昇格することも考えていますが、

まだまだ収入も少ないヤキブリ...。

ポートフォリオサイトの運用もありますしね。やっぱり節約したい。

まずは無料でどのくらいカスタマイズできるのかを試してみました。

PC表示は少しカスタマイズできる

調べつつも、実際に自分で試したことを下記に記しました。

 

記事はHTMLも自分で書ける

 

CSSも上部に<style>~</style>の中に記載すれば変更できる。

ヤキブリは、はてなブログの字がなんだか大きく感じるので、

 

 p{font-size:15px;}

 

を指定してすこし小さくしています。

これ、すべての記事などで適応したい場合、設定のカスタマイズCSS部分に記載するとOK

ある程度どうにかなるので嬉しい。

 

また、一部CSSが効かないこともありますが(テーマ作成時に意図して設定しているものと思われる)

 

 p{font-size:15px !important;}

 

で反映できます。

(自分で一から作るときは確実に使わない手ですが)

 

また、もう一ついいなーと思ったことですが、

【編集見たまま】【HTML編集】を行ったり来たりすれば、

タグとかを一つ一つ書かなくてよいことですね。

 

ヤキブリは、昨今のブログやWordpressを使用したことがまだなかったので、

(かれこれ10年ほど前...ガラケー時代にやってたくらいだよ!)

そういうものかもしれませんがすごく楽だなーと思いました。

好きなところだけいじればいいし。

これなら、初心者でもHTML、CSSの勉強もしながら出来ていいかも??

 

これから記事を書きながら、他にも何が出来るか試したいと思います。

良い感じのが出来たらコード紹介しようかなあ。

 

 無料テーマにも美しいものがある

 

テーマストアには、割とたくさん素敵な無料テーマがありました。

テーマの中にはレスポンシブデザイン(スマホ画面にぴったりになるように設計されたデザイン)になっているのもあって、

そちらを選択するのがおすすめです。

なぜなら....無料だとスマホのカスタマイズが出来ないから........。

(これが一番つらい)

最近は大半の人がスマホで情報収集しますもんね。

大事、スマホファースト。

 

ちなみにヤキブリのブログはこちらのテーマをお借りしています。

 

blog.hatena.ne.jp

 

ほどよい立体感が素敵だと思いました。

ぺたっとした影のない、フラットデザインが好きなのですが、これはいい!と感じたのでお借りしました。

作成者様のページに移動すると、配色の変更の仕方や、

グローバルナビの設置方法など、手厚く説明してくださっています。

 

その他のヤキブリが気になった、レスポンシブ対応のテーマはこちら。

blog.hatena.ne.jp

blog.hatena.ne.jp

blog.hatena.ne.jp

blog.hatena.ne.jp

 

ついついシンプルが目について。

他のカラフルテーマも素敵なのがあります!

お気に入りを探してみてください。

また変更して配色とかカスタムしたら、紹介します。

 

テーマストアまとめはこちらから。

テーマ ストア - はてなブログ

 

ヘッダとフッタにHTMLを記入できる

 

PC版は、下記にHTMLを記載して、好きなコンテンツを挿入できました。

デザイン > カスタマイズ > ヘッダ(orフッタ)

まだたくさん記入しているわけではないので、不具合や制限を感じてはいないです。

 

ヘッダは、最上部のコンテンツを追加できます。

今回はグローバルナビを設置しました。

フッタは、最下部の編集。

つまり、真ん中をいじることはできないんですよね。

これ、proならできるの??調べてみないと。

 

記事をカード表示できない

 

ヤキブリ的に結構つらかったのは、無料版だとPC版もスマホも記事をカードみたいに並べられないことです。

最新の記事から順に、上からだららら~~と並ぶ。

これは過去の方の記事に目を通してもらう確率が減ってしまう。

 

しかも一列。二列か三列にはしたい。

この点が実は結構気になっていて、proにしたい要因になりそう...とか思ってます。

何かしら方法が見つかれば報告しますね!

対処法知っている方、ぜひ教えてください.......。

 

ひとまず今は、記事編集のなかにデフォルトである、【続きを読む】 を挿入して、せめて本文駄々洩れだけは避けています。

 

スマホ表示はかなり制限される

無料版でつらいのは、スマホ表示がカスタムほとんどできないんですよね。

先にも述べましたが、これはレスポンシブ対応テーマをお借りすれば、ひとまず大丈夫です。

 

レスポンシブデザインを適応させるときの注意

 

注意するのは、

 

デザイン > スマートフォン > 詳細設定 > レスポンシブデザイン

レスポンシブデザイン設定方法

かならずチェックをいれます。

これを設定して初めて、レスポンシブデザインが適応されました。(ちょっと迷った)

 

制限を超えて自由にデザインしたいんだ!!と思うなら、やはりproに昇格でしょうか。

スマホについてはまだまだ調整していない(そもそもテーマがいい感じなので)

のですが、何が出来そうかまた調査します。

はてなブログの無料版ではPC表示はある程度カスタムできる

今回いろいろ試して思ったのは、

  • PC版は自由度がそこそこある
  • 無料テーマでもきれいなものがある
  • 広告やっぱりいやん(proじゃないと消せません)
  • カードレイアウトしたい

といったところです。

 

無料でサーバー代もセキュリティ対策もさほど気にせず、これだけ使うことができるので、

ヤキブリはひとまず満足です

 

今後Wordpressに移行したり、proに昇格することもあるかもしれませんが、

ひとまずこのまま節約節約!で、楽しみたいと思います。

 

二日目もちゃんと書いたよ!ヤキブリでした!