- ベストアンサー
wordpressのトップスライドの・・・
高さを今500pxに指定しているのですが現状は306pxにテーマの設定で切られた画像を無理矢理500pxに伸ばしている状態になっています。 自分でfirebugで色々中身を調べたのですがアイキャッチ部分のサイズが指定されているか、classのattachment-ytterbiumoid-gallery wp-post-imageって部分で指定されているのかなと思いcssを探したのですがどこのcssにも記載がありませんでした。 どこをどうすれば500pxの画像をはめる事ができますでしょうか？ 宜しくお願い致します。 サイト：http://snapkidz.biz/wp/
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- maillibra9
- ベストアンサー率60% (9/15)
あれ・・・wordpressって登録される画像のサイズを決める管理画面があったはずだけど。 メディア機能がないバージョンかな？ functions.phpに登録される画像の大きさを決めるコードを書くとかどうでしょう。 add_image_size( $name, $width, $height, $crop ) $name ... サイズ名：アルファベットが安心 例）'my-original-size' $width ... 画像の幅：整数，ピクセル単位 $height ... 画像の高さ：整数，ピクセル単位 $crop ... 縮小しないで中央を切り抜く（true）か否か(false)：true または false functions.phpに書き込む例↓ add_image_size（ 'my_original_size',900,500,true ）; ちなみに、使っているテーマがわからないと答えようがないという感じですｗ まぁとにかく、がんっばってください！
お礼
一度変更したらエラーなってしまってこうゆうときに限ってバックアップ取り忘れるという最悪な展開に・・・もう一度チャレンジしてみます。
補足
普通だとstyle.cssの部分にコードやら書いてあってそこから編集しているのですが今回はどこにも見当たらなくて困ってます。 下のコードの部分を編集したいのですが・・・ <div id="slideshow"> <div class="list"> <?php while (have_posts()) : the_post(); ?> <div class="item append-clear"> <div class="image"> <a href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"> <?php $exclude[] = get_the_ID(); if (has_post_thumbnail()) { the_post_thumbnail(PADD_THEME_SLUG . '-gallery', array('title' => get_the_title())); } else { echo '<img class="thumbnail" src="' . $padd_image_def . '" />'; } ?> </a> </div> </div> <?php endwhile; ?> </div> </div> ↑のコードにもサイズしていなどはしていないっぽいんですよね・・・ いちどチャレンジしてみます！
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
同じファイル名で上書き保存（アップロード）すればいいのでは？
補足
画像は指定のサイズにしてアップしてもアイキャッチに登録の際に切られてしまいます。汗
関連するQ&A
- WordPress ギャラリーの不具合
WordPressでPinboardというテーマにしています。 記事のフォーマットをギャラリーにすると、記事一覧で記事内に貼付けられている画像がアイキャッチの様に表示されるのですが、記事内の画像を変更しても、一覧のアイキャッチ画像が変更されずに変更前の画像が表示されてしまいます。
- 締切済み
- レンタルサーバ・ASP
- マウスオーバすると画像の配置が変わる
今回コチラ（http://www.skuare.net/test/jrumble.html）のjqueryを入れました。 サイト：http://snapkidz.biz/wp/ ブルブルする場所はコップの部分になります。 記載部分は以下です。 ーheader.phpー <a href="#" class="cup">cup</a> ーCSSー a.cup { display: block; width: 90px; /* 画像1枚分の横幅 */ height: 110px; /* 画像1枚分の高さ */ text-indent: -9999px; /* 文字を見えなくする */ background-image: url("http://snapkidz.biz/wp/wp-content/uploads/2011/12/cup.png"); /* 画像ファイル名 */ position:relative; top:303px; left:1080px; } a.cup:hover { background-position: top right; /* 背景画像の表示開始基準を右上に変更 */ } マウスオーバすると画像の配置が移動してしまいます。 これはどうすればなおるのでしょうか？ 宜しくお願いします。
- ベストアンサー
- CSS
- 背景について・・・
いつもお世話になっております。 今添付画像のようなサイトを付くろうと思っております。 http://snapkidz.biz/wp/ 今回うまくいってない部分は、背景です。 firefoxでみると崩れなどはないのですが、ipadでみるとかなりheadとmainの部分に隙間がうまれてしまいます。 この背景のひき方は間違っているんでしょうか？ html/ [header] <body> <div id="page"> <div id="wrapper"> <div class="header"> <h1><a href="#"><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/logo_03.gif" width="171" height="76" alt="Art・・"></a></h1> </div> [フッダー部分にpageとwrapperの/divの記載はあります。] [CSS] html,body{margin:0;padding:0;} #page{height:580px;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/theme_top_01.jpg);background-repeat:no-repeat;margin:0 auto;background-position:center;padding-top:10px;} #wrapper{width:100%;margin:0 auto;} .header{width:980px;height:100px;margin:0 auto;} .header h1{margin:0;} #main{height:1317px;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/body_02.jpg);background-repeat:no-repeat;margin:0 auto;background-position:center;position:relative;top:450px;} こっちのほうが楽だよ！とか普通はこうだ！などありましたら勉強不足な自分に教えてください。 宜しくお願いします。
- ベストアンサー
- CSS
- WordPress PCとスマホで表示を切り替える
PCでは記事一覧5件、スマホでは3件表示するようにしたいです。 条件分岐タグを使って、PCとスマートフォンで記事の一覧表示を切り替える方法がうまくいきませんでした。 https://handywebdesign.net/2017/11/wp-is-mobile/ 改造前のコード（問題なく表示できました） <ul> <?php $latest_posts = get_posts( array( 'posts_per_page' => 5, // 表示する記事の数 'category_name' => '投稿ID',// 投稿IDを取得 'fields' => 'ids', ) ); foreach( $latest_posts as $post ): setup_postdata( $post ); if( has_post_thumbnail() ) { $post_thumb = get_the_post_thumbnail( '', 'post_thumbnail' ); // アイキャッチがあるときはアイキャッチを表示 } else { $post_thumb = '<img src="' . get_template_directory_uri() . '/img/noimage.gif" width="100" height="100" alt="デフォルト画像" />'; // アイキャッチがないときは《noimage.gif》を表示 } $post_categories = get_the_category(); // カテゴリーを取得 $post_content = wp_trim_words( get_the_content(), 30, '…' ); // 30字分を抜粋 ?> <li <?php post_class(); ?>> <a href="<?php the_permalink(); ?>"> <div class="blogListimg"> <?php echo wp_kses_post( $post_thumb ); ?> </div> <!-- アイキャッチここまで --> <p class="post-time blogDt"><?php the_time('Y.m.d'); ?></p> <p class="post-categories blogCt"><?php echo esc_html( $post_categories[0]->name ); ?></p> <h3 class="post-title"><?php the_title(); ?></h3> <p class="post-content blogBf"><?php echo esc_html( $post_content ); ?></p> </a> </li> <?php endforeach; wp_reset_postdata(); ?> </ul> PCとスマートフォンで記事の一覧表示を切り替えるコード 参考サイトを参考にfunctions.phpにfunction is_mobile() コードを追加。 トップページのphpに以下を改造。 <?php if ( is_mobile() ) : ?> <?php $latest_posts = get_posts( array( 'posts_per_page' => 5, // 表示する記事の数 'category_name' => '投稿ID',// 投稿IDを取得 'fields' => 'ids', ) ); foreach( $latest_posts as $post ): setup_postdata( $post ); ・ ・ ・ <?php else: ?> <?php $latest_posts = get_posts( array( 'posts_per_page' => 3, // 表示する記事の数 'category_name' => '投稿ID',// 投稿IDを取得 'fields' => 'ids', ) ); foreach( $latest_posts as $post ): setup_postdata( $post ); ・ ・ ・ <?php endforeach; wp_reset_postdata(); ?> </ul> 結果は真っ白になってしまいました。 HTMLソースも真っ白です。 空白はSublime Textのテキストエディターを使っていますので、確認しております。 どこが違うか、教えてくださいますか？ よろしくおねがいします。
- ベストアンサー
- PHP
- z-indexについて...
今回添付画像のように画像の上にアイコンを置きたかったのですがうまくいきません。 http://snapkidz.biz/wp/ cssのz-indexを使って熊のアイコンをpngで表示させればうまくいくのかな？と思ったのですが、うまく表示できませんでした。 ソースです。 <div id="header"> <ul class="haeder_bak"> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" /> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_04.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_05.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_06.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_07.jpg" /></li> </ul> <div class="header_slider"> <img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_09.jpg" /> </div> <div class="header_bear"> <img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" /> </div> </div> CSSです。 #header{ width:100%; margin-top:15px; position :relative; z-index:0; } #header li{ float:left; } #header ul{ list-style-type:none; } .haeder_bak{ poaition:abosolute; z-index:10; } .header_slider{ poaition:abosolute; z-index:20; } .header_bear{ poaition:abosolute; z-index:30; } どうすれば添付画像のようにいきますか？
- ベストアンサー
- CSS
- ページのトップへの画像
ページのトップへの画像をcssにしようと思っています。 現在 ＝＝＝ html ＝＝＝ <html lang="ja"> <head> <meta charset="utf-8"> <style type="text/css"> <!-- div.box { width: 90%; height: 20px; color: #ffffff; background-color: #000000; padding: 3px 10px 3px 10px; } .gotop { float: right; padding-top: 3px; } --> </style> <title>Title Box</title> </head> <body> <div class="box"><a href="#top" class="gotop"><img alt="gotop" src="gotop.png"></a>Title Box</div> </body> </html> のようになっているソースを画像を指定してのcssに変えたいと思っていますがうまくできません。 上手にする方法を教えてください。
- 締切済み
- CSS
- wordpress キャプションが<p>として吐き出される
Limit Posts jaというプラグインを入れ、topページに記事(200文字まで)一覧を表示しています。 (PHPソース) <div class="box clearfix"> <?php echo tb_post_thumb(true);?> <div class="cts-list"><?php the_content_limit(200, "続きを見る"); ?></div> </div> これで投稿記事の画像と文章（200文字まで）を取得しているのですが、 画像のキャプションが文章として吐き出されているのです。 投稿記事のページでは、ちゃんとキャプションとして扱われているのですが。。 （HTMLソース） <div class="box clearfix"> <img src="http://www." width="90" height="90" alt="" /> <div class="cts-list"> <p>キャプションここに文章が入ります...<a href='http://www.//省略/?p=87'>続きを見る</a></p> </div> </div> キャプションが平然とした顔で<p>タグに囲まれてます......泣 なんとか一覧ページでキャプションが文章としてではなく、キャプションとして認識させれないでしょうか？ なんでもいいです。 文章とは別物として扱えるようになれば。。 記事のページのHTMLソースも載せておきます。 <div class="box clearfix"> <div id="attachment_88" class="wp-caption aligncenter" style="width: 345px"> <img class="size-medium wp-image-88" title="ピクチャ 3" src="http://www" alt="ピクチャ 3" width="335" height="212" /> <p class="wp-caption-text">キャプション</p></div> <p style="text-align: center;"><p>ここに文章が入ります</p> </div> 宜しくお願いしますっ！！！！困ってます！！！すみません！！
- 締切済み
- PHP
- wordpressのタグについて
ワードプレスの教科書の本に沿って勉強しているのですが、さっそく躓いてしまいました。。 よろしくお願いいたします。 テーマ作成で、プライムストラテジーのサイトからpacificという練習用テーマをダウンロードし、 xamppでローカル開発環境を準備した中に入れ、ソースをｗｐテンプレートタグに置き換えを行っているのですが、ｃｓｓファイルの置き換えは問題ないのですが、テーマファイルディレクトリの置き換えがうまくできません。。 たとえば、ｃｓｓは、 <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" /> ↓↓↓ <link rel="stylesheet" type="text/css" media="all" href="http://localhost/wordpress/wp-content/themes/pacific/style.css" /> で、ちゃんと表示されている。 テーマファイルディレクトリは、 href="<?php bloginfo('templete_url'); ?>/images/touch-icon.png" ↓↓↓ href="wp/images/touch-icon.png" ソースの一部↓ ----------------------------------------------------------- <!DOCTYPE HTML> <html dir="ltr" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>title</title> <link rel="apple-touch-icon" href="wp/images/touch-icon.png" /> <link rel="shortcut icon" href="wp/images/favicon.ico" /> <link rel="stylesheet" type="text/css" media="all" href="http://localhost/wordpress/wp-content/themes/pacific/style.css" /> ・・・ ----------------------------------------------------------- <?php bloginfo('templete_url'); ?>の部分は、wp とだけ表示されてしまうのですが、 http://localhost/wordpress/wp-content/themes/pacific と表示させたいのですが、 この部分はどこを参照しているのでしょうか。 （どこを修正したら、ちゃんと出るようになりますでしょうか。） 不足している情報があれば追加しますので、わかる方がいらっしゃいましたらご教示いただけますと幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
- WordPressのテーマAttitudeの編集
WordPressのテーマのAttitudeというのを使って ブログページのデザインをカスタマイズしています。 ◆紹介されているページ http://wp-themetank.com/wordpress-theme-free-multi-purpose-attitude/ デフォルトの状態だと、ブログの一覧ではアイキャッチ画像が表示されますが 個別記事のページではそのアイキャッチ画像が表示されない仕様になっています。 ◆サンプルのページ（PHPはカスタマイズされてないと思います） https://www.themehorse.com/preview/attitude/blog/blog-image-large/ テンプレートのPHPを編集しようと思っておりますが、 どこに表示させる関数を入れればよいか分からず、ご教授いただけますでしょうか。
- ベストアンサー
- PHP
- WordPressでトップページに最新記事5件
トップページは固定ページを使用します。 トップページにアイキャッチ付き最新記事5件リストを表示したいのです。 検索しましたところ、似たようなものを見つけました。 この解説はアイキャッチがついていません。 アイキャッチがつくようにするにはどうすれば良いのでしょうか？ 宜しくお願いします。 http://39kn.com/2010/05/27/4121/ <ul> <?php query_posts('posts_per_page=5'); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li> <span class="date"> <?php the_time('Y年n月j日'); ?> <?php $days=30; $today=date('U'); $entry=get_the_time('U'); $diff1=date('U',($today - $entry))/86400; if ($days > $diff1) { echo '<img src="images/new.gif" alt="New" />'; } ?> </span> <a href="<?php the_permalink(); ?>"><?php the_title();?></a> </li> <?php endwhile; endif; ?> <?php wp_reset_query(); ?> </ul>
- ベストアンサー
- PHP
お礼
詳しい解説ありがとうございました！一度チャレンジしてみます！