リコの札幌ダイアリー

古き良き時代の回想と日々を綴るブログ

はてなProにしてみた/カスタマイズ沼にハマりそう

f:id:ecoecochang:20230620130609p:image

はてなブログProにしてみた!

「完全に趣味のブログなんだから、月々の利用料を払ってまでやるんじゃない!」と私の中の節約鬼が怒鳴っている。

でも、どうしてもブログをカード型にしたり、2列表示にしたかったんだもん…。

 

そこで、清水の舞台から飛び降りる思いでプロ契約を結んでみたのだ。

(プロアスリート風に言ってみる)

 

この記事は、自分自身の備忘録として、はてなブログをどのようにカスタマイズしたかを記録していこうと思います。随時追記していくよー。

 

まずは、【UnderShirt】をダウンロード

デザインは、テーマストアから【UnderShirt】を選んでインストール。

UnderShirt - テーマ ストア

 

カスタマイズど素人のくせに『記事はカード型で!』『スマホでも2列表示!』などど要求だけは人一倍だった私。

ネットで情報を集めまくった結果、こちらのテーマがどうやら希望を叶えてくれそうだとわかりインストールさせていただきました。

 

スマホでも2列表示にしたい!

も〜すべての始まりはこれですよ。

『こういうのステキだなぁ』と思うブログを運営されている方々は、たいていスマホから見ても記事が2列表示されるデザインにしている!

これがやりたくてProにしたのだ。

 

デザインCSSとやらに、下記のブログを参考にしてコピペするだけの簡単作業だったはずなのだが、最初はコピペの仕方さえわからなかった…

(えっ!?そこから!?)

手順をとても親切丁寧に書いてくださっているブログなのに。

挫けそう。もうPro契約解除しようかと思ったけど、なんとかできました。ホッ。

 

【UnderShirt】製作者様のブログを参考にさせていただきました。

はてなブログテーマ「 UnderShirt 」をスマホでも2列表示にするカスタマイズ - LOGzeudon

 

トップの記事説明文を表示させたくない

f:id:ecoecochang:20230620135358j:image

こんな感じで、写真とタイトルのシンプルな見た目にしたかった!

【こちらを参考にさせていただきました】

【はてなブログ】基本のカスタマイズまとめ*テーマをUnderShirtにしました! | LULU MAMA

 

ヘッダーはCanvaで作ったみたけれど…

私の技術が追いつかず、ヘッダーとして設定した際にボヤけたような画像になってしまうので、ここは今後要研究!(2023.6追記:画像タイトルやめました)

タイトルの色やフォントを変更する方法、そしてタイトルの下にバーを入れる方法も。

 

とにかく私のカスタムレベルが低すぎるため、めちゃくちゃ時間がかかる!

でも、自分好みにカスタマイズするのが楽しすぎる!

ゆっくり成長させて行きたい。

 

(追記:2023.6.30)

カテゴリー一覧を作りたい

理系男子さんのブログが参考になりました。

rikei-danshi.work

「管理画面のデザイン→カスタマイズ→サイドバー→モジュールを追加→カテゴリー」

これは簡単にできました!

 

グローバルメニューを設置したい!

グローバルメニュー(下の赤く囲ってある部分のバー)。

オシャレなブログはだいたいついてるので、これも絶対絶対設置したかった!!!

 

でもかなり苦戦しました。

f:id:ecoecochang:20230630092030j:image

 

とてもわかりやすかったのが、Simple Life Naviさんのブログ。

simplelifenavigation.com

すごくすごくわかりやすく説明してくださっていて、コピペで完成できるにも関わらず、

自分のブログ記事のアドレスがわからず苦戦(完全に自分のせい)。

しまいには、コピペの貼り付け方法を間違えていて何度試しても失敗‥。

(間違いにもしばらく気付けなかった)

 

格闘すること5時間!

ようやくカタチにすることができました。

 

「わからないことをするんじゃない!!」と怒られそう。

 

いや〜感無量です。

かなり疲れたのでしばらくカスタマイズはお休みしよう。笑。

〜*〜*〜*〜*

こちらで紹介させていただいたブログのオーナーの皆様、ありがとうございました!

すごく助けられました!

 

 

このブログは、はてなブログで運営しています。 読者登録していただけると飛び上がって喜びます♪