ｺﾛｺﾛ(id:korokoroblog)さんの『■ブログ作成の参考資料』というエントリーに「■■■改善したいこと」という項目があったので、それに勝手に答えてみました。
ほんとうはDMかなんかでこっそりやりたかったのですが、長くなりそうでしたし、ブログに設置してあるお問い合わせフォームでは見づらいのではないかとおもったので、許可も得ずにここに記してしまいます。
まずは「■■■改善したいこと」であげられているものを転載させていただきます。(2017年1月10日現在)
- ブログタイトル回りの解説文の改行 行間調整
- 画像の位置調整
- 目次の囲み方 枠外になぜか「・」 箇条書きが設定されてる？
- 目次をサイドバーに固定表示
- 投稿日の日付カスタマイズ
- サイドバー タイトルカスタマイズ
- サイドバー タイトル下のコンテンツが頭下げになってしまった
- カテゴリーの階層化
- リンクの整理
- サイドバーのプルダウン化
- グローバルメニュー
- 前の記事 次の記事 のカスタマイズ
- 見出し周りのカスタマイズ
はじめにパス宣言
- 画像の位置調整
- 投稿日の日付カスタマイズ
- サイドバー タイトルカスタマイズ
- サイドバーのプルダウン化
- 前の記事 次の記事 のカスタマイズ
- 見出し周りのカスタマイズ
については、どのようなデザインをお望みなのかがわからなかったのでスルー、パスさせていただきます。
ブログタイトル周りの解説文の改行 行間調整
h2は改行できなさそうなので、代替案として、ペイントソフトで画像に文字を入れて、その画像をヘッダー画像にしてみてはいかがでしょうか？
という案をあげておきます。
h2の行間を調整するには、デザインcssの一番最後にでも「h2 {line-height: 1.5em;}」を加えて、「1.5em」のところは適宜調整してみてはいかがでしょうか？
「em」は「px」でもいいですし、なくてもいいです。数字だけでも行間変わりますから。
目次の囲み方 枠外になぜか「・」 箇条書きが設定されてる？
デザインcssで先頭の文字が「/* Entry-Content */」となっている行があるかと思いますが(たぶん171行目あたり)、その行の文字列のなかに「.entry-content ol,.entry-content ul{margin:0 0 0 1.5em;padding:0}」というのがあるかとおもいますので、そこに「list-style-type:none;」を加えると目次の枠外の「・」が消えるとおもいます。
変更前： .entry-content ol,.entry-content ul{margin:0 0 0 1.5em;padding:0}
↓
変更後： .entry-content ol,.entry-content ul{margin:0 0 0 1.5em;padding:0;list-style-type:none;}
「list-style-type:none;」を加えても「・」が消えない場合は、デザインcssの一番最後にでも「ul {list-style: none;}」を加えてみてください。
これで「・」消えてくれるとおもいます。
目次をサイドバーに固定表示
こちらの『Twilyze blog』さんで紹介されている通りにやればできるとおもいます。
サイドバー タイトル下のコンテンツが頭下げになってしまった
デザインcssの一番最後にでも「ul {padding:0;}」というのを加えるか、先ほど「・」を消すときに「ul{ }」を加えたのであれば、その「{ }」内に「padding:0;」を加えてみてください。
こんな感じです。
「ul {list-style: none;padding:0;}」
これで上体をおこして頭を上げてくれるとおもいます。
カテゴリーの整理
- カテゴリーの階層化
- リンクの整理
- グローバルメニュー
のうちの「リンクの整理」がどのリンクのことなのかわからなかったのですが、「カテゴリーのリンクの整理」だとして、「リンクの整理」→「カテゴリーの階層化」→「グローバルメニュー」の順に作業をすすめていくとよいでしょう。
というより、この順でないと先へはすすめないとおもいます。
カテゴリーの整理についてはなにをすればいいのかはわかっていても作業が繁雑そうだと感じておられるために躊躇されている段階なのではないかと察せられます。
なので、どのグローバルメニューを使われるのかはわかりませんがいずれにせよ記述することになるであろう、一番めんどうくさそうなul・liのリスト表示のところだけ、今現在使われているカテゴリー名をもとに提示してみたいとおもいます。
※class名を指定しているulもありますので、そのときは<ul>を<ul class="○○○">といった感じで書き換えてください。また、liのクラス名がhas-chaildとなっていますが、ここの名前も採用されるグローバルメニューによっては異なっている場合がありますので、そのあたりは適宜変えてください。これは半月さんのナビゲーションバーをもとにしておりますので。
<ul>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E2%96%A0%E8%A5%BF%E6%B4%8B%E7%BE%8E%E8%A1%93" class="has-child">■西洋美術</a>
<ul>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E3%82%A2%E3%83%BC%E3%83%AB%E3%83%8C%E3%83%BC%E3%83%9C"> >アールヌーボ</a></li><li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E3%82%A2%E3%83%BC%E3%83%AB%E3%83%87%E3%82%B3"> >アールデコ</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E3%82%A8%E3%83%9F%E3%83%BC%E3%83%AB%E3%82%AC%E3%83%AC"> >エミールガレ</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E3%83%A2%E3%83%8D"> >モネ</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E3%83%A1%E3%82%A2%E3%83%AA%E3%83%BC%E3%82%AB%E3%82%B5%E3%83%83%E3%83%88"> >メアリーカサット</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AD%E3%83%B3"> >キャメロン</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E5%9B%BD%E5%90%89%E5%BA%B7%E5%A4%AB"> >国吉康夫</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E5%8D%B0%E8%B1%A1%E6%B4%BE"> >印象派</a></li>
</ul>
</li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E2%96%A0%E7%8F%BE%E4%BB%A3%E7%BE%8E%E8%A1%93" class="has-child">■現代美術</a>
<ul>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E7%9B%B4%E5%B3%B6"> >直島</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E8%B1%8A%E5%B3%B6"> >豊島</a></li></ul>
</li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E2%96%A0%E6%97%A5%E6%9C%AC%E7%94%BB" class="has-child">■日本画</a><ul>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E9%80%9F%E6%B0%B4%E5%BE%A1%E8%88%9F"> >速水御舟</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E9%88%B4%E6%9C%A8%E5%85%B6%E4%B8%80"> >鈴木其一</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E4%BC%8A%E8%97%A4%E8%8B%A5%E5%86%B2"> >伊藤若冲</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E8%8F%B1%E7%94%B0%E6%98%A5%E8%8D%89"> >菱田春草</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E5%A5%A5%E6%9D%91%E5%9C%9F%E7%89%9B"> >奥村土牛</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E7%90%B3%E6%B4%BE"> >琳派</a></li><li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E6%B5%AE%E4%B8%96%E7%B5%B5"> >浮世絵</a></li>
</ul>
</li><li><a href="http://korokoroblog.hatenablog.com/archive/category/%E2%96%A0%E5%86%85%E8%A6%A7%E4%BC%9A">■内覧会</a>
</li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E2%96%A0%E7%BE%8E%E8%A1%93%E9%A4%A8%E5%88%A5" class="has-child">■美術館別</a>
<ul>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E5%BA%AD%E5%9C%92%E7%BE%8E%E8%A1%93%E9%A4%A8"> >庭園美術館</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E3%82%B5%E3%83%B3%E3%83%88%E3%83%AA%E3%83%BC%E7%BE%8E%E8%A1%93%E9%A4%A8"> >サントリー美術館</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E3%81%9D%E3%81%94%E3%81%86%E7%BE%8E%E8%A1%93%E9%A4%A8"> >そごう美術館</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E5%B1%B1%E7%A8%AE%E7%BE%8E%E8%A1%93%E9%A4%A8"> >山種美術館</a></li></ul>
</li><li><a href="http://korokoroblog.hatenablog.com/archive/category/%E2%96%A0%E7%BE%8E%E8%A1%93%E9%91%91%E8%B3%9E">■美術鑑賞</a>
</li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E2%96%A0%E3%82%B9%E3%83%88%E3%83%83%E3%82%AF%E7%AE%B1" class="has-child">■ストック箱</a>
<ul>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E3%83%96%E3%83%AD%E3%82%B0%E4%BD%9C%E6%88%90"> >ブログ作成</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%20%3Eprofile%E9%96%A2%E9%80%A3%20"> >profile関連</a></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E3%80%80%3E%E6%80%9D%E8%80%83%E3%81%AE%E8%A8%98%E9%8C%B2"> >思考の記録</a></li>
</ul></li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E2%97%87%E5%85%89%E3%83%BB%E7%85%A7%E6%98%8E">◇光・照明</a>
</li>
<li><a href="http://korokoroblog.hatenablog.com/archive/category/%E2%97%87%E7%94%9F%E5%91%BD%E3%83%BB%E9%80%A3%E9%8E%96%E3%83%BB%E8%BC%AA%E5%BB%BB">◇生命・連鎖・輪廻</a>
</li>
</ul>
※カテゴリー名を変えたら結局またリンクアドレスを書き換えなければなりませんからあまり参考になってないんですけれどもね。でも一応こんな感じになるかとおもいます。
その他こまごましたこと
デザインcssのおそらく255・264・275、244・253・264行目は「}」が欠けているようなので、加えてあげるとよいとおもいます。
また、「265～267、254～256行目」と「277～279、266～268行目」の「.table-of-contents:before」はまったく同じものなので片方は削ってしまい、さらに227、216行目にも「.table-of-contents:before」がありますので、これらを統合してしまって
.table-of-contents:before {
content: "目 次";
font-size: 150%;
font-weight: bold;}
とされてみてはいかがでしょうか？
272～275、261～264行目のものは効いていないので削除してしまってもよさそうです。
トップページでは現れませんが各エントリを表示したときに画面左下にエントリの更新日付が現れます。これはJavaで表示させているのではないかとおもいますが、位置があれですし、なぜかkayさんの「2016-03-10から1日間の記事一覧 - 無題で行こう」というページへのリンクが張られている？ようですので、その最終更新日時を表示させるコードを取り除いて、こちらを参考に設置してみてはいかがでしょうか？
日付ごと非表示で構わないということであれば、デザインcssの最後にでも「.entry-date.date.first {display: none;}」を加えてあげるとh1エントリータイトルの上に表示されていた投稿日ごと消えてくれるでしょう。
信じちゃダメッ！
使われているJava Scriptを調べる方法は知らず、まったくおなじ条件で試してみたわけではありませんが、上記のものは概ねはてなブログのテーマを「Report」にして試してみたものなので、おそらくこの通りやってみたら多少は改善するのではないかとおもいます。
もし上記の提案を「それじゃあ変えてみようかな」と試されるようでしたら、事前にちゃんとcssなど保存しておいて、うまくいかなかったときにはもとに戻せるようにしておいてください。
訳知り顔で長々と勝手にご提案して参りましたが、わたしは専門家でもなんでもないので鵜呑みにはしないでね。
それでは、よきブログライフを。
追記：2017年1月13日
ｺﾛｺﾛさん。
改善案を試していただいてありがとうございます。
でもうまくいかなかったみたいでごめんなさい。
でもでもその原因がわかりましたので改めて提案させていただきますね。
上で指定していたcssの行数がことごとく違っていたこととおもいます。
これはおそらく164～166行目が
/* <system section="theme" selected="report"> */
@import url("/css/theme/report/report.css");
/* </system> */
となっているのではないかとおもうのですが、それをわたしはその中身、アクセス先のコードと置き換えられたソースを見ていることに気づかなかったので、それで行数がちょうど10行分ズレてしまっていたのでした。
またそのために「/* Entry-Content */」や「.entry-content ol,.entry-content ul{margin:0 0 0 1.5em;padding:0}」という記述が見つからないのでした。混乱させてお手を煩わせてしまってすみません…。
ちなみに、cssは後に書いたものが適用されますので、これからカスタマイズされるときにはデザインcssの後ろの方に加えていった方がいいですよ。
先に挙げた「/* <system section～なんちゃらかんちゃら」ははてなブログのテーマ『Report』のcssで、その最初の方でcssリセットされているので、これよりも先に書かれているもので名前が同じものはリセットされてしまって変更が反映されません。
たとえば5行目の「.entry-content p」や14行目の「.entry-title」などはcssリセットの前に書かれているのでリセットされるは…適用されてるぅ～！なんでぇ～？
でも11行目の「body」で背景を水色に指定していますが適用されていませんね。
なんにせよ、プログラムって順番がそこそこ重要だったりしますので、そのあたりもちょっとだけ気にされるとよいかもしれません。
ふだんPCで作業をされていてスマホでブログを閲覧するということがあまりないのではないかとおもいます。あるいはレスポンシブにすると表示が崩れてしまうから「デザイン」→「スマートフォン」→「詳細設定」→「レスポンシブデザイン」のチェックを外しているのではないでしょうか？
cssの1～3行目に
/∗
Responsive: yes
∗/
とありますがレスポンシブになっていないようです。
ちなみに、1～3行目がなくてもレスポンシブデザインにチェックを入れるとレスポンシブになりました。
でもスマホ表示でサイドバーが下にいってくれなかったりするのでcssで「@media screen」とかいじらないとならなそうなので、そのへんいじらないのであれば今のままレスポンシブではない方がスマホは見やすいとおもいます。
ぜんとっかえしちゃう？
ごちゃごちゃこまごましていてわずらわしいのではないかとおもいましたので、ほぼ順番変えただけというものですが、こちらにcssを書いたテキストファイルを用意してみました。
①「korokoroさんのcss（デザインcss）」と②「korokoroさんのcss（スマホ記事下）」の二つのファイルがありますが、①だけではスマホ表示の方ではデザインが反映されませんので、スマホの方でもPCと同じようなデザインをお望みであれば②を「スマートフォン」→「記事」→「記事下」にでも加えてみてください。
①はすべて入れ換えることを想定しています。
②はすでになにか書き込まれているかもしれませんので、追加されることを想定しています。なにも書かれていないのであれば全選択のコピペでどうぞ。
あっ！お試しになる際は事前にバックアップとってからにしてくださいね。
少々説明を加えますと、背景は今の通り白い方がよければ、9行目の「body{background:#D0ECEA;}」を消してくださいな。
「レスポンシブでなくてもいいや」ということであれば、デザインcssの1～3行目と124～148行目(「/*****レスポンシブ設定*****/」のところ)は消してしまってもよいでしょう。残しておいても支障はないのでそのままでも問題ありません。
あったものがなくなっていると不安を覚えてしまわれるのではないかとおもいましたので、テキストファイルの方ではこれらのものは残してあります。
また、はてなブログのオフィシャルテーマ『Report』のcssは改変して使ったり他で表示していいのかどうかわからなかったものですから、従来通りアドレス先に読みに行くように変えていません。変更があったときなんかもわずらわしいですからね。（←なんのことはわからないかもしれませんがお気になさらず独り言だとおもってください。）
ヘッダ画像の位置について
「デザイン」→「カスタマイズ」→「ヘッダ」
のタイトル画像のところの「位置を調整する」を選んでいただいて、ドラッグしてあげるとテキストが「太陽の光の差し込んだ部分に」重なるように表示できるとおもいます。こんな感じです。
それではでは、よきよきブログライフを。
