新レイアウトに適応させるための記事の書き直し作業により、記事に更新がなくても記事が最上位に来ることがあります。

[サイト作成]ワードプレス向けレイアウト調整

SWELL用の関連記事下の時間表示をけすを追加しました。

目次

[サイト作成]ワードプレス向けレイアウト調整

htmlやcssに詳しくない私がやってるサイト上の施策なので、
もっと効果的な方法があるかもしれません。
間違いや、環境によっては同じように再現できない場合もあるかもしれません。

書き換え前のバックアップは忘れずに

外部プレイヤーの横幅変更

ニコ動の場合は貼り付けサイズ(大)が横幅720px。
ブログの横幅が720px以上ある場合は、
ニコ動のほうが大きさが小さくなるため左右に隙間が生じます。

隙間なく横幅めいっぱいまで広げるcssのコードです。

ニコ動外部プレイヤー

ワードプレスにログインし、ダッシュボード → 外観 → 追加CSS
以下を追加

iframe[src*="embed.nicovideo.jp"] {
   width: 100%;
 }

以下がニコ動の表示例

YouTube外部プレイヤー

ワードプレスにログインし、ダッシュボード → 外観 → 追加CSS
以下を追加

.video-container {
   max-width: none;
 }

以下がYoutubeの表示例

ニコ動・静画・立体の埋め込みコードを横に並べる

カラム幅を超えるまで横に並んでいきます。
カラム幅を超えた場合は下へ配置されます。

ワードプレスにログインし、ダッシュボード → 外観 → 追加CSS
以下を追加

iframe[src*="ext.nicovideo.jp"] {
display: inline-block;
}

iframe[src*="ext.seiga.nicovideo.jp"] {
display: inline-block;
}

iframe[src*="3d.nicovideo.jp"] {
display: inline-block;
}

SWELL専用

SWELLで使用されている独自class名のため、SWELLでしか使えません。

関連記事中の時間を消す

通常は関連記事下に時間が表示されます

以下のタグを追加CSSに加えると時間が消えます。

.p-postList__times {
display:none;
} 

Cocoon専用

Cocoon用テンプレートのため、
Cocoonかつ対象となるテーマの場合にのみ有効です。

ドット・レイニーブルー [作者: をまつ]のボタン調整

本文で「ページ区切り」をした時のページ送りボタンの調整。
↓みたいな感じになります

ワードプレスにログインし、ダッシュボード → 外観 → 追加CSS
以下を追加

/*******************************
本文の次へのボタン幅
*******************************/
 .pager-prev-next a{
     width: 100%;
     margin-top:10px;
     text-decoration: none;
 }

/*******************************
数字の背景設定
*******************************/
 .pager-prev-next span:hover {
     color:#fff;
     background-color:#3A5371;
     height: 45px;
     line-height: 45px;
 }
 .page-prev-next{
     height: 45px;
     line-height: 45px;
     border-radius:0px;
     background-color:#fff;
     border: 1px solid #3A5371;
 }

関連コンテンツ

目次
閉じる