ヨミコのデザイン工房

デザイナー&ブロガーのヨミコが、 WEB制作の事を書いたり書かなかったり。

【超初心者向け】はてなブログの見出し、引用、文字のサイズを変えました。

こんばんは。Web&グラフィックデザイナーのヨミコです。

ブログの見出し、引用をカッコ良くしました

もう既に先人達の分かり易い記事が溢れてる中、今更何言ってんだこいつ、感溢れますが、見出しの設定の仕方、注意点等書いてみました。

そもそも、見出しってなに??

見出しのサンプル画像

その名の通り、文章の区切りに使います。
上が<h3>で下が<h4>の画像になります。

どうやって表示させるの?

下記の文字をコピペすれば使えるよ。

当ブログもはてなブログのサービスを使用してますので、はてなブログでは当然見出し機能はあるのですが、ご使用のブログサービスによっては使えないか、使っても地の文と表示が変わらないもしれないです…。

気が向いたら検証してみたいですね。

はてなブログの初期設定の見出しは

こんなかんじでちょっと強調されるだけ

地味でカッコ良くない…!

カッコだけならともかく、見づらい。
見づらいと読者様にも不親切!!

という訳で、変えますよー。

どうやって見出しの見た目を変えるの??

何とコピペで変更出来ちゃいますよ。

下記の記事の通りにやれば大丈夫。
有益な情報を与えてくれる先人達にはいつもいくら感謝しても仕切れないですね…!

www.yukihy.com

上記のリンク先にはどこにcssを書き込んだらいいかが画像付で解説してありますし、更に見出しのデザインも色々用意されてるので、見出しの見た目を良くしたい方には必見です。

色の調整とかで若干逡巡したものの、10分もあれば出来ました。
本当にコピペで簡単!!

しかし、本当の地獄はこれからだった…!

なんか、どうも調べたらはてなブログで使える見出しは<h3>からみたいなのです。
※事情により上記の”<”は全角になってます。

でも、記事作成画面で<h1>と<h2>も選べてしまうんですね。

最初から選べない様にしといてよね!!

ってちょっと思ったんですけど、仕方ないので過去の記事で<h1>と<h2>使ってた記事を全部調整しました。

昨日の時点で196記事あったんですけど、全部やりました。

3時間くらいかかりました…。

もうやりたくないです。

SEO対策とかばっちりしたい!派のはてなブログユーザー各位は<h1>と<h2>を使わない様にした方が後々楽ですよー。

引用文の表示もカッコ良く変更しました。






↑はしゃいでる訳ではありません…。

前からこれ、あちこちで見かけて、気になってたんですよねー!やっとカスタマイズ出来ました。

参考にしたのはこちら!↓

www.task-notes.com

ついでに文字サイズも変えました

これは各々ご自分で使用されてるテーマにもよるんですが、このブログ、少し文字小さくない?と思ってたので、文字の大きさも変えちゃうよー。

参考にしたのはこちらのサイト!

appism.hateblo.jp

これは一括で変更出来るから助かりましたね。

文字の大きさに悩むあなたは今すぐやってみましょう。

あと、勢いではてなpro申し込んじゃった

我ながら無職なのに有料プランに申し込むとかどんな判断なんだ、ってかんじですが、なんだかスマフォ版もいじりたくなって…

そうしたら、見出しのカスタマイズは無料版でも出来る事が分かったんだけど…

どっち道アドセンス広告とか貼りたかったのでまあ、いいです。

proにしたから、キーワードリンクも削除したよ

キーワードリンクっていうのは、下記の画像「イラストレーター」や「東京ビッグサイト」の下に線が入ってる部分の事なのですが。

キーワードリンクの画像

クリックすると下記の様にはてなキーワードに飛びます。
(上記の□で囲まれた部分は画像なのでクリックしても飛びません。)

d.hatena.ne.jp

SEO的にリンクが多いサイトは不利っていう説があるんだそうで。
見た目もよろしくないので外してしまいたい。

問題は、申し込んだ今日以降はもう表示されないんですが、過去記事には表示されちゃうって事。

akiueo.hatenablog.com

上記の方法でcssで消せるし、実際一回そうしたんですが、なんだかcssで無理矢理見た目だけ変えるのがすっきりしなかったので…

全部投稿し直すと消える、と解説されているブログがあったので

これも全部投稿し直したよ…(息切れ)

196記事も書いた人誰?

いつかこの努力がpvになって返って来るといいなぁ…

他にもスマフォ版もカスタマイズしたんですけど、少し長くなりましたので、この辺りは明日にでも書きますね。

もう、何往復も過去の自分の記事見るとやられますね。

特に最初の頃の拙い記事とか、なんか恥ずかしい事ドヤ顔で書いてるな、感がしてじたばたしてしまいます。
画像の表示もSEO的に有利にする為に、直したいので、また過去記事掘っていかないといけないんですけどね…orz

という訳で今日のまとめ


あ、pvや見た目に固執しなければそのままでも使い易いのがはてなのいいところなので、あまり気にしない方は今日の記事は読み飛ばして下さい。

ではまた。

お仕事etcお問い合わせ先(制作実績お送りします):yomikodesign@gmail.com

Facebook友人申請お気軽にどうぞ。スパムでなければ基本承認します。

Twitterお気軽にフォローどうぞ!基本リフォローします。

当ブログ元祖カスタマイズ記事↓

yomikodesign.hateblo.jp

カスタマイズに関心が出て来た方は下記もとても参考になります!↓

http://www.kokoro-fire.com/entry/2015/03/09/000955www.kokoro-fire.com