そよかぜスタイル

Bloggerブログ(気になっていた部分を)カスタマイズしてみた

+ 2 comments
私が現在、更新しているブログはBloggerブログ。
なれてしまえば更新しやすいし、カスタマイズもいぢっているうちに少しずつ、楽しめるようになってきたような気がします。



Bloggerの管理画面
Bloggerのテンプレート スタイルのコードはここに書きます!




ずっと前、過去記事で紹介したページナビのまとめ。
実は、突然ページナビが動かなくなったりで、その対応と一緒に気になっていたことをカスタマイズしてみました。

私は、ほとんどなにもできないのだけど・・・Bloggerブログ、楽しいのだけど、情報が案外少ないっ(汗
ひょっとしたら、喜んでくれる人も居るかもしれないので、 ページナビ、モバイル向け、ラベルクラウドのカスタマイズをしてみたよーと、いう記事です。



長くなるのでこの投稿はこんなふうにわけています。

もくじ


最後の、ラベルクラウドのカスタマイズ、使い方などが一番ボリュームがあります

うわっ ページナビが使えなくなっちゃった!!


久しぶりに自分のブログを見てみると、なにやらパスワードを打ち込んでね的な表示が現れるようになりました。

原因は・・・
よくわからないけれど、ブログに使わせていただいているスクリプトかなにかが原因かと。
ガジェットをひとつひとつ検証してみた結果、使用しているページナビがダメになっていたみたいです。



ページナビ
こ、これが原因だなんてー




ページナビのまとめについては過去記事で。



過去に使用していたページナビのコードに入れ替える事で、現在は対応しています。

使用方法は、ほとんど変わらないと思うので、過去記事のまとめを参考にしていただくとして。

Blogger用のページナビは、『Blogger Page Navigation』で検索すると簡単に見つける事ができますので素敵なものを見つけて下さい。


モバイル用の表示も気にならなくもない


ので、こちらもついでに。

はじめはモバイルテンプレートを使用しないにチェックをいれていたのですが、今はカスタムテンプレートを使用しています。
気になっていたのは、モバイルの場合、ページナビが動かないこと、トップページのみ表示しているスライダーが邪魔な事。

全体的な外観は、こんなふうにできたらいいなぁーと思いつつ、ここまではできていません。



簡単そうなのですが、どうしてもよぶんな余白がでてしまって、心がめげてしまってます。


まずはスライダーを消すっ



そよかぜスタイルのトップページ
トップページのみに表示しているお気に入り記事へのLINK集





Bloggerには、モバイルテンプレート用の記述をスタイルシートの部分に加えるだけでそれっぽくなるようなのですがー

.mobile .○○{○○○;}

こんな感じでー

だけど、私のテンプレでは、消したいスライダーの部分にいくら書いても消えないー

なので、表示する端末の画面サイズによってBlogの表示切り替えができるMedia Queriesを使用しました。



詳しくは書きませんともー
リンク先に素晴らしくまとめられていますから。
記述した内容はこんな感じ。

@media screen and (max-device-width: ○○px) { .○○{ display:none; } #○○○ { display:none; } }



肝になったのは、表示領域サイズで指定するのではなく、端末の画面サイズで条件を分けるようにすること。

max-widthではダメで、max-device-widthで解決。


ページナビは、ガジェットに書いてあるものでしたから、モバイルの時は表示しないように。

これは、Bloggerで用意されているコードを使えば簡単に実現可能です。



mobile='yes'
mobile='no'

を、使い分けて、ガジェットに割り振って完了。

モバイルのゆうつー


で、モバイル版でアクセスするとURLが違います。
眠れないほど気になっていたけれど、ソースを見てみたら、デフォルトでURLの正規化がおこなわれているようですので、これからは、毎日気持ちよく眠る事ができそうです。
さすがっBlogger!!

link rel="canonical"

このタグが有効なみたいですから、気になっている人は、調べてみて下さいね。


あと、モバイル対応で悩んでいた時にいろいろ見て下さった、Sunabox.netさんにカスタマイズの基礎から応用まで詳しくまとめらています。

私は、基礎もなっていないし、こういう記事を書くのは苦手なので、今回は遠慮せず、どんどんはしょっていきます。
しっかり書かれているBlogさんで、あれこれ確認してみてくださいね〜



Bloggerでカテゴリとタグ・・・せっかく書いた記事だからちゃんと整理しておきたい

Bloggerでは、カテゴリとタグを足したようなラベルというものを使って、記事を仕分けています。
ひとつの記事に、いくつでも特定のキーワードで割り振れる事ができるので、便利な反面、どうやって分けたらいいのか、書いている本人にもよくわからない。

幸い、Bloggerのラベルガジェットには、全てのラベルと、自分で好きなラベルだけ表示する事が可能です。



ラベルの設定画面




ふつうのブログでカテゴリになるラベルを、リスト形式で表示。
ふつうのブログでタグになる部分を、クラウド表示にして、ふたつサイドバーに適用するだけで、それっぽい事はできます。





やりたいことは、まさにこの感じ。
記事数が少ないのはおいといて・・・さっそくしてみました。


記事がたくさんある人、細かくしっかり分けたい人は、こういう使い方をしたら、WordPressっぽい、タクソノミー的な使い方もできそうですねー
ただ、あまりにもつけすぎると、パンくずリストや、記事のフッター部分にものすごい数のラベルが並んでしまいますけどー

複数ラベルガジェットを導入するためにしたこと


ページナビを使用していて、なおかつ、ラベルページにもページナビを適用している人は、ページナビが挙動不審になります。

最初に導入した手順で、もう一回、ラベルページに適用したコードに書き換えて下さいねー



過去記事に書いた通り、こんな感じで動いています。

ラベルクラウドのカスタマイズ




かわいいラベルクラウド
かわいいラベルクラウド / Kel-Logs





せっかくだから、ラベルクラウドのカスタマイズをしたいなー
なので、さっそくこちらのコードを書き加えました。



ie9まで未対応なんですけどね・・・とりあえずかわゆいのでカラーを変えて使っています。



最新版じゃないieで見ている人に


私の中で、ほんとうの見た目は、現在こうなっています。



ちゃんと動作している自分のブログ
これが、今私が見ているBlog




でも、ieの人は、こんな風になっている・・・かも。(バージョンによって表示が違いますー)



ieで見た自分のブログ
こ、こんな風にみえているのね(汗




見た目はこれでわかっているのですが、実際に、動いているのかは確かめられないー悲し過ぎますー
ちゃんとLINKが働いていなかったら、ご一報いただけると喜びます。


もっとラベルクラウドのカスタマイズ


で、さらに記事が増えてきた時用に、細かく直感的に分類できるとうれしいなーと。

価格帯別、目的別、アイテム別、地域別などー 訪問した人が、自分の目的にあった探し方ができる、メリットもないわけでもないはずです。(たくさん記事のある、大きなサイトだとですけどー)

そうなった時、もうひとつぐらいラベルクラウドを使いたくなります。

でも、先にラベルクラウドにカスタマイズを施していると、あとから追加したものも、全く同じスタイルで追加されてしまいます。
せめて、カラーだけは変えときたい。

なので、ガジェットごとにスタイルを適用する事にしました。



Bloggerの管理画面
IDはウィジェットテンプレートを展開しない方が調べやすいです




カスタマイズしたい部分のIDを調べたら、そのIDを先頭にいれてスタイルを指定していけばいいです。

#Label1(← widget id) .label-size-1 {適用したいスタイル;}

こんな感じで、ガジェットのIDを指定して、スタイルを指定すれば、それぞれのガジェットごとにカスタマイズが可能のようです。

ラベルクラウドの文字の大きさは5種類みたいです。
.label-size-1 〜 5でそれぞれ文字サイズやカラーを指定できるかもですー試してませんけど。
リンク先のコードを眺めて、素敵なカスタマイズに挑戦してみてください!

ガジェットごとにカスタマイズしてみた例


ちょこっと大げさですが、ラベルクラウドをもうひとつ追加して、異なるスタイルを。



ラベルクラウドのカスタマイズ例
試しにItemのみスタイルを指定してみました




ガジェットのIDで指定しておけば、こんな感じになります。




ラベルクラウドのカスタマイズ例
同じサイドバーのラベルクラウドも異なるスタイルも可能!ま、ここまではしませんけどっ




ウィジェット(ガジェット)ごとのカスタマイズは、こちらに詳しく書かれています。
だからはしょれるところははしょります。




ちなみに、もうひとつのラベルクラウドのカスタマイズのコードはこちらから。



こちらのコードはie9でも動いている・・・みたいです。
※その他のブラウザ、使用中のテンプレートによって、動作に違いがあるかと思います。


とりあえずほっと
ページナビが使えなくなってしまって。
過去記事でまとめていたので、早く追記をしたいと気になっていました。


といっても、私は、かなりのローテク者・・・
知識もほとんどないので、間違いなどたくさんあると思いますがごめんなさい。

カスタマイズは苦手・・・
でも、少し自分で手を加えると、Blogに愛着が湧きますね〜!!
年末に向けて、大掃除とともに、Blogも楽しんで更新していきたいと思います。





Sponsored Link








2 コメント:

  1. そよかぜさん♪おはようございます^^

    すごくお久しぶりになってしまいました!

    色んな可愛いブログパーツを取り付けられて羨ましいです~!
    便利+可愛い。。。いいなぁ~☆

    実は私も先日、SALT & PEPPERのブログを終了して、新しいブログを始めました♪
    FC2からお引越ししようと思ってたのに、慣れないのか他のところはついていけず。。。
    結局またFC2になってしまいました^^;
    そして、そちらのブログでも、そよかぜさんのブログをリンクさせてくださいね♡
    どうぞ宜しくおねがいします!

    返信削除
  2. AYA さん
    お久しぶりです〜
    こんばんは。

    どれも、ほとんどコピペなんですよー^^;

    新しいBlog、楽しみですねー!
    こちらこそよろしくお願いします。

    返信削除