このブログは、無料版のはてなブログです。
私は、htmlもcssも理解できない素人なので。
たくさんの、カスタマイズ紹介サイト様のお陰で。
無料ながら、それなりに私好みにカスタマイズしているのですが。
もはや、コピー＆貼付しすぎて。
どのコードが、どのカスタマイズなのか分からなくなってきました。
なので、ここに感謝と共にまとめておこうかと思います。
リンクを貼りまくっています。
興味のある方だけ、どうぞ(^^;
このサイトのテーマは「innocent」。
「レスポンシブデザイン」にチェックをしています。
（ダッシュボード→デザイン→スマートフォン→詳細設定）
無料ブログの場合は、レスポンシブデザインでないと、スマホ表示はほとんどいじれないので、そうしています。
- ヘッダ画像（タイトル画像）
- 文字の大きさ
- グローバルメニュー
- 読者になるボタンを大きく
- カテゴリの階層化
- 見出しの変更
- 次の記事へ・前の記事への文字変更
- 目次のデザイン変更
- トップページを記事一覧にする
ヘッダ画像（タイトル画像）
ヘッダ画像のはてなブログ推奨サイズは、1000×200のようで。
最初はそれで作りました。
ただ、スマホ表示すると、途中で切れたり、表示がおかしくなったのです。
そこで、デザインCSSに、下記サイト様のコードを使用させて頂きました。
それで解決。
だったのですが、スマホで見ると画像が小さく感じたので。
画像サイズは700×200にしました。
文字の大きさ
innocentの文字の大きさは、PCで16px。スマホ15px。
気持ち小さいです。
なので、17pxになるように、下記サイト様のコードを使用しました。
ヘッダ→タイトル下に入れています。
このサイト様と同じく、なぜか他のサイトでよく紹介されているように、デザインCSSで変更しても、反映されなかったんですよね。
なので、タイトル下に入れています。
グローバルメニュー
タイトル下のメニューの事です。
テーマによって、コードのコピペをするだけで設置できます。
私の使用している「innocent」も、それだけです。
フッタにjQueryの記述と。
ヘッダにhtmlの記述。
デザインCSSに色変更の記述。
計3カ所に記述が必要です。
ちなみに、下記サイト様のhtmlコード。
「#」と書かれている部分は、実際に飛んでほしいリンク先URLを入れます。
最初、飛ばないじゃんーっと苦戦しました。
ほんと、知識がないとアホな事しちゃいますね。
読者になるボタンを大きく
レスポンシブデザインにしているので。
スマホで見ると、読者になるボタンが右上にないんですよね。
なので、分かりやすくしておこうと。
記事下に大きく入れました。
コードの記述先は、記事下と、デザインCSSの2ヵ所です。
ちなみに色コードは適当にボタン色「#eb4c5e」などで検索して、適当なサイトに飛ぶと、たくさんの色のコードが載っているサイトがあります♪
と、今リンクを貼ろうと思ったら、参考にしたサイト様が「Not Found」になっている！！！何故！
仕方ないので、よく似ているサイト様を貼っておきます。
カテゴリの階層化
正直「innocent」だと、サイドバーのカテゴリは上手く表示されていないんですが。
（タイル表示だからかな）
まぁ無料だし、と妥協しています（笑）
他のMinimalismとかだと上手くいったんですけどね。
（リスト表示だからだと思う）
パンくずリストを有効化して。
カテゴリの書き方や登録順や表示設定を変えて。
フッタへの記述。
ヘッダのタイトル下への記述。
の、記述は2点。
「innocent」の場合は、表示に不具合があるので。
修正も必要です（2つ目のリンク）。
デザインCSSへの記述です。
しかし、それでも表示に不具合があり。
もう1ヵ所修正したら、何とかなりました（3つ目のリンク）
でも、なんか変な線が出るので。
ヘッダのタイトル下への記述（スタイルシート）を消したら、線は消えたから、ちょっとおかしいけど、まぁいいかと。
妥協の範囲内におさまりました。
こんなに苦戦すると知っていたら。
innocentは選ばなかったかなー。
（blog.wackwack.net
nonstop-engineering.hatenablog.com
見出しの変更
見出しは↑ですね。
これは、下記サイト様から好みの物を選んで。
コードをデザインCSSに記述するだけです。
h3～h5まで設定しています。
次の記事へ・前の記事への文字変更
次の記事って、過去なの？未来なの？と、よく分からなかったので。
表現を「過去」「未来」へと変えました。
目次のデザイン変更
この記事で初めて目次を使いました☆
緑を基調にしたかったので、下記サイト様より使用しました。
トップページを記事一覧にする
トップページに、記事がバーンとあるより、一覧にしたい人も多いと思います。
でも、無料版だとそれしか選べないので。
トップページをアーカイブ一覧にするのが、このカスタマイズです。
ただ、それだと昔は50記事の一覧。
今だと30記事一覧が出てしまう。
パソコンならまだしも、スマホだと多すぎなので。
トップページを一覧にして、かつスマホ表示を30記事より少なくするのが、下記サイト様です。
30記事まで表示したければ、「もっと表示」を押すわけです。
ただ、これを試してみて、3つ問題が。
1つは、「もっと表示」を押して記事を選んで読んだ後、「戻るボタン」で戻ると。
もっと表示を押す前の状態になっている事。
これが嫌で、結局そこそこ長く表示してしまっています。
もう1つは、端末にブックマークや、記事を検索すると「記事一覧」の文字から始まる事。実は、自分のサイトを検索してみたら、そうなっているのが気になって、今はこのカスマイズ実はしていません。
アーカイブ一覧ページをスマホのみ30記事より少なくする部分のみ、このブログでは採用しています。
最後にもう1つ。トップページを一覧ページへ飛ばすと、グーグルアドセンスは受かりません。サイトが見つからないと、なってしまいます。
審査合格を目指す方は、合格してからこのカスマイズを行って下さい。
上記3点が難点箇所ですね。
記述は2ヵ所。
ダシュボード→設定→詳細設定→headに要素を追加に記述と。
フッタに記述です。
これ位かな。
これからも気が向いたら、無料の範囲内でカスタマイズすると思います☆
