トップページの記事リスト表示幅を広げる方法-Simplicity

大きなモニターを使用している場合でも、Simplicity では表示幅が中央部に狭いままで、大画面ユーザーのスペースを有効活用できていない。

そこで、大きなモニターでの閲覧ユーザーに対して、幅いっぱいの記事リストを提供することにした。

header-insert.php を次のように編集する。

個別記事以外のページに no-singlepost.css を読みこませるようにする。

 

root@:/DocumentRoot/wp-content/themes/simplicity-child# cat header-insert.php
<?php
//ヘッダー部分にタグを挿入したいときは、このテンプレート挿入(ヘッダーに挿入する解析タグなど)
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
//例:<script type="text/javascript">解析コード</script>
?>
<?php if (!is_user_logged_in()) :
//ログインユーザーをカウントしたくない場合は
//↓ここに挿入?>
<?php endif; ?>
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>

<?php if( ! is_single()): ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/no-singlepost.css">
<?php endif; ?>

 

no-singlepost.css を、次の通り作成する。

root@:/DocumentRoot/wp-content/themes/simplicity-child/css# cat no-singlepost.css
@media screen and (min-width: 1360px) {
#header-in, #navi-in, #body-in, #footer-in{
 width: 100% !important;
 }
#main {
 float: right !important;
 width: 100% !important;
 padding: 0 300px 0 0 !important; /* サイドバーとの距離 */
 margin: 0 auto !important;
 }
#sidebar {
 position: absolute !important;
 top: 46px !important;
 right: 0px !important;
 }

/*タイル状リスト*/
#main .entry{
 width:320px !important;
 }
}

@media screen and (min-width: 2265px) {
/*タイル状リスト*/
#main .entry{
 width:640px !important;
 }
}

 

min-width: 1360px 等の数字は随時カスタマイズ可能。

これでレスポンシブでおよそうまく表示されるようになった。

幅が広い時は、大きな画像を表示させたい。

  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert C ...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...

タグクラウド

WordPress カテゴリ人気記事 Views most

WordPress カテゴリ人気記事 月間

20151123

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 3
20151123