これを知っていれば、はてなブログカスタマイズが楽になる。

またお会いしましたね、今回は前回の続きです。まだ前回お会いしていない人は以下からどうぞ。そしてまたここでお会いしましょう。出会いのゲシュタルト崩壊を、一緒に楽しみましょう!

今回、わたし自身がはてなブログ(というかブログ全般)をがっつりカスタマイズするのが初めてだったので、色々と調べながらやりました。コーディングはできるぞ!という方に参考になるかもしれないので、振り返ってまとめておきます。

コード編集できる場所

まず、編集できるのは css だけかと思いきや、色々ありました。

  • 管理画面 >「デザイン」>「カスタマイズ」の「ヘッダー」
  • 管理画面 >「デザイン」>「カスタマイズ」の「フッター」
  • 管理画面 >「デザイン」>「カスタマイズ」>「サイドバー」>「モジュールを追加」>「HTML」

また、

  • 管理画面 >「設定」

では header に html 記述ができるので、 js のリンクや font awesome のリンクを記述すれば、結構いろいろできます。

まだ他にも気づけてない場所があるかもしれません。でも、この時点でもう結構、思い通りに作れる感ありますよね。

コード編集を楽にやる方法

はじめ何もわからなくてcssを管理画面で直接書いてたのですが、やってみたかたはわかると思うのですが、とってもやりづらいです。

「絶対にもっと良いやり方あるはず!」と思って調べてみたらやっぱりありました。そしてやっぱり、親切なかたが丁寧にわかりやすくまとめてくれていました。

ざっくり説明すると、このような感じです。

  • 予め編集フォームにリンクがはられている css ファイルを、
  • その中身をまるっとコピペして、
  • 編集フォームに全部書き写してそれを編集していく。

こうすると何楽って、「いちいち要素の検証から class に当たってる css を見てそれを打ち消すように記述を追加する」という居心地の悪い修正をすることなく、「元から css を作り変えて行くことができる」という点。

「あ〜〜効かないよ〜〜、えいっ!( !important )」をしなくて良いというのはすごくストレスレスですよね。

サイドバーとメインの左右を入れ替える方法

これはただの css の話なんですが、初めて知ったやりかただったので書きます。

html は修正できないので、html に記述されてるコンテンツの順番を変えるのはできなそうかもなぁと思いつつも、PC版だとメニューを左に持ってきたかったので、「なんかやり方ないかなぁ」と思ったらすぐに見つかりました。

たった1行書くだけ...!

どなたかは詳しく存じ上げないけれど、こういう「便利」を開発してくれている団体のみなさまには本当に感謝しています。

「PCだとこの順番で左右に並べたいけどスマホだとこの順番で上下にしたいんだよなぁ」ということって結構あると思うのですが、それもこの1行で解決できるんですね。

ページごとに別のスタイルを当てる方法

これは、絶対ありそう、と思って調べたらやっぱりありました。

こういうの、css 編集フォームとかにはじめに書いてあると、とってもありがたそう。

アーカイブページのアイキャッチ画像を元のサイズで呼び出す方法

これはポートフォリオサイトの方でどうしても実現させてくた調べました。デフォルトだと、アーカイブページのアイキャッチって凄くサイズ小さくされちゃうので、「大きく表示したい」と思ってサイズをデカく指定しても、ガビガビになってしまうのですよね。

これはだいぶハックてきな感じでした。わたしはjs書けないので、コードを掲載してくださっている親切なかたに、ひたすら感謝です。

※どこに書けば良いんだろう!と思ったけど、フッターのところに書けました。

できそうでできなかった(というか本当はできるのかもしれないし、できるとしたら教えてほしい)こと

  • 編集中、トップしかプレビューできない。
  • 記事の「更新時間」「タイトル」「カテゴリー」の順番を変えられない。
  • アイキャッチに簡単に記事のリンクを付与する。
  • 「カテゴリー」以外に「ラベル」や「ハッシュタグ」みたいなもの(ブログ内で回遊できるもの)が無い
  • 記事内のテキストリンクを簡単に「外部リンク」にできない 追記参照

カスタマイズしてみた感想

WordPress の気持ちでいると「これできないんだ...」というものもちょくちょくありましたが、全体的には「思い描いてたこと、結構できる!!」という感想でした。

特に、元サイズのアイキャッチを呼び出す方法に関しては、「諦めるしか無いか...!?」と思っていたところでありがた記事に出会ったので、感動しました。技術者が多く使っているブログならではのありがたポイントかもしれませんね。

ではでは〜。

追記2021-12-07

記事内のテキストリンク(ドメインが変わる場合)を別タブで開くようにするやり方が紹介されている記事を発見しました!大感謝!

追記2021-12-08

このブログを初めてSNSに放った時ありがたいことに読者になってくれた方がいたのですが、読者数のカウント表示されるの知らなくてびっくりして、急いで検索したやつ。ふ〜ありがてぇ〜。

simplelifenavigation.com