2018年9月16日日曜日

これまでに設定したBloggerのブログのデザイン、テーマ、カスタマイズ


最近たびたびブログテーマ(色やデザイン)を変えていて、二回目に訪問してくださった方がいても同じブログだと気づかないんじゃないかと思っていましたが、とりあえずこれで落ち着けようと思っています。

私はブログ作成とかHTMLとかについて基本的には書くつもりがない上に、細かい設定等に関しては素晴らしいサイトが色々あるので、今回はBloggerで今までこんなカスタマイズしてきたよ~というのを大まかに説明してリンクを貼っておきます。
(大雑把に○○と□□をやりました、みたいなブログ記事をあまり見たことがないので)

普段は全然違うことを書いているので、これに関してはオリジナリティゼロですが悪しからず。


テーマを選ぶ

Bloggerではもともとそれなりの種類のテーマが入ってます。
(以前はテンプレートという名前だったそうで検索するとそっちの方が色々出てきます)

本当は完全にカスタマイズしたいのですがさすがに敷居が高い…

というわけで、元からBloggerに入っているAwesome Inc. のものを使わせていただいています。

最初はAwesome Inc.の別のテーマを使っていたのですが、下に表示している新着記事やTopicsの文章の文字が白っぽくなってしまい(背景も薄い色なのに)、見づらすぎてやめました。

次にContempoのものに変更。色々シンプルで見やすくなったとは思ったのですが、アルファベットのフォントが特殊&プロフィールやアーカイブが見づらいということでこれまたやめました。

今はAwesome Inc.の別のテーマを使っています。

オレンジというのも落ち着く色でいいかと。

ガジェットを追加・表示

ガジェットというのは、ブログに表示されているアーカイブやPVその他の項目です。

これを編集画面の「レイアウト」から追加していきます。

…が、ここで困ったのはスマホで一部のガジェットが表示されないことでした。

これの解決方法はいろいろなところに書いてあります。

komeiy.blogspot.com/2014/12/blogger_7.htmlなど。

とにかくテーマ>HTMLの編集から該当の個所を探してmobile='yes'と自分で書き込みました。

私の場合、追加したのはカテゴリ(ラベル)、Topics(人気の投稿)、PVなどです。


※注意

これは探してもあまり書いていなかったことなのですが、ただ書き加えただけでは反映されません。

テーマ>歯車マーク>モバイルテーマの選択から、カスタムを選ぶ必要があります。

そうしないと何を変更してもスマホに反映されなくなってしまいます。



カテゴリの階層化

カテゴリと書きましたが、Bloggerにはカテゴリはありません。

その代わりにラベルが存在します。

代用はできますが、どちらかというとタグに近いように感じます。


◇Bloggerのラベルのメリット
 ・一つの記事に対してたくさんのラベルを選ぶことができる

◇Bloggerのラベルのデメリット
 ・そのままでは階層化ができない

まずはメリット。

普通のブログのカテゴリはたくさん選ぶことはできないと思うのですが、Bloggerならできます。

あくまでも「ラベル」だからです。

記事の編集画面の右の方のラベルをクリックし各ラベルをカンマで区切ればいくらでも作れてしまいます。


次にデメリット。

これは、最初は気にならなかったのですが(主にゲームの)カテゴリが増えるにしたがって気になるように。

ラベルは五十音順or頻度順でしか並べることができないので、ゲームの色々なジャンルのラベルが散らばっているのを何とかしたいと思い調べてみました。

ネットで検索したところ、3種類の方法が見つかりました。
(ちなみに、以降、階層の上のラベルを「親」、下のラベルを「子」とします)
  1. ラベルのガジェットを増やす
  2. 開閉可能な階層にする
  3. 「子」のラベルのみ字下げする
(結論から言うと、今は3の方法を使っています。見やすくなったので、そこから記事を探してみてください)
1.ラベルのガジェットを増やす


最も簡単な方法です。

https://www.howtonote.jp/blogger/label/index4.htmlに書いてありました

元々「ラベル」の存在を表す場所が「カテゴリ」などの名称で一つだけあったのを、各ジャンルの名称にかえていくつも作ってしまおうという方法です。

この方法の難点は、

・パソコン版の表示だと各ガジェットは四角い枠になって分かれているので若干見た目が大げさ
・「親」のラベルはクリック不可能(というか実際ラベルではなくガジェット名)

ということです。

というわけでこの方法はちょっとやってみてすぐにやめました。
(ただし超絶楽なのでとりあえずやるにはお勧めですよ!!)



2.開閉可能な階層にする

http://hiro-blogger-memo.blogspot.com/2013/05/blog-post.html#moreなどに記載されています。

探せば結構色々なところにコードが載ってそうです。

デフォルトで「子」のラベルが表示されていない(=閉じている)のと、「子」のラベルをクリックするときに、どうも一瞬「親」と「子」のラベル周辺の色がまとまって変わってしまって、自分が今どこをクリックしたのかわかりづらいような気がしてこれもやめました。

あと、コードがめちゃめちゃ長い…。

素人にはどこをいじれば何が変わるのかわかりませんでした…。

詳しかったらこれを採用してたかも。


3.「子」のラベルのみ字下げする

これはこれでシンプルな発想です。

https://blog.z0i.net/2016/05/blogger-label.htmlより。

コピペそのままだと開閉はできません(個人的にはできなくていいと思ってる)

ラベルを作るのが若干面倒でしたが、一度やってしまえばあとは同じラベル名の記事を書く時には候補の中から選ぶだけなのでどうといったことはありません。

あと、凄く見やすくなりますね。

というわけでこれにしました。

(そのままコピペしてスマホで見ても何も変わっていなかったので調べたらまたmobile='yes'がありませんでした。要注意ですね)


以上です!!あとは何もしてません!(笑)(2018年10月21日追記 スマホで絶対に自分のページビューを追跡しないような処理はしてます)

まあ、また不満が出てきたら何かカスタマイズするかもしれないですけど。

0 件のコメント:

コメントを投稿

新着記事

すみすみ ステージ240 攻略 (エリア12) すごい旗を立ててクリア

  エリア12では 缶入りクッキー 🍪が登場。 今回はその最終ステージ、ステージ240の攻略を書いていきます。 私自身はエリア12はすべて旗を立ててクリア済みなので、 すごい旗を立ててクリア を目指してみました。(ビッグスイーツが2つになる) ということで...

Topics