広告 雑記

賢威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ゲームが大好物。

オススメ記事

1

どうも、ラングです。YouTube動画をアップする時、他の投稿者のように目立つサムネイル画像を設定したい!…と思ったら、カスタムサムネイルが設定できない!!いや、グレーアウトしてるんだけど。反応しない ...

CocoonでSearchConsole設定 2

どうも、ラングです。今回は、無料WordPressテーマ「Cocoon」にて、検索パフォーマンス管理ツール「Google Search Console」の設定を行ってみようと思う。この記事では、Coc ...

Googleアドセンス審査時の状態 3

なんだかんでで根強い人気よね、アドセンス。 どうも、ラングです。今回は、雑記ブログの運営過程において導入する、収益方法の一つ「Googleアドセンス」を扱うために、必要となる審査通過に向けてやったこと ...

無料ロゴ制作ツール5選オススメ 4

無料とはいえ、クオリティについては侮るなかれ。どうも、ラングです。ブログやホームページ運営していると、カッコいい、見栄えのよいロゴを作れないかな?って思うことあると思うんだよね。無料でロゴを作れるウェ ...

5

どうも、ラングです。実は、新しくブログを作るにあたってドメインを取得しようと思ってたんだけど、せっかくなら新しいサーバーで作ってみようと考えた。(既存はエックスサーバー)料金抑えつつ、独自ドメインがも ...

-雑記
-