うさぎ日和

今より少しだけ新しいことに興味がわく雑記ブログです!

【はてなブログ】HTML・CSSを使って自分好みに簡単に編集する方法まとめ

f:id:DwarfRabbit:20200616130616j:plain

ブログ運営をしていると、自分好みのカスタマイズをしたいと思う人も多いのではないでしょうか?


他人のブログにお邪魔すると、とってもおしゃれなレイアウトであったり、便利な機能がたくさんあり、「これ、どうやってやってるんだろう?」と思ったことも多いと思います。

 

カスタマイズにはHTML・CSSなどの設定が必要になり、少しハードルの高さを感じている人もいることでしょう。

当ブログも、HTML・CSSの設定をいくつかご紹介しているので、今回は目的別のHTML・CSSの設定方法をまとめてご紹介していきたいと思います。

 

随時更新してくつもりなので、是非この記事を起点に自分好みのレイアウトを作成してみてください!!

 

内容はどれも簡単で、サクッ実行できるものなので、安心してくださいね(笑)

【スポンサーリンク】

 

自分好みのプロフィールを作成

なんといってもプロフィールは、ブログにおいて自分の顔そのものだと思います。
プロフィールに記述する自己紹介も重要ですが、見た目もとても大切です。


フォローボタンの設置とかしたいですよね!


そんなときはこちらの記事を参考にしてみてください!!

www.rablifes.com

会話形式の拭き出しを設定

ブログは、「声」ではなく「文字」で人に思いを伝えます。


そのため、文字にメリハリをつけたり特別主張を強めたいときやキャラ性を持たせたいときなどは、会話形式の吹き出しにすることで、リアルな表現が可能になります。

 

個性を出したいと考えている人は、是非下記の記事を参考にしてみて下さい!

www.rablifes.com

記事一覧をタイル表示にする方法

オシャレなブログは高確率で記事がタイル表示なっていると感じるのは私だけでしょうか?(笑)


タイル表示は、コンパクトでおしゃれなだけでなく、複数の記事が一度に目に入るため、読む側は選びやすいメリットがあります。

www.rablifes.com

画面はじにトップへ戻るボタンを設置

この機能は個人的に必須機能と思うほど、あるのとないのとではブログの利便性に差が出てきます。


ブログの重要な情報は、基本的に記事の上の部分に集中しやすいため、記事の長さが長くなれば、それだけ注目記事などの情報から離れていきます。


上に戻るくらい確かに自分できることですが、意外にもその行動が面倒に感じる人は多いくいるため、この機能を設置しておくだけで、かなり親切だと思います。


設置していない人は、是非すぐに設置することをおすすめします。

www.rablifes.com

ボックスデザインを使って文字を強調する方法

ブログの記事を書いていると、文字の太さや色を変えることもあると思いますが、箇条書きを併用する時などは、周りを囲ってくれるボックスデザインを使用したほうが、更に協調性が増し、記事が読みやすくなります。

 

ボックスデザインは、記事の構成において区切りの意味を担うこともあるので、適度に使用することで、記事全体の纏まりも出てきて使って損の無いものになります。

www.rablifes.com

アフェリエイトリンクをボタン化する方法

ブログ運営する多くの人が、収益化を目指すと思います。


そのため、ASPサービスを使用している人も多いと思いますが、広告にはテキストやバナーなど様々な形態があります。

 

勿論その時その時で、適したリンクを張ることが必要になりますが、よくアフェリエイトリンクに「詳細はこちら」とボタンが設置されているのを、見たことがある人も多いのではないでしょうか?

 

表現の一つとして、ボタンを設置するのも効果的な場合も多いです。
是非参考にしてみてください!

www.rablifes.com

【スポンサーリンク】

 

最後に

以上が、現在私が紹介できる、HTML・CSSのカスタマイズの方法になります。


今後も、カスタマイズの種類を増やし、随時更新していきたいと思いますので、是非参考にしてくれると嬉しいです。

 

自分好みのレイアウトにすることができると、今以上にブログに愛着が湧きますし、モチベーションも上がります。

人によっては、自分でHTML・CSSをバリバリ書けるようになりたいという人もいると思います。
ブログに使うレベルであれば、独学も結構ありだったりするので、是非挑戦してみるのもおすすめです!

今後も、ブログ運営を一緒に楽しみながら、頑張っていきましょう!!