にゃもぶろ

道産子アラフォー主婦による「ぷち得」情報をお届けする雑記ブログ

MENU
【ビーグレン】40代エイジングケア!トライアルセットを口コミレビュー
【VEJRHØJ-ヴェアホイ】おしゃれな北欧デザインの腕時計
【潤静-うるしず】親子で使える敏感肌用美容液をレビューします!
自宅で簡単ホワイトニング!「コナナノカ」を口コミレビュー

【初心者向け】難易度別!HTML・CSSカスタマイズまとめ【はてなブログ】

【初心者向け】難易度別!HTML・CSSカスタマイズまとめ【はてなブログ】

集中力が切れたり、モチベーションが下がるとデザインをいじりたくなる!

…で、気づいたらものすごく時間を消費していた!ということはありませんか?

 

テスト前とか妙に片付けを始めたり全然違うことをしたものです。

 

記事作成の合間にブログデザインを息抜きにカスタマイズする初心者にゃもでございます。

 

カスタマイズは楽しいですが、どうカスタマイズするか調べたり、実際に上手に反映されるかどうか試していると時間がかかりますよね。

 

今回はブログ・カスタマイズともに、初心者の私が実際に当ブログで使っているカスタマイズと参考リンクをご紹介します。

デザインのためにかける時間を短縮して、記事作成に時間をあてませんか?

 

難易度は初心者の私から見て独自につけてますので参考までに。

 

ちなみにCSSデザインの変更をするときは要バックアップです!

あと、最初から記述してあるものは絶対に消さないでくださいね!

(元のテンプレートの記述なので消すと大変です)

 

 

 

難易度★☆☆:CSSカスタマイズのみ

CSSデザインを書き換えるだけでデザインが反映されるものをご紹介します。

記事の文字の大きさを変更する

記事本文の文字の大きさを変更しました。

当ブログの文字の大きさは17pxを採用しています。

元のテンプレートの大きさが個人的好みより小さかったので、カスタマイズしました。

 

参考にさせていただいたブログ

randamlife.hatenablog.com

 

見出しのデザインを変更する

見出しの色とデザインを変更しています。

はてなブログCSSはデフォルトで大見出しは「h3」中見出しは「h4」で設定します。

 

はてなブログには「h2がh3問題」というのがあるのですが…ただデザインを変更するだけならこのあたりは無視しましょう。

SEO対策や、ちょっと深堀りしたいなら検索して勉強しましょう。

 

参考にさせていただいているのは「サルワカ」さんです。

saruwakakun.com

 

難易度★★☆:HTML記述必要・CSSカスタマイズ

ご紹介するものは、CSSに記述したあと、記事の設置したい場所にHTML記述が必要なものです。記事作成の「HTML編集」の部分で使用します。

 

はてなブログの「見たまま編集」しか使っていない方には、ちょびっと難易度があがりますが、コピペでOKなので慣れればかんたんです。 

  

枠組みを設置する

目立たせたい場所や、リンク先を枠組みで囲っています。

こんなかんじで

目をひくデザインを設置できます

 

参考サイトはまたしても「サルワカ」さんです。

saruwakakun.com

 

記事にマーカーをひく

太字だけだと味気ないかな?とかもうちょっと目立たせたいかもというとき

蛍光マーカーをひいたようなデザインが有効です。

 

参考にさせていただいたのはこちら。

kagesai.net

 

リンクボタンを設置する

商品紹介の記事のとき「公式サイトはこちら」などのリンクをボタンにするデザインです。

 

あまり使うことはないのですが、あったら格好いいよね!

なんかそれっぽい(どれっぽいんだ?)ブログに見えそう!という不純な動機で採用しました。

 

s41t0h.jp

 

難易度★★★:headに要素を追加・HTML・CSS

私が一番苦労したのがこちら。どうしてもやりたかったのでがんばりましたが、知識のない私だと参考サイトを熟読しても1時間近くかかりました。

 

ちょっとこったカスタマイズを使用する際にお世話になる「Font Awesome」というサイトがあるのですが…まぁバージョンに関することとかそのあたりなど勉強になりました。

 

このあたりは「初心者のうちにあんまりこだわるもんじゃないな!」と思ったので、本当に余裕ができてから調べて取り組みましょう。

 

トップに戻るボタンを設置する

長文の記事の場合(といっても当ブログは長くても2,000字程度なのですが)スマホから閲覧される方はスクロールが面倒かな?と設置したくて取り組みましたが、好みのものを設置するのにかなり手こずりました。

 

まぁ、動機の8割は「自分が使いたいから」なのですが、設置してよかったです。

だって自分のブログを一番見るのは自分ですからね。

使いやすいように変えたかったんですよ!しゅるーって戻りたかったんです!

 

参考にさせていただいたブログはこちら。

glglsti2019.hatenablog.com

 

おわりに:カスタマイズは楽しいけどほどほどに!

自分好みのデザインにできるカスタマイズは楽しいですよね!

しかし、沼は深いし果てしないです。こだわればこだわるほど時間がなくなるのでほどほどにしましょうね!私も心に刻みます!なるべく!

 

情報を提供していただける各種サイト・ブログ様には本当に感謝しても足りないです。

 

また何かためになるカスタマイズなどあれば更新していきたいと思います。

私と同じ初心者の方の参考になれば幸いです。

 

 

nyamo3sun.hatenablog.com

nyamo3sun.hatenablog.com