Xeoryをカスタマイズしよう!新着記事にサムネイルを入れる編

昨夜もうとうとなりながら、Xeoryのカスタマイズに挑戦してました。

上から順にということで、グローバルナビゲーションの幅とかいろいろ変えてたんですが、メニューの上部に変な線が入ったまま消えないんです(泣)

隅から隅まで見てみたけど、よくわからない・・・
なので、この部分の説明は解決してからにします。

newpost00

スポンサーリンク

今日は、サイドバーにサムネイル付きの新着記事を載せる方法を書きますね。

 

Newpost Catchでサムネイル付きの新着一覧を作る

サムネイルがあったほうがクリックされやすいので、この設定は必須だと思います。

極力、cssとかphpをいじりたくないので、今回もプラグインを使いました。
使うのはNewpost Catchというプラグイン。

プラグインの新規追加で追加、有効化してください。

そしたら、ウィジェットの中に加えられるので、そのままサイドバーの設置したい位置にドラッグします。
newpost0

 

あとは、サムネイルのサイズ、記事の表示数などを決めるだけなんだけど
このプラグインで設定されてる横幅がちょっと狭いので、こんな感じに表示されてしまうんですね。

newpost01

なので、プラグインのcssを触ります。

プラグイン編集で「編集するプラグインを選択」から
Newpost Catchを選んで「選択」をクリックする。

newpost1

newpost-catch/style.cssをクリックする。

newpost2

そこに記述されてる

#npcatch .title{ width:135px; これをちょうどいい長さに設定する。私は215にしました。

そしてウィジェットの画面に戻り、サムネイルを70×70に。

newpost3

するとこんな感じで表示されるようになりました。

newpost4

めでたしめでたし。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

りりちこです。福岡在住2児の母です♪ web制作をしてます。またwebデザインで仕事をしたい方のサポートもしてます。 目まぐるしく変化していくWebの世界で生き残っていくために、日々インプットアウトプットを繰り返しています。