future -気ままに日記-

日常と好きを気のままに。なので、記事の加筆修正もあるよ。

ブログを少しずつカスタマイズしてみる

はてなブログを使って感じたことは、Wordにある文章作成機能があるから

初心者でも使いやすい(書きやすい)のかなと思いました。

ただ、「html編集」タブがあるせいで、htmlとCSSを使っての

ブログ(特に文面)デザインのカスタマイズの汎用性が高いと思います。

 

マジかよ…。こういうのは……凝ると、ヤバいです(苦笑)

 

私は、趣味のイラストの方でfc2ブログを持っていますし、htmlタグとメモ帳からホームページ作成までしたやつなので(爆)htmlなら多少分かります。

CSSは正直、分かりませんけど、コピペで使ってました(笑)

 

まぁ、普通よりは、ちょっとだけ知っているだけの人間ですが

少しずつカスタマイズしていってます!

 

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

 

現在、使っている見出しデザインはこちらを参考に使わせていただいています。

www.notitle-weblog.com

 

大見出し:可愛い四角

普通にシンプルでも可愛い!カラーも好きなのでそのままです。

 

小見出し:可愛い丸

紹介サイトを見て頂くと分かりますが、カスタマイズしてますね♪(爆)

元々薄いグリーンだったので、濃くしようと思ったのですが、ブルーにしてます。

(なぜブルーにしたのかは後述します)

  • 大見出し(h3)→小見出し(h5)へ
  • 丸とアンダーバーのカラーの変更

CSSはこんな感じになっています。

 

チェック入れたところを見ると、どこがカスタマイズされているか分かりますね。

 

ちなみに、/* 小見出し */と書いてあるのは、コメントアウトと言うものでして、CSSにメモ書きを残せる書き方です。小見出しの前後にある記号「/*」「*/」に書いてあることは、全部、CSSに関係しない、メモ書きだよって認識してくれるのです。

 

zero-plus.io

 

今、色々と足していっているので、どのタグがどこまでかを見て分かりやすいように、個人的に追記しています。

 

お試し:これはh6に設定しています。

hitorizumu.com

 

こちらのサイトの見出しデザインも可愛いので、「左端に丸いマーク」を中見出しに使おうかなと思ったけど、やはりデザインの系統が違うよなで辞めました。

まぁ、系統別に使って、全然いいんですけどね←

 

見出しタグはh2~h6まで、はてなブログで使えるそうです。

他のブログはh2:大見出し、h3:中見出し、h4:小見出しですが

はてなブログはh3:大見出し、h4:中見出し、h5:小見出しになるので

流用する時は注意が必要のようです。

 

/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/

 

まぁ、見て分かる通り、以前まで、中見出しは設定してなかったんです…。

他に似たデザインがなかったので←

 

◆三角がないから三角があればいいのに…。

→どうも三角は再生ボタンならイケるけど、2つになるか重ねるとさらに複雑みたいだったので辞めました。

 

◆上が四角で、下が丸にしたのがいいかなぁ…。

→分からん!皆さんはちゃんと勉強したうえでカスタマイズしてね;;;

 

「border-radius」というCSSタグが、四隅の角を丸くさせるというのが分かったので、これでちゃちゃっと指定してみました。

 

www.webcreatorbox.com

 

中見出し:可愛い葉っぱな形

三角作れないかなとやっていたんですが…。

 

 

可愛い四角のCSSタグベース+「border-radius: 10px 100px / 120px;」(可愛い丸のCSSタグの入力箇所確認して)追加したら、何か葉っぱっぽく見える形が出来上がりましたので、カラーはグリーンにしました。(感覚で選んだグリーンですので、好きにカラー変更してください。)よって、小見出しはブルーにしただけです。(笑)

www.colordic.org

---------------------------------------------------

 

サイドバーの利用は前回、こういう感じに紹介しました(笑)

future525.hatenablog.com

 

最近は蛍光マーカー風のアンダーラインをやってみてます。

simplelifenavigation.com

 

あと、最新記事のサムネイルありにしてみました!

miya-moto-blog.hatenablog.com

 

別にサムネイルなしでもいいかなと思ったのですけど…。

 

 サムネイルあり、いいですね

 

自分でも過去記事探す時に便利(笑)

サムネイルの大きさを設定できますが、私は縦50、横100にしています。

 

www.fuji-blo.com

 

トップへ戻るボタンも追加してみました。

 

miya-moto-blog.hatenablog.com

 

ホームボタンページも設置してみました。

 

いやー、やり始めると色々止まらなくなるからダメですね;;

 

/////////////////////////////////////////////////////////////////////////////////

 

地味なことに気付きましたが、このブログ、スマホだとデザイン反映されないんだって、気づきました。このテンプレートはレスポンシブデザイン対応じゃないんかーい。

スマホは設定で出来ました!なんだよぉ!最初から適応じゃないなんて面倒だなぁ!;;;

 

あと、番号リストや箇条書きの変更は、元々、ブログテンプレートの適応デザインがあって、崩れるので辞めました。

囲み枠は色々あるのでやっていきたいと思います。

 

※自作の区切り線やってみてました。無料版なので、続きを読むとか、区切り線自体がないんですよね。邪魔だったらすみません;;