【無料版でも可】簡単カスタマイズではてなブログがオシャレに進化（見出し、吹き出し、蛍光マーカー等）
どーもどーもこんにちは天木ですよっと
私は現在、はてなブログの無料版で怪人ブログというブログを更新しているのですが、以前から怪人ブログに不満な点がありました。
それは他の方のブログに比べて地味なことです。
どのぐらい地味かと言いますとこのくらいです↓↓
これは過去に書いた記事のスクリーンショット画像になります。
一応読者の方々が見やすいように文字の大きさを変えたり色を変えたりしているのですが、素人感がありまくりですよね・・・
そこで私はブログをカスタマイズし、ちょっと上級者感を出せるように頑張ってみることにしました。
今回の記事は、はてなブログのカスタマイズ紹介の記事になります。
また、今回紹介するカスタマイズは無料版でも可能ですので
はてなPro（有料版）じゃない方でも安心してご覧いただけると思います。
見出し
見出しとは、本文中にある帯のようなものです。
はてなブログの場合だと、ここになりますね↓↓
実は私、恥ずかしながら今まで見出しの意味がよくわかっていなかったため、全く使っていませんでした・・・
そのため、今までは下記のように文字を拡大し、色を変えることで見出しっぽくしておりました。
◎見出しモドキ
・見出しモドキ
しかしながら、見出しは検索エンジンにページ内のコンテンツを正しく伝える役割があるそうですので、使った方がいいらしいです。
見出しには「大見出し」「中見出し」「小見出し」の3種類があり、私はこの3種の見出しをカスタマイズで作りました。
大見出しは1番使う場面が多いので、オシャレな感じにしました。
中見出しも大見出しと同じ系統の見出しデザインを採用しました。
中見出しも使う場面は多そうです。
小見出しはシンプルな感じにしました。
しかしながら、小見出しは使う機会があまりないかもしれません。
見出しはSEO面でも重要らしいので、今まで書いた記事で今後伸びそうな記事は見出しを編集で直した方がいいかもしれません。
ちなみに今回の見出しカスタマイズは下記のブログの記事を参考にさせていただきました。
ありがとうございました。
※見出しの作り方については上の記事からご覧ください。
吹き出し
ワードプレスなどのブログの記事でキャラクターアイコンが吹き出しで話しているのを見たことがないでしょうか？
実はアレ、はてなブログでもできるんです！
もちろん無料版でも可能です！
1.アイコンを作る
私の場合、下記のピトというオリジナルのキャラクターを持っておりますのでこのキャラクターでアイコンを作りました。
オリジナルのキャラクターを持っていない方はペイントソフトで自分で描くなり誰かにキャラクターの画像を借りるなどで対応してください。
ブログの吹き出し時に表示されるアイコンはパソコンからだとかなり小さくなり、見づらいので背景を白にし、わかりやすくしました。
ピトのアイコン用の画像の完成です。
2.吹き出しを作る
吹き出しを作るためには下の画像のような感じでブログをカスタマイズする必要性があります。
この画面には「デザイン」→「カスタマイズ」→「｛｝デザインCSS」でたどり着けます。
ここにさっき作ったアイコンの画像のURLをプログラムに組み込むことでアイコンが反映されます。
私はCSSの知識が全く無いのでプログラムの詳しい仕組みはよくわかっておりませんが、作業としては参考にしたブログ記事に記されていたプログラムをそのままコピペするだけです。
そのため、CSS知識が無い方でも簡単に吹き出しを作ることができます。
完成したらこんな感じになるよ！
吹き出しって面白いよね〜
↑こいつはチコックといいます。
ピトのついでに作りました。
3.スマホ用設定
吹き出しを作るところまでは問題なくできたが、PC版にしか反映されずスマホ版では反映されていないという方がいらっしゃいましたらレスポンシブデザインにしていただければ反映されるかもしれません。
吹き出しカスタマイズは下記のブログの記事を参考にさせていただきました。
ありがとうございました。
※吹き出しの詳しい作り方については上の記事からご覧ください。
枠
次は枠についてです。
枠というはこんな感じのやつのことです↓↓
枠1
ここに文章を書きます。
枠2
ここに文章を書きます。
実はこれ今回の中で1番簡単です。
カスタマイズの必要性がなく、HTML編集に下記のようなものを貼り付けるだけです。
<div style="border: #fc4a1a solid 1px; border-left: #fc4a1a solid 13px; padding: 10px; background: #fffff9;"> </div>
ここに・・・
貼り付けて・・・
文章を入力して・・・
終わりです。
枠については下記のブログの記事を参考にさせていただきました。
ありがとうございました。
※枠の詳しい作り方については上の記事からご覧ください。
アニメーション蛍光マーカー
ブログの記事を読んでいるとたまに重要な箇所に蛍光マーカーで線引きされていることがないでしょうか？
アニメーション蛍光マーカーというのはアレの強化版みたいなものです。
って言われても実際に見せてもらわないとわからないよ・・・
まぁ、そうですよね・・・
それではお見せしましょう↓↓
アニメーション蛍光マーカー
これめちゃくちゃカッコよくないですか！
これもはてなブログ無料版で可能です。
今回使っているのは水色っぽい色の蛍光マーカーなのですが、カスタマイズ次第で他の色にすることも可能です。
普通の蛍光マーカーでも十分オシャレだとは思いますが、アニメーションをつけることで少しオリジナリティが増すのではないでしょうか。
ちなみにアニメーション蛍光マーカーについては下記のブログの記事を参考にさせていただきました。
ありがとうございました。
※アニメーション蛍光マーカーの詳しい作り方については上の記事からご覧ください。
まとめ
今回の記事は、はてなブログの無料版でできるカスタマイズの紹介記事ですので、この記事内では大まかな説明しかしておりません。
しかしながら、今回紹介した別の方のカスタマイズ記事では非常に詳しく説明されておりますので、ご安心ください。
私はここ数日、はてなブログのカスタマイズについて他の方の記事などを参考に調べていたのですが、今回紹介した記事はその中でも特にわかりやすかった記事になります。
最後に
今回はこの辺で終わりです。
少し余談になりますが、実はこの記事のタイトルは最初下記のようにするつもりでした↓↓
このタイトルを没にした理由といたしましては、このタイトルではあまりアクセス数が稼げなさそうだからです。
「怪人ブログが進化」って言われても、まず大半の人は怪人ブログ自体を知らないっていうね・・・
ちょっと悲しいよね〜
私の実力不足です。
「ブログはタイトルで決まる」と言われるぐらいタイトルは重要らしいので、最近はタイトルも少し考えてつけております。
ちなみに何故、このブログの名前が怪人ブログなのかと言いますと普段は下記のようなオリジナルの怪人動画についての記事を書いているからです。
オリジナル漫画「おどる怪人たち」
気が向いたらこちらもご覧ください。
それではまた今度。
