2020.4.19 ブログテンプレートを「The THOR」に変更しました。細部を修正中です。
賢威6.1 最新記事カスタマイズ

賢威6.1 最新記事カテゴリのアイコンサイズ変更

 

賢威6.1を使っていてずっと思っていたんだけど、

記事のカテゴリ文字数が多いからか…

 

新着記事アイコンに6文字しかカテゴリ名が表示されず、

ぶつ切り状態でもどかしかった。

 

 

色々調べていたけど、

該当する記事がなかなか見当たらないので、

思い切って自分でカスタマイズにトライしてみた。

 

よければ参考にしてみてほしい。

 

 

賢威6.1 最新記事カテゴリのアイコンサイズ変更

 

 

まず、

実践前にかならず注意しておくことを伝える。

 

 

CSSをいじる場合、思いもかけない影響が出ることがある。

下手にいじって、元に戻せなくなることも当然ありえる。

 

 

そのため、

いじるページの全文をメモ帳などにコピーしておくこと。

 

 

そうすれば、もし異常な状態になっても、

コピーしておいた全文を貼りつけ直せば元通りになる。

その部分だけは徹底して欲しい。

 

 

 

じゃあ早速始めてみる。

作業自体は結構簡単だからご安心を。

 

 

賢威のダッシュボードを開く

『外観』「テーマ編集」を開く

『スタイル』「design.css」を開く

 

design.cssはその名の通り、

ブログデザインを構築する情報がまとまったシートだね。

 

 

下記のソースをカスタマイズする。

——————————————————

/*最新情報のアイコン設定*/
#main-contents dl.news dd.cat{
float: center; (←初期値はleft)
overflow: hidden;
width: 12em; (←初期値は6em)
height: 1.5em;
padding: 0.1em 0.3em 0;
border-bottom: none;
background: #333;
color: #fff;
font-size: 0.555em; (←初期値は0.858em)
text-align: center;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

——————————————————

 

floatはleftのままだと、

記事タイトルと隙間がなくなって詰まった印象だ。

centerにすることで綺麗な状態が作れる。

※本来floatにcenterという値はありません。
ただこの方法でうまくいったので記載しました。

 

widthはカテゴリ文字表示数の変更。

初期値だと6文字しか入らないが数字を増やすと、

増やした分だけ文字数を多く表示できる。

 

widthのみいじるとレイアウトが崩れるが、

上記のfloatをcenterに変更しておくことで、

十分な文字表示領域を確保できる。

 

 

font-sizeは文字の大きさを変更する。

ここはあなたが自分で調節してみて確認してほしい。

 

 

上記のように変更することで、

僕のトップページのような表示になる。

※このブログは現在賢威を使っておりません。

 

カテゴリ文字数で苦戦している人は、

参考にしてもらえると幸いです。

 

 

P.S.

賢威とはこういうものです。

 

 

 

ご不明点があれば遠慮なく聞いてください^^

↓ ↓ ↓

ひすいちへ問い合わせ♪

 

賢威6.1 最新記事カスタマイズ
最新情報をチェックしよう!