質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

2回答

2050閲覧

ワードプレスサイト右サイドバー新着記事がバラバラになってしまう

pond

総合スコア350

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2016/10/15 16:34

編集2016/10/16 00:00

###前提・実現したいこと
ワードプレスサイト右サイドバー新着記事一覧を整えたいです。
↓今。
イメージ説明
↓こんな感じになりません。
イメージ説明
###試したこと
・プラグインNewpost Catchを使ってアイキャッチ画像のサイズを統一表示させることはできましたが、
記事タイトルが全部表示されるので、style.cssで定義してる部分を探したのですが見つかりませんでした。
・プラグインを当たってみましたが、タイトル表示を省略してくれそうなものはありませんでした。
###環境(言語/FW/ツール等のバージョンなど)
▼ ワードプレス
WordPress 4.6.1
▼ 使用してるテーマ
Travelify バージョン 3.0.2
▼ 使用してるプラグイン
Advanced Custom Fields バージョン 4.4.8
All In One SEO Pack バージョン 2.3.9.1
BackWPup バージョン 3.3.4
Contact Form 7 バージョン 4.5
EWWW Image Optimizer バージョン 2.9.8
Instagram Feed バージョン 1.4.7
Lazy Load バージョン 0.6.1
Newpost Catch バージョン 1.3.1
Per page head バージョン 1.3
PubSubHubbub バージョン 1.7.2
WP Edit バージョン 4.0
WP Multibyte Patch バージョン 2.7
WP-Optimize バージョン 1.9.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pond

2016/10/16 00:01

ご指摘ありがとうございます。内容を修正いたしました。
guest

回答2

0

自己解決

matsuzakaqさん

色々ご教示頂き、ありがとうございました。
Newpost Catchを使ってるので、#npcatchを指定してあげる必要がありました。
以下、設定方法です。

▼ ウィジェットの設定変更
[外観] → [ウィジェット]にて、Newpost Catchで追加した[新着記事]内の
[プラグインフォルダ内のデフォルトCSS]のチェックを外す。
▼ style.css設定変更
#npcatch li{
overflow:hidden;
clear:both;
vertical-align:top;
border-bottom: 1px dotted #666666;
}
#npcatch img{
float:left;
padding:5px 10px 0 0;
margin:0px 0px 10px;
}
#npcatch .title a{
font-weight: 700;
text-decoration: none;
}
#npcatch .date {
font-size: small;
font-weight: 600;
display:block;
color: #adb5bf;
margin-bottom: 5px;
}
#npcatch li:hover{}
#npcatch li:hover .title{}
#npcatch li:hover .title a{}
#npcatch li:hover .date{}

投稿2016/10/17 07:27

pond

総合スコア350

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/17 09:57

よかったです(^^)/
guest

0

>新着記事一覧を整えたい
とのことですけれど、画像を拝見すると、整えたい目的がわかりません。
横幅を長くしたいのか、「新着記事」という表示をなくしたいのか?

>タイトル表示を省略してくれそうなものはありませんでした。
ってあるから、後者かな?

もしそうなら、

①ウィジェットに何も入力しなければ、表示されません。

②CSSにこう書けば、(たぶん)表示されません。
.widget-title {
display: none;
}

このいずれかでイケると思います。
②でたぶんと書いたのは、CSSのスタイル名(.widget-title)が違うかもしれないからです
その場合は下記へ☟

・・・

>style.cssで定義してる部分を探したのですが見つかりませんでした。お試しあれ。

定義されたスタイルを調べるときは、調べたサイトを開いた状態で「F12」をおしてみてください。
画面の下に「開発ツール」が開きます。
あとは、「四角に枠に矢印マーク」をクリックすると、選択モードになるので、スタイル名を調べたいとこにカーソルを当ててクリックしてみてください。
尚、「四角い枠に矢印マーク」は、firefoxもchromeも、「開発ツール」画面の一番左上にあります。

投稿2016/10/16 01:12

編集2016/10/16 01:17
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pond

2016/10/16 04:07

ありがとうございます。画像は整ってたので修正は、必要ありませんでした。 タイトル表示は省略でなく、"↓こんな感じになりません。"の下のスクリーンショットのように画像の幅にタイトル・タイムスタンプ・説明文をおさめるように表示させ、かつ、記事間に枠線を表示する方法を調べてました。言葉の使い方間違ってました。大変失礼いたしました。
退会済みユーザー

退会済みユーザー

2016/10/16 09:27

>画像の幅にタイトル・タイムスタンプ・説明文をおさめるように表示 それだったらサイドバーの横幅を広くしないといけませんね。 「F12」でスタイル名を調べて、marginとかwidthという指示で横幅を広げればいいと思いますよ。スタイル名がわかったら、そこに書いてあるCSSをコメントに書いてみてください。 >記事間に枠線を表示 これもスタイル名を調べて、border-bottomで指示すればいけると思います。同じくコメントくださいませ。
pond

2016/10/17 07:19

ご教示頂きありがとうございます。試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問