MR-SKY’s diary

仕事と育児と日常と

目標のブログカスタムがひとまず完了 テーマ:ミニマリズム

年初に目標としてましたブログカスタム テーマ:ミニマリズム がとりあえず目処が立ちました

他にも設定出来る事は沢山有りますが、ブログは『記事を書くこと』がメインであるため、一旦終了!


私が行ったカスタムは、以下の通りです。
ちにみに、目次の番号(見出しの順番が早い遅い)が小さい方が個人的にはすぐに出来たのでしたが、番号が大きくなるほど難しかったです。

ちなみに私のブログは『テーマ:ミニマリズム、はてな記法』です

ブログのテーマ変更

私が1番初めに行ったことは、ブログのテーマを変えたことです。
なぜなら、テーマ変更すると、カスタムCSSがリセットされるからと見たからです。
ブログのテーマは、オリジナルテーマでは1番人気ですが、『Minimalism』にしました。
他のオリジナルテーマは、次のところから探してみて下さい。
私が知らないだけで、良さそうなのが沢山有りました。
blog.hatena.ne.jp
もし、すでに他のテーマを採用していて、カスタムCSS等をおこなっているのでしたら、テーマ変更の前にメモ帳などに設定したコード等のバックアップをお願いします。
私は、エクセルシートに『文字の大きさ』『見出し』『目次』等に分けて保存しています。
そして、皆さまのブログを参考にして、色や文字を変更出来るところを色分けしました。
そうすれば、少し色や大きさを変えたりするときに、わかりやすいと思います。コピペも行いやすいですし。

ブログ内の文字大きさの変更(大きくする)

オリジナルテーマに変えてから、しばらくの間はそのままで記事を書いていました。
その間、他の方の記事を読んでいるとき、『あれ?この方のブログは文字が小さくない?』と思ったのです。
そして自分のブログをパソコンで見てみると、少し文字が小さいのに気付き、少し文字の大きさを変更しました。
その際に、くうか様のブログを参考にさせて頂きました。
www.kurasitotonoe.com
文字の大きさ変更は、コピペ一発でデザインCSSに貼り付けて出来ました!

目次をデザイン変更する

まだまだ目次が必要なほど、多くの情報が発信しているブログではありませんが、他の方の素敵なデザインを見ていると、だんだんと欲しくなるものです。
目次の変更には、ぱぴこ様のブログを参考にさせて頂きました。
www.papico405.com
目次のデザイン変更するまでは、スマートフォンで全て行っていましたが、スマートフォンではここら辺で限界が来ました。
デザインCSSをカスタムするにはパソコンで行うとかなりのストレスと労力が削減されました。
(それまでのスマートフォンでの作業は一体何だったのかと思います。)
目次も、コピペ一発でデザインCSSに貼り付けて出来ました!
ただ、参考したサイト様にも書かれていましたが、『目次』の文字が左にずれて重なっていたため、書かれているとおりの数値で変更しました。
あと、『目次』の文字は自由に変更できるので、お好きなように決められたら良いかと思います。
HTMLのコードを見比べていると、少しは自分で調整出来るところもありますね。そこは自分色を出すチャンスなのかも知れませんね。

見出しの変更

見出しの変更は、サルワカ様のブログを参考にさせて頂きました。
saruwakakun.com
こちらも、コードをデザインCSSに貼り付けて出来ました!
ただ、参考先のブログにも書かれていますが、コードは『h1』で書かれています。
どの見出しを変更するかが決まりましたら、それに対応するようにコードの書き換えが必要になります。
例えば、はてなブログの場合は
見出しh1=ブログ名、記事タイトル
見出しh2=ブログの説明
見出しh3=大見出し
見出しh4=中見出し
見出しh5=小見出し
となります。
他のデザイン変更では、1度変更したらすぐに変更することも少ないかと思いますが、見出しの場合はブログの雰囲気に合わせて変えることも多いので、私も数日毎に変更しています。
余り見出しが立派過ぎると、かえって見にくくなったりする事もあります。
私はサルワカ様の見出しで、気に入ったコードをエクセルシートにコピーして、すぐに変更できるようにしました。
見出しはサルワカ様のサイトにいっぱい有りますので、お好きなコードをご使用下さい。

太字や斜体のボタンで蛍光マーカー風に線を引く

蛍光マーカーでのデザイン変更は、次のサイト様を参考にさせて頂きました。
www.thoughts-make-things.com
この場合は、コードを貼り付けるところを
デザインCSSでは無くて、管理画面→設定→詳細設定 の中にある「headに要素を追加」の入力スペースに追記
となります。

この時のポイントとして、次の2点が上げられます

文字の太字+蛍光マーカーも可能

上記の通りコードを貼り付けると蛍光マーカー表示のみになりますが、その後に次のコードを貼り付けると太字+蛍光マーカー表示となります。
f:id:MR-SKY:20200125013045p:plain

上記コード内の『b』を『strong』に置き換えるとstrongでの表記も太字+蛍光マーカー表示になります。

4種類の蛍光マーカーを使用可能

私ははてな記法で記事を書いています。
この場合、はてなボタンを使用する『B』『i』では、簡単にコードを変更する事で蛍光マーカー表示することが出来ますが、それ以外の
強調文字strong

斜体文字em
も、コードを変更する事で蛍光マーカー表示することが出来ます。
(ただ、その都度strongのようにHTMLで書き記す必要があります)
コード内の『strong』の所を『b』『em』『i』に置き換えることでそれぞれ蛍光マーカー表示が出来ます。
『252,252,84,0』(黄色)の所を、
『102,255,204,1』(緑色)
『102,204,255,1』(青色)
『255,153,255,1』(ピンク色)
に変更する事で、色の変更も出来ます。
練習結果はこのようになりました
www.w-natsu.com

引用記号の変更

こちらの内容に関しましては、バンビ様のサイトを参考にさせて頂きました。
www.bambi.red
はっきりいって、コードを丸々コピペです。
以前、他の所からコピペして上手くいってたのですが、いつの間にか消えていて…
それでも、引用記号が改善されたので個人的には満足です。
これもデザインCSSにコピペ一発で出来ました!
コードの説明もされていますので、勉強になります!
また、いつか変更できればと思います。

更新日時の表示

これが今回のカスタマイズで1番大変でした。
しかし、ともさんのブログを参考にして何とか出来ました!
www.tomomore.com
今まではコピペ一発で出来ていましたが、更新日時の自動表示に関しましては
デザインCSS1つ、記事下2つ
のコードを貼る必要があります!
しかし出来たので結果オーライ!
これに関しましてはチンプンカンプンで全くわかっていませんので、特にコメントしません。(コメント出来ないと言った方が正しいかも)
それでも、このように表示されたときは嬉しかった!
f:id:MR-SKY:20200125005132p:plain

まとめ

パソコンを指1本でキーボード打つような私でも、ここまではする事が出来ました。
他の方ならもっとスムーズに出来るかと思いますので、是非ともカスタマイズに挑戦されたらいかがでしょうか?

ただ、何回か書いていますが、コード変更の際は小まめなデータ保存をお願いします。