Blogger向け_QooQページ上部のカテゴリーを線引きしてちょっと見易く
どうも鷹マスクです
ラムネグさんが作成なされたブログ用のテンプレ
Bloggerで利用していてかなり満足していています！
ただほんの少しだけ見た目に気になる点があったので、
カスタムしてみました。
カテゴリー部分を線で区分け！
気になっていた点とは？
それはページ上部のカテゴリー部分に、
線（ライン）が無く、
区分けされていない様に見えていました。
それがシンプルで良いんじゃないか！
・
・
はい、そうでしょう…
でも
私の様にカテゴリーはラインで区分けしたいなと、
考えていらっしゃる方もいらっしゃると思います。
実施したカスタマイズ手順を、
覚え書きの意味も含めてBloggerむけの簡単な手順をご紹介いたします！
カテゴリ-部分のライン引き手順！
今回紹介する手順は簡単ですが、
ブログの表示自体おかしくなる可能性のあるものです。
必ずバックアップをしてください！
バックアップの手順、簡単ですがまとめておきます。
これを実施しないで変更時にミスがあった場合は、
なにがおこるかわかりませんので、ご留意いただければと…
ブログの表示自体おかしくなる可能性のあるものです。
必ずバックアップをしてください！
その1：テーマのバックアップ
※常にテーマはバックアップしていると言う方は、その2へ進んでください。
バックアップの手順、簡単ですがまとめておきます。
バックアップ手順
[１]Bloggerのテーマを選択
[２]表示された画面の右上の方に表示されているバックアップ/復元を選択
[３]ポップアップされた画面で、テーマをダウンロードを選択
以上となります。
これを実施しないで変更時にミスがあった場合は、
なにがおこるかわかりませんので、ご留意いただければと…
その２：CSSの変更手順
これも簡単ですが、手順をまとめておきます。
[１]Bloggerのテーマを選択
[２]画面中央部の「カスタマイズ」
[３]カスタマイズの「上級者向け」を選択
[４]上級者向けのカテゴリー内から「CSSを追加」を選択
[５]下記コピペ内容をコピペする！
[６]結果を確認して終わり。
CSSへコピペする内容
/*ナビ部分にライン*/
#navigation-content li {
border-right :1px solid $(brand.subfont);
padding-right :1em;
}
#navigation-content li:last-child {
border-right :none;
padding-right :0;
}
コピペはここで終わり
簡単にカスタムできたと思います！また今回このライン引きをするにあたり、
こちらのサイトを参考とさせていただきました
ありがとうございました！
追加カスタム
border-right :1px solid $(brand.subfont);上記部分の一部を変更することで表示をカスタムすることができます。
「1px solid」この部分が：1pxの直線を引くという意味です
この部分を「5px solid」や「10px solid」とすることで、
より太い線にできますので、
お好み合わせて変更してみてください。
その他
「1px dashed」：1pxの大きさの点で線を引くという意味です。こちらも好みに応じて変更してみてください。
結果
⇓
こうなる！
如何でしょう？
好みは分かれると思いますが、
個人的には見易くなったと感じています。
QooQデフォルトの設定で、
画面上部のカテゴリー部分が気になっている方は、
是非カスタムしてみてください！
好みは分かれると思いますが、
個人的には見易くなったと感じています。
QooQデフォルトの設定で、
画面上部のカテゴリー部分が気になっている方は、
是非カスタムしてみてください！
以上です、
本日もありがとうございました。
良かったらTwitter、Facebookなどで、
共有お願いしますね♪
0 件のコメント:
コメントを投稿