ブログのデザイン変更したいならプラグインでなくHtml/CSSを学ぼう

スポンサーリンク

最近は作っているサイトのデザインを自分なりにカスタマイズしたいと思うようになって、HTML/CSSを学ぶことに時間を使っていたので、気づくと2週間以上もブログ記事を書くことなく過ごしてきました。その中で以外にアクセスは減ることなく、かえって増えていてブログは毎日記事を書かなくてもいいことがわかったのは収穫だと思います。

ただ、真面目にHTML/CSSを学んでサイト作成していると段々とブログで何を書いていいのか迷うようになって、記事のネタも思いつかなくなってきていました。そういう理由もあってしばらくブログから遠ざかっていましたが、有名ブロガーの方の記事に勇気をもらったので、せっかく学んでいるHTML/CSSのことを書いてみようかと思います。

HTML/CSSを学べば簡単なデザインは気軽に変更できます。

他の方のブログを見ていると、魅力的な見出しのデザインがあってどうやったらあんな風にできるのかな?と疑問に思っていました。私が使っているテーマは「simplicity」ですが、使いやすいテーマなのですが、見出しのデザインを変更してみたくて、テーマを変えてみましたが、全体のデザインは「simplicity」が一番なので結局は戻してしまいました。

それならプラグインで変更できないかな?とも考えたのですが、プラグインは不具合が出ることがあるのであまり使いたくないので、デザインの変更はあきらめていました。

最近サイトを作っているのですが、デザインを自分なりに変更したいと思うようになりHTML/CSSの勉強を2か月ぐらい続けてみると、見出しのデザインの変更はCSSで指定すれば、簡単にできてしまうことに気づきました。

スポンサーリンク

h3見出しのデザインを変更してみる

これは表示例です!

この「h3見出し」を変更して見ましょう。

これは表示例です!

CSSで指定して色や枠をつけています。

これは表示例です!

横幅を「width」プロパティで指定したので、短くなっています。

これは表示例です!

角を「border-radius」プロパティで丸くしてみました。

これは表示例です!

アイコンをメディアから取り入れて「content」プロパティで表示しています。アイコンのサイズが大きいために上下の幅が自動で広がっています。

これは表示例です!

シャドウをつけてみました。

まとめ

いかがでしょうか?ちょっとデザインを変更するだけでもかなり見た目はかわりますし、オリジナル感が出てくると思います。HTML/CSSを少し勉強すれば簡単な部分は変更できますのでやってみてはどうでしょうか?

CSSに1度書き込んで「class」を指定すれば、簡単に毎回オリジナルの見出しにできます。これだけで、他にはない自分だけのブログ感が出ます。いい記事を書けばそれでいいという考えもありますが、頑張って作るブログですから見出しやその他のデザインを少し変えてみることでより愛着を感じて、記事を書く意欲も高まると思います。

HTML/CSSをどうやって勉強すればいいのか分からないという方は、まずはじめはProgateを勧めます。

ドットインストールがネットで有名ですが、素人が理解するのは難しいのではないかと思います。実際私ははじめて勉強した時は難しくて挫折しています。Progateはサイト内にコードを打ちこむことで作っているサイトが変化する様子がリアルタイムにわかり理解力が高まります。

ProgateでHTML/CSSのレッスンを全部やるとサイトが作れそうな気持になりますが、もちろんできません。ですが、サイト作成の流れがわかりますので、それがはじめは1番大事なんじゃないのかと思っています。HTML/CSSを勉強したい方はぜひやってみてください!

Progateを一押ししていますが、別にそれで私に利益が入るようなことはないです。ただ勉強するのにいいサイトだと実感しているのでお勧めしています。