はてなブログのデザインで困った！を解決する記事リスト（2021/12/21更新）

f:id:kirintt:20170822034947j:plain

はてなブログを始めてから、自分がこれどうやってやるんだ？と思って調べたことをまとめました。これからはてなブログをやる人にとって役立つ記事が多いと思いますので、ぜひ参考にしてください。

2020/09/16 時間の経過やブログを http から https にしたことなどが影響していろいろうまく反映されてなかったのでもう一度設定し直すとともに本記事を更新しました。

いくつか記事をアップしてブログを表示してみたら、トップ画面に記事の内容が全部表示されていて縦に長～い状態に。ブログでありがちな各記事のタイトルと本文の冒頭だけを表示する感じにしたいんだけど…。という人にはこれ。

2021/12/21

以前に掲載していた記事の方法は今では規約違反に当たるらしいので、合法な手段が紹介されている公式記事に差し替えました。諸行無常。

2020/09/16

設定＞詳細設定＞headに要素を追加 のところに元々 http://... で設定してたけど、ブログ設定で https を有効にしたタイミングでここの URL も https://... にしなきゃ反映されないぞ、というアレ。URL は上記だけで4箇所くらい直さないといけないから注意。

見出しのデザインが地味だなぁ…と思ったらここ。記事タイトルにある通り、この記事で紹介されているコードをコピーして指定の場所に貼り付けるだけで望み通りの見出しに変更できます。具体的な設定方法についても説明があるため、凝り性な人でも簡単に自分好みのデザインを作れます。

スマホが一般的になった現在では、スマホ向けのデザインにしたいと考える人が多いのではないでしょうか。以下の記事では、各種設定について怖いくらい親切に説明してくれています。この記事一つを参考にするだけで立派なスマホ向けブログができると思います。

2020/09/16

現時点ではコードを挿入する場所（デザイン＞スマートフォン＞ヘッダ＞タイトル下）が Pro じゃないと編集できません。あーあ。

ほかにやり方があるかもしれませんが未調査です。

自分で書いた記事だけど、けっこう丁寧に書いたつもりなのでゆるして。

表示方法についてもっと細かく自分でいじりたいという人はこちらもどうぞ。

2020/09/16

これらの記事はまだ活用できるっぽいです。よかったー。

よくページの右下辺りにある、押すとパッとトップに戻るボタン。スマホだとどうしても記事が縦長になりがちなので、あると重宝しそう。

下記ページを参考にすれば超簡単にできます。

2020/09/16

現在では上の記事をコピペするだけではうまくいきません。

対策として、設定＞詳細設定＞headに要素を追加 に書き込むコードを以下記事のとおりにします。

ほかの部分についてははじめに紹介した記事に従えばOKです。

コピペですぐ使える状態で紹介してくれてる神記事。

すぐ影響されるブログ