常連

社会貢献

自己紹介

**__関数に変数を代入して、繰り返し使いたい。__**

jqueryでアニメーションをまとめた関数を繰り返し使いつつ、その関数に代入する変数を変えたい。超初心者です。申し訳ないです。

[例]
```ここに言語を入力
i = 1;
function(){
　$('li要素#id'+i).animate({'opacity': 1}, 1200);
/*など処理色々*/
}
//この関数が終わってから、
i = 2;
function(){
　$('li要素#id'+i).animate({'opacity': 1}, 1200);
/*など処理色々。i=1と同じ関数*/
}
//この関数が終わってから、
i = 3;
function(){
　$('li要素#id'+i).animate({'opacity': 1}, 1200);
/*など処理色々。i=1と同じ関数*/
}
...という風な感じです。

```

### 試したこと

for文の繰り返しだと一瞬でi=3まで行ってしまい、0で代入して処理して欲しい関数をすっ飛ばしてしまいます。
setTimeoutを使っても、もちろん時間通りには繰り返してくれるのですが、代入ができなくなってしまうようです。
変数iを配列に入れて.each()でできるかなとも思いましたが、単体のli要素を処理する方法しか見つかりませんでした。でも関数でまとめたいので。
Deferredオブジェクトもダメ元でトライしてみましたが、何のエラーメッセージも無いけれど、１ミリも動きません。

//修正・加筆１
ご指摘ありがとうございます。関数そのままの方が良いとのことなので、そのままベタっと貼ってみました。下記が関数です。

```ここに言語を入力
$(function(){
		//スクロール
		$('div.mouseon_scroll_slide').mouseover(function(){
    		$('div.mouseon_scroll_slide').delay(800).animate({'left': '-1950px'}, 44333); //1区分
		});
		
		$('li#mp'+i+'.main_bg_photo img').animate({'opacity': 1}, 2500);
		$('div#id_'+i+'.mouseon_scroll_slide').on('mouseover', age_and_text);
		function age_and_text(){
			$('li#lt'+i+'.life_text').fadeIn(800);
			$('li#la'+i+'.life_age').delay(600).fadeIn(800);
			};
	$('div.history_b').on('mouseover', main_photos);
		function main_photos(){
			$('li#lmp'+i+'.life_main_photos').animate({'opacity': 1}, 1000);
			$('li#lmpc'+i+'.life_main_photos_comments').fadeIn();
			$('li#lmpc'+i+'.life_main_photos_comments').animate({'top': '-190px', 'opacity': 1}, 1000);
			};
	$('div.history_c').on('mouseover', snap123);
		function snap123(){
			$('li#p'+i+'.social_snap_photos1').animate({'opacity': 1}, 1000);
			$('li#c'+i+'.social_snap_comments1').fadeIn();
			$('li#c'+i+'.social_snap_comments1').animate({'top': '3px', 'opacity': 1}, 1200); //3pxは停止場所
			$('li#p'+i+'.social_snap_photos2').animate({'opacity': 1}, 2000);
			$('li#c'+i+'.social_snap_comments2').fadeIn();
			$('li#c'+i+'.social_snap_comments2').animate({'top': '3px', 'opacity': 1}, 1600); //3pxは停止場所
			$('li#p'+i+'.social_snap_photos3').animate({'opacity': 1}, 3000);
			$('li#c'+i+'.social_snap_comments3').fadeIn();
			$('li#c'+i+'.social_snap_comments3').animate({'top': '3px', 'opacity': 1}, 2000); //3pxは停止場所
			};
	$('div.history_f').on('mouseover', snap4);
		function snap4(){
			$('li#p'+i+'.social_snap_photos4').animate({'opacity': 1}, 1000);
			$('li#c'+i+'.social_snap_comments4').fadeIn();
			$('li#c'+i+'.social_snap_comments4').animate({'top': '-110px', 'opacity': 1}, 1200); //3pxは停止場所	
			};
});
});
```
この関数に変数を代入し、この関数の処理が終わってから、同じ関数にi++を代入したいのです。
スクロールは関数から外してしまうこともできますが、取り敢えず組み込んであります。

関数に変数を代入して、繰り返し使いたい

下記画像のような、各線の長さや傾きが異なるテキストボックスを作りたいです。

![イメージ説明](ffaba6cbba5a0b10e5c637a482028726.jpeg)

四角形のテキストボックスを作り、個別に線を傾けてmarginなどで調整することで実現できると考えているのですが、「transform:skew(20deg);」を1つ入れると、全部のborderが変わってしまいます。

borderを個別にtransformで指定できていないことが原因と考えているのですが、指定方法がわからず詰まっています。個別に変更し、想定したとおりの図形を描くにはどうすればよいでしょうか？

現在のコードは以下の通りです。複数行使うことも考慮し、htmlは3行分改行しています。

CSS
```
.box {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border-top: solid 3px #000000;
    border-left: solid 3px #000000;
    border-right: solid 3px #000000;
    border-bottom: solid 3px #000000;
}
.box p {
    margin: 0; 
    padding: 0;
}
```
HTML
```
<div class="box">
    <p>Text
  <br>text
  <br>Text</p>
</div>
```

各線の長さが異なる台形型のテキストボックスを作りたい

### 前提・実現したいこと

現在Wordpressにて構築しているサイトにOGPタグの設定を行いたいです。

Facebookのみog:imageが取得できないエラーが発生しており原因が全くわからない状況となります。(Twitterは正常に取得できています)
お分かりになる方がいれば解決方法についてアドバイスいただけますと幸いです。

現在わかっている範囲ですと同様の不具合の相談がteratail上にありました。
https://teratail.com/questions/49004

こちらの回答では　
>IP制限とパスワード設定が原因でした、解決しました！

と記載あるのですが、このIP制限とパスワード設定というのは何を指しているのかが分かりませんでした。

### 発生している問題・エラーメッセージ

Facebookの提供するシェアデバッカーでは以下のエラーが表示されています。
デバッカーではurlやtypeなどそのほかの項目は全て取得できており、og:imageだけ取得できていない状態となっております。

```
推測されるプロパティ　：　値が他のタグから推測される場合でも、og:imageプロパティは明示的に指定してください。
プロパティがありません　：次のプロパティは必須です: og:url, og:type, og:title, og:image, og:description, fb:app_id
```

### 該当のソースコード

こちらをfunction.phpに記述しています。

```PHP
/*********************
OGPタグ/Twitterカード設定を出力
*********************/
function my_meta_ogp() {
  if( is_front_page() || is_home() || is_singular() ){
    global $post;
    $ogp_title = '';
    $ogp_descr = '';
    $ogp_url = '';
    $ogp_img = '';
    $insert = '';

    if( is_singular() ) { //記事＆固定ページ
       setup_postdata($post);
       $ogp_title = $post->post_title;
       $ogp_descr = mb_substr(get_the_excerpt(), 0, 100);
       $ogp_url = get_permalink();
       wp_reset_postdata();
    } elseif ( is_front_page() || is_home() ) { //トップページ
       $ogp_title = get_bloginfo('name');
       $ogp_descr = get_bloginfo('description');
       $ogp_url = home_url();
    }

    //og:type
    $ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';

    //og:image
    if ( is_singular() && has_post_thumbnail() ) {
       $ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
       $ogp_img = $ps_thumb[0];
    } else {
     $ogp_img = 'TOPページ＆アイキャッチ画像がないときに使われる画像のURLを絶対パスで入力し、ブラウザーからは閲覧できています。';
    }

    //出力するOGPタグをまとめる
    $insert .= '<meta property="og:title" content="'.esc_attr($ogp_title).'" />' . "\n";
    $insert .= '<meta property="og:description" content="'.esc_attr($ogp_descr).'" />' . "\n";
    $insert .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
    $insert .= '<meta property="og:url" content="'.esc_url($ogp_url).'" />' . "\n";
    $insert .= '<meta property="og:image" content="'.esc_url($ogp_img).'" />' . "\n";
    $insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
    $insert .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
    $insert .= '<meta name="twitter:site" content="ツイッターのアカウント名を入力しています" />' . "\n";
    $insert .= '<meta property="og:locale" content="ja_JP" />' . "\n";

    //facebookのapp_id（設定する場合）
    $insert .= '<meta property="fb:app_id" content="ここにappIDを入力しています">' . "\n";
    //app_idを設定しない場合ここまで消す

    echo $insert;
  }
} //END my_meta_ogp

add_action('wp_head','my_meta_ogp');//headにOGPを出力
```

### 試したこと
htaccessの確認
robot.txtの確認

WordPressOGPタグ設定時にog:imageが取得できない不具合

コードは以下になります

```php
 <?php $header_images = get_uploaded_header_images();
                        if ($header_images) :
                    ?>
                            <div class="flexslider">
                                <ul class="slider">
                                    <?php 
                                        foreach ($header_images as $header_image):
                                    ?>
                                        <li><img src=" . <?php $header_image['url'] ?>. " ></li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                    <?php endif; ?>
```


自分的には間違ってないと思うのですが、どうでしょうか。

wordpressのコーディングなんですが、以下のコードは間違っていますでしょうか？

ワードプレスの記事（テキスト文）を「JavaScript」と「jQuery」を利用して、
htmlに貼り付けることは出来たのですが、
アイキャッチ画像（jpg・gif・png）を貼り付ける方法が分かりません。
下記コードにどう追記するすればよいのでしょうか。
ご回答よろしくお願いします。




```
$.ajax({
	url: 'http://www.example.com/blog/feed',
	type: 'get',
	dataType: 'xml',
	timeout: 5000,
	success: function(xml, status) {
		if (status === 'success') {
			var row = 0;
			var data = [];
			var nodeName;
			$(xml).find('item').each(function() {
				data[row] = {};
				$(this).children().each(function() {
				    nodeName = $(this)[0].nodeName;
				    data[row][nodeName] = {};
				    attributes = $(this)[0].attributes;
				    for (var i in attributes) {
						data[row][nodeName][attributes[i].name] = attributes[i].value;
				    }
					data[row][nodeName]['text'] = $(this).text();
				});
				row++;
			});
			$('#feed').wrapInner('<ul></ul>');
			for (i in data) {
                var update = data[i].pubDate.text;
                var date = new Date(update);
                var update = dateFormat(date);
				
			    $('#feed').find('ul').append('<li><p class="wp"><a href="' + data[i].link.text + '" target="_blank" class="wp">' + data[i].title.text + '</a></p><a href="' + data[i].link.text + '" target="_blank">' + data[i].description.text + '</a><p class="day">' + update + '</p></li>');
			}
		}
	}  
});

                function dateFormat(date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                var w = date.getDay();

                m = ('0' + m).slice(-2);
                d = ('0' + d).slice(-2);

                return y + '年' + m + '月' + d + '日';
}

```

cssはこんな感じ。
```
#feed {
	width: 400px;
	height: 160px;
	margin: 0;
	overflow-y: scroll;
	font-size:12px;
	}
#feed ul li {
	line-height:1.8em;
	margin:0 0 10px -40px;
	padding-bottom:10px;
	list-style: none;
	border-width: 0 0 1px 0;
	border-bottom: dotted;
	border-color: #cccccc;
	}
#feed ul li p.wp {
	font-weight:bold;
	margin-bottom:6px;
	}
#feed ul li p.day {
	text-align:right;
	margin:6px;
	}

```


htmlに記述したスクリプトコードは、

``````
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="rss.js"></script>

```

Wordpress（記事）のアイキャッチをhtmlに貼り付けする方法を教えてください。

### 前提・実現したいこと

「固定ページ（page-week.php）」に、
「カスタム投稿タイプ（monday）」の一覧を表示するコードを完成させたいです。

[こちらのサイト](https://techmemo.biz/wordpress/pre_get_posts/)を参考に下記のソースコードを書き、しかし問題が発生中です。

### 発生している問題・エラーメッセージ
「カスタム投稿タイプ（monday）」の一覧を表示するために、
functions.phpに
``$query->set( 'post_type', array( 'monday' ) ); ``
を書くと404になります。

またはこれを消せば404には行かなくなりますが、でもその場合、「固定ページ（page-week.php）」の``<h3><?php echo get_the_title(); ?></h3>``が表示するのは、「固定ページ（page-week.php）」のタイトルであって、「カスタム投稿タイプ（monday）」のタイトルではありません。

一体なぜ上のような問題が発生し、どうしたらうまくいくのでしょうか？
ご意見、ご回答、よろしくお願いいたします。
### 該当のソースコード
↓記事一覧を出力するループ（page-week.php）
```php
<?php
/**
 * Template Name: page-week
**/
?>

<h2>「カスタム投稿タイプ（monday）」の記事一覧を出力したい<h2>

<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>
	<h3><?php echo get_the_title(); ?></h3>
<?php endwhile; ?>
<?php else: ?>
	<p>なし</p>
<?php endif; ?>
```
↓ループの変更（functions.php）
```php
function change_posts_per_page($query) {
	if ( is_admin() || ! $query->is_main_query() ) {
		return;
	}
	if ( $query->is_page( 'week' ) ) { // weekはslugです
		$query->set( 'posts_per_page', 20 );
		$query->set( 'post_type', array( 'monday' ) ); // これがあると404
		$query->set( 'author', get_current_user_id() );
		return;
	}
}
add_action( 'pre_get_posts', 'change_posts_per_page' );
```

### 試したこと
pre_get_postsではなく、サブループで
``$args = array( 'post_type' => 'monday' );``のようにすると、ちゃんと「カスタム投稿タイプ（monday）」の記事一覧が表示できました。

WordPressの固定ページで、「カスタム投稿タイプ一覧」を表示したい

### 前提・実現したいこと

wordpressに関わってからまだ日が浅いものです。
本番サーバー からテストサーバー へAll-in-One WP Migrationを使って移行しましたが、
CSS、JSがうまく反映されませんでした。パスを合わせているのですが、４０４のエラーが出てしまいます。
WPの場合ファイル形式の後にidがつくと読み込めないのでしょうか？
サーバー の設定が間違っているのでしょうか？



### 発生している問題・エラーメッセージ

```
Failed to load resource: the server responded with a status of 404 ()とサーバーエラー
```

### 該当のソースコード
header.phpのコードを見ると<link href="<?php echo home_url(); ?>/css/style.css?id=○○○（日付）になっている。

### 試したこと

<link href="<?php echo get_template_directory_url(); ?>/css/style.cssに書き換えて見ましたが同じエラーが出ました。

どのように対応すればCSS、JSが反映されるのか、お力を貸してください。よろしくお願いいたします。

wordpressの移行後cssが反映されない

### 前提・実現したいこと

お世話になります。WordPress,PHP初心者です。
現在、WordPressの多言語化プラグイン「Polylang」を使った多言語サイトを制作しています。
言語は「英語」と「日本語」の2言語です。

すべての投稿記事を表示するアーカイブページをそれぞれの言語のページで表示したいです。
英　語サイト：https//example.com/archives/
日本語サイト：https//example.com/ja/archives/

### 発生している問題

functions.php内で下記のソースコードを記述しましたが、日本語ページだけ表示することができません。
デフォルト言語である英語ページは表示できています。
```ここに言語名を入力
function post_archive( $args, $post_type ) {
  if ( 'post' == $post_type ) {
    $args['rewrite'] = true;
    $args['has_archive'] = 'archives';
  }
  return $args;
}
add_filter( 'register_post_type_args', 'post_archive', 10, 2 );
```

### 試したこと

現在の言語取得して切り替えてみようと次のように試してみましたが、表示できませんでした。
```ここに言語を入力
function post_archive( $args, $post_type ) {
  $locale = get_locale();
  if( $locale == 'en_US' ){
    if ( 'post' == $post_type ) {
      $args['rewrite'] = true;
      $args['has_archive'] = 'archives';
    }
    return $args;
  }else if( $locale == 'ja' ){
    if ( 'post' == $post_type ) {
      $args['rewrite'] = true;
      $args['has_archive'] = 'archives';
    }
    return $args;
  }
}
add_filter( 'register_post_type_args', 'post_archive', 10, 2 );
```

どうすれば日本語のアーカイブページを表示することができるのかアドバイスをいただけないでしょうか。

よろしくお願いいたします。

【WordPress】各言語毎のアーカイブページを表示したい

wordpressのアフィンガー５EXを使用しています。
カスタムメニューをつくり、「タイトル属性」をテキストとして出力しナビゲーション内での改行を実現したいです。

ようするに、メニューを２行にしたいです。
![イメージ説明](2ccfb05c3a696f935a050e95aadef8c8.png)

希望：　メニュー名　＋　改行　＋　タイトル属性　にしたいです。


こちらのサイトを参考に（https://techmemo.biz/wordpress/walker_nav_menu_start_el/）、
phpを貼ってみたのですが、改行　＞　タイトル属性　＋　メニュー名と、おかしくなってしまいます。
![イメージ説明](8e556d98650b2f0eeb8e25620e14bdea.png)

```php
function attribute_add_nav_menu($item_output, $item){
  return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<br><span>{$item->attr_title}</span><", $item_output);
}
add_filter('walker_nav_menu_start_el', 'attribute_add_nav_menu', 10, 4);
```
これをテーマにいれると、以下のようなHTMLコードになります。
なぜか<br>もはいってしまっています。

```html
<nav class="smanone clearfix"><ul id="menu-lamenu-1" class="menu"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-464"><a title="タイトル属性" href="#"><br><span>タイトル属性</span><i class="fa fa-home" aria-hidden="true"></i>アメリカ生活</a></li>
```

コードがまちがっているのでしょうか？
もしくは、他に実現できる方法があれば教えていただけないでしょうか？

よろしくお願いします。

wordpressで二行のメニューをつくりたい：「タイトル属性」をテキストとして出力しナビゲーション内での改行

### 前提・実現したいこと

Wordpressで、初めてオリジナルテーマから、ブログではないウェブサイトを制作しています。
ローカル環境の構築にはMAMPを使用しています。

### 発生している問題・エラーメッセージ

現在はトップページのみ完成していて、本番URLでも問題なくサイトが動いています。
お伺いしたいのは下層ページについてなのですが、トップページ・下層ページともにWordpressのダッシュボードにある固定ページでは作らず、自作のテーマフォルダ内に直接フォルダとファイルを追加する形で作成しています。
その場合、トップページから下層ページへのリンクはどのように設定できますでしょうか？

トップページのパスは以下のようになっていて、
```ここに言語を入力
/テーマ名のフォルダ/index.php
```
トップページから遷移させたい下層ページのパスは以下のようになっています。
```ここに言語を入力
/テーマ名のフォルダ/下層フォルダ/さらに下層フォルダ/index.php
```

### 試したこと

```ここに言語を入力
<a href="./下層フォルダ/さらに下層フォルダ/"></a>
```
という指定の仕方と、
```ここに言語を入力
<a href="<?php echo get_template_directory_uri(); ?>/下層フォルダ/さらに下層フォルダ/"></a>
```
を試してみましたが、ページ遷移できません。

調べたところ、固定ページで作成するとパーマリンク設定などができるみたいなのですが、
フォルダ内に直接ファイルを作成している場合のやり方が分からず…。

独学で周りに質問できる環境がないためご教示いただけると幸いです。
よろしくお願いします！

Wordpress・下層ページへのリンクについて

トップページに動画を入れたいのですが、どうしても思った通りに表示されません。

右側１５％の余白があり、左側８５％にマスクがかかっていて、そのマスクに合わせて動画を表示させたいです。
全画面なら通常に表示されて、cssで調整してもマスクと動画の比率が違うためか画面サイズによってずれてしまします。

![イメージ説明](ca014d81a5a485473fd171bf5487d89d.png)

現在コードはこのようになっています。

```JavaScript

//ムービー全画面スクリプト（PC用）
//(1)動画の画角比率を設定します。4:3の場合はここを「4/3」に変更
var movieRatio = 16/9;  
//(2)画像のリサイズ関数「movieAdjust()」を作成
function movieAdjust(){
        var adjustWidth = $(window).width();
        var adjustHeight = $(window).height();
        if (adjustHeight > adjustWidth / movieRatio) {
                adjustWidth = adjustHeight * movieRatio;
        }
        $('iframe').css({width:(adjustWidth),height:(adjustWidth/movieRatio)});
}
//(3)画面リサイズ時と画面ロード時に関数movieAdjust()を実行
  $(window).on('load resize', function(){
    movieAdjust();
  });

```

```HTML
<div class="mv">
　<div class="layer1"></div>
　<div class="pc_only" id="video">
　　<iframe src="https://player.vimeo.com/video/305028287autoplay=1&loop=1&muted=1">　　　　
</iframe>
</div>
</div>
```

```css
#video iframe{
  width: 85%;

  transform: translate(-15%,0%);
  -ms-transform: translate(-15%,0%);
}
```

すみませんわかりにくい説明かもしれないのですが、助けていただけたら嬉しいです（ ;  ; ）
また、参考になるサイトなどでもいいので教えていただけたらありがたいです（ ;  ; ）

説明足りない箇所などありましたらご連絡ください。

![イメージ説明](a5ac4829d24c4a5030231d3f662061b6.png)

TOPページに画面いっぱいじゃない動画を入れたいです。

# Swiperを使った自動スクロールについての質問です！

現在Swiperを使い、スライドショーの作成をしているのですが、スライドとスライドの切り替えの際の時間をどうしてもなくしたい（日本語が下手で伝わりにくく申し訳ないです）のですがどのように記述すればよいのかわかりません。

    今現在は

```js
var swiper = new Swiper('.swiper-container', {
      slidesPerView: 8,
      spaceBetween: 30,
      initialSlide: 2,
      loop: true,
      autoplay: 1,
      autoplayDisableOnInteraction:false,
      grabCursor: true,
      reverseDirection: true,
      freeMode: true,
      speed: 4000,
    });
```
    

    このように記述をしております。

完成イメージはこのような感じです
https://chocolat5.com/demo/loop-image-animation/

    皆様にお助けいただければ助かります!

![イメージ説明](60c936a0e1554123910e9c05d92056e1.jpeg)
上記画像のパソコンやスマートフォンの画像を、右から左に流れるようにアニメーションをさせたいと考えています。

また、こちらHTMLとSCSSになります。
```html
<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/kaden.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/tablet.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/desktop.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/note.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/smart.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/parts.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/etc.png"></div>
        <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/gaming.png"></div>
      </div>
    </div>
```

```scss
.swiper-container {
  padding: 3em 0 6em;
}
```

SWIPERのautoplayについて

wordpressで、特定のページだけサイドバーを非表示にするテンプレートを作成したいです。

☆テンプレートはaffinger5(http://affinger5.com)です

page.phpをコピーして、pagenosidebar.phpをつくり、サイドバーを非表示にして、
テンプレートとして呼び出すところまではできました。

参考：http://www.hhl.ne.jp/wp/2018/05/07/%E5%9B%BA%E5%AE%9A%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E4%BD%9C%E6%88%90%EF%BC%88%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AA%E3%81%97/

しかし、これでは、基本のメインカラムのサイズはかわらず、サイドバーがあった部分があいてしまっている状態です。

![イメージ説明](beb39e87c5e4fff583611bfb2b913697.png)

メインカラムを１カラムのように、全幅にひろげたいです。

☆要するに、pagenosidebar.phpのページだけに以下のCSSを適応させたいです。

```css
#contents #main{
max-width: 100%;
width: 100%;
padding: 0;
}
```

お知恵をおかしいただけないでしょうか？

よろしくおねがいします。