雑記

賢威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.

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

 

 

 

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

↓ ↓ ↓

ひすいちへ問い合わせ♪

 

  • この記事を書いた人

ラング

WEBライター兼ブロガー|SNSや動画編集なども独力で行いながら、メディア構築スキルを高めて発信中。自由な時間を作れる努力が好き。音楽とRPGゲームが大好物。

-雑記
-