はてなブログのテーマを変更という一生に一度の大チャレンジ？に挑んだわたしだが、タイトル画像を入れるとこまではなんとかたどり着いた。
だがまだまだカスタマイズの山は制覇できていないので、息つくヒマもなく次にいく。
グローバルメニューの問題
今までは、グローバルメニューは５つしか出ない設定で、幅が狭くなると「MENU」が表示されてそこからトグルメニューになるっていうCSSを使わせてもらっていた。
最初から右上に「MENU」表示させる方法もあるが、やたらカテゴリが多いわたしは最初からもっと出せないかな〜と思っていたので、このスライドメニューはちょうど良い選択かも。設置方法のガイダンスもわかりやすいし。
oyomiyoさんエライ！おかげで長々とカテゴリを入れることに成功！！
しかもスマホでは表示した時、ちょっとスライドして動いてみせることで、「ああ、ここスライドして先が見えるんだな」っていうもう親切なことこの上ない。これは素晴らしいっ。
▼参考：KOALAにスライドメニューを設置する方法
oyomiyo.com
ここで一瞬めんどくさいと思ったアイコン表示だが、これとっても参考になります。
（結局ぜんぶ同じタグアイコンにしたんですがね）
▼参考：KOALAで使用できるように設定してあるフリーアイコン
fontawesome.com HOMEボタンとTOPへ戻るボタンを設置
なんと、今までなかったのが不思議、というかこれ絶対つけるべき。
延々とスクロールした挙句にまた指で戻るなんて腱鞘炎まっしぐら。
どんな苦行を読者に強いてるんだ？
ここで紹介されてるHOMEボタンとTOPへ戻るボタンは少し透けててオシャレ。
画面の右下に、常にどんな時にも付いてて意外と存在感放ってます。
▼参考
www.imuza.com
フッターをつける
フッターってそのページの締めみたいなもんで、これわたしは結構重視している。
しかもコピーライトだけをシンプルに載せたい派。
ここでは、フッタに入れるものとデザインCSSに入れるものと両方必要である。
まず、自分のコピーライトの表示と「はてな純正のPowered by Hatena Blog.とフッターメニュー」を消すことから。
自分のコピーライト⇒フッタ
<div id="copyr">
Copyright © 2018 Deerhuntercat All rights reserved.
</div>
これは今の自分のコピーライト。「Copyright © 年号 自分かブログの名前 All rights reserved.」がシンプルでいい。
はてな純正のPowered by Hatena Blog.とフッターメニューを消す⇒フッター
<style type="text/css">
/*Powered by Hatena Blog.を消す*/
.footer.section.footer-service-link
{
display: none;
}
/* フッターメニューを消す */
#footer-menu
{
display: none;
}
</style>
その次に苦労したのは、フッタに帯のようにカラーを入れること。
結局、テキストセンター以外がうまくいっている現在。
▼参考
www.okuni.me ここから最初のブロックだけをカラーを変えて採用⇒デザイン CSS
/* フッター */
#bottom-editarea {
width: 100%;
margin: 0 auto;
background: #333333;
padding: 0;
color: #e0e0e0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
どうしても文字がセンターにならない。
⇒これをさらにカスタマイズして
padding: 20px 20px 20px 20px;/*上右下左の余白*/
にして変更してみた。
左右にもスペースを空ける設定だけど、たまたまスマホではセンターにあるように見えるだけである。
どの案内を見ても文字をセンターにするCSSは
text-align: center;/*文章をセンター揃えにする*/
なんだけど、これを入れてもセンターにならず、涙。
問題残したまま次へ行くことに。
本文内の文字、見出しのカスタマイズ
実装してわかったのは文字の級数が小さくて１行に文字数が多すぎる感じ。
読みにくいのでフォントを変えて級数をあげる。
これは前使ってたCSSをそのまま引用。
デバイスによってはわたしの好きな「メイリオ」は表示されないかも。
フォントと級数の変更⇒デザインCSS
もともと級数は16だったのを17に変更。16で十分なはずなのだが何故小さく見えるかは謎。。。
body {
font-family: Arial, Meiryo, sans-serif;
}
.entry-content p{
font-size:17px;
}
見出しのカスタマイズ⇒デザインCSS
ここにあるサンプルはどれもシンプルなものばかりで使いやすい。
カラーコードを好みに変えるだけですぐにできる！
見出しはh＋数字で表示される
h1⇒ブログタイトル
h2⇒その日のブログタイトル
h3⇒大見出し
h4⇒中見出し
h5⇒小見出し
あーーーーー疲れた。とりあえずここまで体裁を整えるのに結構疲れた。ひと息つきたい。
でも指南されてるCSSを試して試してハマった時の「ビンゴ！！」って自分で叫んじゃう感じ、
誰も褒めてくれないプチ達成感はたまりませんな。
解決してない問題
ここまで来て、ブログを見直して残した課題、問題は以下の通り。
①フッターの文字表示がセンターにならない
②検索窓がわかりにくい
③サイドバーのデザインの色変更
④なんと文字の級数が小さく戻ってしまっているところが、、なぜーーーー？涙。
あー、これら、oyomiyoさん教えてくれないかなー？？
おーーい、oyomiyoさーん、このブログ見てくれませんかーーーーーー？？
ブログをカスタマイズしていて思うのは、いろんな人がカスタマイズのCSSを指南してくれているから、色々試せるけど、テーマの制作者の人に直接聞きたいのが本音。なかなか問い合わせに答えてくれる方はいないし、問い合わせ先がない方もいて。。。
はてなブログ側に聞いてみても、
「デザインCSSにCSSを記述している場合には、本来のはてなブログの機能での利用とは異なり、独自のカスタマイズとなり対応不可」
「テーマストアに投稿されているテーマを利用するにあたり、作成者より質問に対する回答が得られない等、利用上で問題が生じる場合には、該当テーマ以外のテーマか公式テーマの利用を検討するように」
とけんもほろほろ鳥の答えだった。本来のはてなブログの機能じゃないってなんじゃい？？
だから、はてなブログ側はカスタマイズに関してはもちろんのこと一切、問い合わせには応じてくれない。まあ、それは仕方ないかも。CSSがわからんもんね。
例え公式テーマを利用の場合であっても、カスタマイズに関わる質問には対応せず、公式テーマ自体の影響が考えられる場合のみ、公式テーマ自体の修正を含め対応してくれるって言うけど、それじゃあんまり役に立たないんじゃ。。。
ブログってデザインをカスタマズするのも楽しみの一つ。自分のカラーや性格がそこに現れるから。
であれば的確なカスタマイズ方法は、やっぱりテーマ作者に聞くしかない。自分であれこれ人のCSSをコピーして試すのも勉強にはなるっちゃなるが、まあ時間と根気がいる作業だし、その人の指南が自分が選んでいるテーマに合うとは限らないのである。
テーマ制作者のみなさん、どうかお願いします。問い合わせ対応を！！
自分で CSSをもっと勉強すればいいんだろうけどねー。。（遠い目）
こうやって、問題を残しつつなんとかブログテーマの変更をしてみたのだが、見栄えは前より良くなった、うんよく頑張った自画自賛の涙。。
