フォーラムへの返信
-
投稿
-
固定ページのアイキャッチ表示はできそうです。
よかったです！
スマホのサブメニュー表示は、メインメニューアコーディオン表示からの、サブメニューの良い表示方法が思いつかなかったので「これは仕様ということにしよう！」と非表示になっている次第です；
いろいろな人に使っていただけているのが、ほんと嬉しいです。
簡単にやり方を説明します。
- まずは、プラグインで「Font Awesome 4 Menus」をインストールします。
- 「外観→メニュー→表示ボタン」をクリック
- 「CSSクラス」にチェックを入れる
- メニューの「CSSクラス（オプション）」部分にFont Awesomeのクラスを入力する。
- メニューを保存して終了
こんな感じで表示されます。
あとプラグインの設定は、SimplicityでFont Awesomeのスタイルシートを呼び出しているので「Load Font Awesome 4 From:」は、「Don’t load Font Awesome 4’s stylesheet (use this if you load Font Awesome 4 elsewhere on your site)」を選択してください。
これまで固定ページにもアイキャッチ画像を文頭に表示させていたのですが、
今回、なぜか表示ができなくなりました。個人のカスタマイズについては、どのようにカスタマイズしたかわからないので原因はわからないです。
固定ページに関しては設定項目もないです。page.phpをカスタマイズするなら、以下をアイキャッチを表示したい部分に挿入すれば多分OKかと思います。
<?php if ( has_post_thumbnail() && is_eye_catch_visible() ): // サムネイルを持っているときの処理 ?> <div class="eye-catch"><?php the_post_thumbnail('large'); ?></div> <?php endif; ?>あと、スマホ表示にすると、固定ページの親ページしかメニュー項目に出てこないのですが、子ページを表示させるにはどうしたら良いでしょうか。
これはそういう仕様です。
子ページメニューを表示させるには、自身でスタイルシートを編集してもらうしかないです。ヘッダー画像(透過PNG)を設定すると、サイトタイトルとかぶってしまう
画像は背景になるのでそういう仕様です。
ヘッダー画像がスマホ版で表示されません。
これは、わざとそのようにしてあります。PC版とモバイル版では領域が違うので。あえて表示させるには、スタイルシートでカスタマイズしてください。
広告をサイドバートップに表示する設定にしていると、固定ページをスマホで見た時に固定ページと広告の間に大きな隙間ができてしまいます。
これもわざとそのようにしてあります。
これはGoogleのAdSenseポリシーに違反しないためです。
Googleの中の人は、このように言っています。「すべての携帯電話」 1 ページにつき 1 つまでになります。 「iPhone やその他の高機能デバイスのみ」 1 ページにつき 3 つまでになります。ただし高機能デバイスで画面を閲覧した際、画面に同広告が 2 つ以上表示されることのない配置にしていただきますようお願いいたします。
高機能デバイスで閲覧した際、画面に Google 広告が同時に 2 つ表示されているとコンテンツが押しやられ、コンテンツと Google 広告の区別がしにくくなり、ポリシー違反となります。
ユーザーの利便性を意識した広告配置をお願いしております。
モバイル向けの表示可能な広告の数について – Google プロダクト フォーラムテーマが原因でアドセンス停止になってはいけないので余裕を持ってそのようにしてあります。気になる場合は、個人の責任になりますがスタイルシートでカスタマイズしてください。
google webフォントを使用したい場合、”Add this code on your website”から取得してきた用コードはどのファイルに追記すればよろしいでしょうか？
header.phpの
<head></head>の間です。また、使用するコードは”Standard”でよろしいでしょうか？
はい、スタンダードで良いです。
こういうやつ。
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>確かにレスポンシブではmobile.cssは読み込まれません。
完全レスポンシブデザインを適用しながら、スマホ版の表示のみ変えたい(例えばアイキャッチの形)場合、header.phpをどのようにカスタマイズすればよろしいでしょうか？
子テーマあたりにmobile-res.cssと作って
タグの間に以下のように書くといいかもしれません。<?php if (wp_is_mobile()): //モバイル?> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/mobile-res.css"> <?php endif; ?>基本的にそういうのは、style.cssだけに書き込めばOKかと思います。
僕が以下のスタイルを書き込んでみたところモバイルページでも表示されました。/* 緑(ライトグリーン系)のマーカー */ .marker_green { background: linear-gradient(transparent 60%, #66FFCC 60%); }
.marker_green {
background: linear-gradient(transparent 60%, #66FFCC 60%);これは、CSSセレクタのカッコが閉じられてないですけど、テスト環境では閉じられているんですよね？
レスポンシブルデザインをなしにすることはできますか？
mobile.cssの中身を削除して、style.cssのレスポンシブ設定部分を削除すればできます。
トップページなどのサムネイルをなしにしたいのですが可能でしょうか？
「外観→カスタマイズ→レイアウトの設定」にある設定からできませんか？
確認したところ、子テーマ化している「mobile.css」自体が機能していませんでした。
結果的には「responsive.css」を変更することにより、見出しを変更することができました。テーマカスタマイザーから、完全レスポンシブデザインにするとこういった仕様になります。
今までは「mobile.css」でスマホ等のデザイン変更を行えると認識しておりましたが、この認識は誤りでしょうか。
完全レスポンシブデザインを使用しなければ、その認識でOKです。
「responsive.css」ではパソコンでのデザインも変更されるんですね…。
「mobile.css」が適用されない可能性についてご教授頂けましたら幸いです。完全レスポンシブスタイルを適用しているので、完全モバイル用デザインのmobile.cssは適用されません。
どうしても、レスポンシブスタイルでモバイル用のスタイルシートを読み込みたいのであれば、header.phpをカスタマイズして、独自に作成したCSSを読み込むようにする必要があります。なお「responsive.css」は子テーマ化できません（反映されません）でした。
これは確かに子テーマに反映させるのを忘れていました。
「responsive.css」を子テーマ化するには、同ファイルを子テーマにも作成して以下のように書きます。@charset "UTF-8"; @import url("../simplicity/responsive.css");はじめまして。
その最後の関連記事の下の1つを記事本文終わりの1つのすぐ下に表示させることはできますか？
広告が2つ続くようなイメージです。できることはできるのですが、アドセンスのポリシー違反になる恐れがあります。
AdSense プログラム ポリシー
ここなどでは分りやすく以下のように書かれています。モバイルバナーやレクタングル縦並べは、ご禁制です。
Google アドセンス スマートフォンの広告配置は、ポリシー違反にご注意。 | サイゴンのうさぎGoogleの中の人も以下のように言っています。
「すべての携帯電話」 1 ページにつき 1 つまでになります。 「iPhone やその他の高機能デバイスのみ」 1 ページにつき 3 つまでになります。ただし高機能デバイスで画面を閲覧した際、画面に同広告が 2 つ以上表示されることのない配置にしていただきますようお願いいたします。
モバイル向けの表示可能な広告の数について – Google プロダクト フォーラムですのでアドセンスポリシー違反で「警告」もしくは最悪「アカウント停止」になる恐れがあり、あまりお勧めできません。それでも良いですか？
それらは、404.phpからだと普通の方法ではできません。
404のタイトルを変更したい場合は、header.phpの以下の部分を変更する必要があります。elseif(is_404()): echo'404 - '; bloginfo('name');リダイレクトをするには、header.phpの
内に、以下のようなPHP分岐を作って、リダイレクトタグを貼り付けてください。<?php if ( is_404() ):?> <!-- リダイレクトタグを記入 --> <?php endif; ?>タグマネージャーは、Googleのやつですか？
とりあえずそういったタグはanalytics.phpでOKとは思います。
僕は導入していないので、今のところ導入事例はありません。1つ原因として考えられるのは、プラグインなどです。
ソースコードを改変（HTMLやJavaScript）するプラグインや、キャッシュプラグインなど入っていないでしょうか？それは、Googleの前回のクロール状態が残っているだけなので
その他に問題がない場合は、次のクロールで直ると思います。
ですので、次にクロールされるまで待つしかないと思います。詳しくは、以下などに書いてあります。
robots.txtによりURLが制限されています(ウェブマスターツール)
WordPressでサイトを公開したら、ウェブマスターツールで「重要なページが robots.txt によってブロックされています。」と言われたリストページ、サムネイル横にあるのタイトルは以下のように変更します。
.entry h2 a { font-size: 24px; }投稿本文のH2見出しは以下のように変更します。
.article h2 { font-size: 26px; }数字は好みに変更してください。
すみません、自己解決しました。
解決したようでよかったです。
ただ、せっかく書いたのでポストさせてください^^;サイトを拝見した感じでは、「完全レスポンシブデザイン」になっているからだと思います。
完全レスポンシブでダブルレクタングル（記事下広告×2）にしてブラウザの幅を狭めてしまうと、レクタングル広告が、上下に連続してしまいアドセンス規約違反の恐れがあるからです。
ダブルレクタングルにするには、「完全レスポンシブデザイン」をやめるか自前でカスタマイズしてもらうしかないと思います。詳しくは以下に書いてあります。
Simplicityが「ファイルを生成するキャッシュプラグイン」と相性が悪い理由モバイル表示の記述をするならmobile.cssです。
Chrome、Firefoxで確認してみましたが問題なく表示されています。
デフォルトで搭載されているChromeの開発ツールなどで、問題の要素部分がどうなっているか確認してみてください。画像も準備してメディアのライブラリに保存しているのですが、わいひらさんの仰るimagesフォルダとは、ここのことではないのでしょうか？
見つけられて良かったです。
「ここ」というのがちょっとわからないですけど、子テーマフォルダ内のimagesフォルダのことです。
Simplicity（親テーマ）フォルダのimagesフォルダでも良いのですが、子テーマを適用しての利用を推奨します。子テーマはこちら。
Simplicityの子テーマ
画像は自前で用意して、アップロードしてもらうしかないです。
テストだけなら適当に以下のサンプル画像を使ってもいいと思います。
http://i0.wp.com/wp-simplicity.com/wp-content/uploads/2014/07/logo.pngバージョンアップでheader-loge.phpを変更したのに情報が古いままでしたね。
記事を書きなおしたので、よろしかったら試してみてください。
ヘッダーのタイトルをロゴ画像に変更するカスタマイズ方法1070×100にしても同じことだと思います。
ブラウザの幅を狭めれば、画像の一部は切れると思います。どうしても画像すべて表示させたいのであれば、
- レスポンシブをやめる
- jQueryなどを使って動的に画像サイズを変更する
しかないかもしれません。
ありがとうございます！
single.phpの以下の部分を
<div id="related-entries"> <h3>関連記事</h3> <?php if (is_related_entry_type_default()) { get_template_part('related-entries'); } else{ get_template_part('related-entries-thumbnail'); } ?> </div><!-- #related-entries -->次の下に持ってくればOKかと思います。
<?php comments_template(); // コメント欄の表示 ?>そればっかりは、CSSではどうしようもないかもしれません。
横幅自体はこのようにすれば100％表示されますが
今度は高さが足りなくなります。#h-top { background-size: 100% auto; }臼井さんはじめまして。
モバイルサイトのヘッダー画像がサイズからはみ出し表示されます。
（PCヘッダー画像サイズは、1070×300に設定）はみ出すというのは、画像の下部分が隠れてしまうということでよろしいでしょうか？
なお現在は、
カスタマイズ＞レイアウト設定＞完全レスポンシブの チェックを外し、ヘッダー画像が表示されていない状態になっております。下部分が隠れるのなら、おそらく、完全レスポンシブ状態での不具合だと思います。
不具合を修正した20140922aバージョンをアップロードしたので、よろしかった試してみてください。そうです。書いちゃうとこんな感じ。
これの数字を好みに調整します。.article { font-size: 16px; line-height: 170%; } .article p { margin: 5px 0; }スマホ版の固定ページには、記事下にアイコン型のSNSボタンが表示されていると思います。
タイトル下にも表示させるということですか？あと、フォーラムをみてカスタマイズされる方もおられるので、前回の質問などの答えでカスタマイズが、うまくいったか、うまくいかなかったかだけでも書いていただけると、助かります。
一旦子テーマのanalytics.phpをどこかにバックアップして置いて、子テーマ側のanalytics.phpを削除するとどうなりますでしょうか？
あと、原因として考えられるのは、他のGoogle Analytics用のプラグインなどは入っていないでしょうか？新着順に表示するには、「’orderby’ => ‘rand’,」部分をコメントアウトすればOKです。
//カテゴリ情報から関連記事を新着順に呼び出す $categories = get_the_category($post->ID); $category_IDs = array(); foreach($categories as $category): array_push( $category_IDs, $category -> cat_ID); endforeach ; $args = array( 'post__not_in' => array($post -> ID), 'posts_per_page'=> intval(get_related_entry_count()), 'category__in' => $category_IDs, //'orderby' => 'rand', );「関連記事」についてなのですが、本文と同じ「カテゴリ」の記事を”ランダム”表示させるだけではなく、本文と同じ「タグ」の記事を”ランダム”、または新着エントリー順”に表示（本文記事は除外）する、方法も選択可能になりませんでしょうか。
カスタマイズ方法のフォーラムに書き込まれておられるので、カスタマイズ方法を紹介します。
ちょっとこれから用事があるので、とりあえずはタグで関連記事を表示する方法のみです。
タグで関連記事を取得するには、popular-entries.php（必要ならrelated-entries-thumbnail.phpも）の以下の部分を//カテゴリ情報から関連記事を呼び出す $categories = get_the_category($post->ID); $category_IDs = array(); foreach($categories as $category): array_push( $category_IDs, $category -> cat_ID); endforeach ; $args = array( 'post__not_in' => array($post -> ID), 'posts_per_page'=> intval(get_related_entry_count()), 'category__in' => $category_IDs, 'orderby' => 'rand', );次のように変更する必要があります。
//タグ情報から関連記事を呼び出す $tags = wp_get_post_tags($post->ID); $tag_IDs = array(); foreach($tags as $tag): array_push( $tag_IDs, $tag -> term_id); endforeach ; $args = array( 'post__not_in' => array($post -> ID), 'posts_per_page'=> intval(get_related_entry_count()), 'tag__in' => $tag_IDs, 'orderby' => 'rand', );新着順で呼び出す方法は後で書きます。
これはほんの一例ですが、以下のようにマージンの設定もする必要があります。
.entry h2 { line-height: 100%; margin-bottom: 0; } .entry .post-meta { margin-top: 0; }メールにも書きましたが、一応ここにも記入。
こんな感じのスタイル変更でいかがでしょうか？
ただこれだと、投稿ページ以外の固定ページもタイトルの大きさが変わってしまいます。.article h1{ font-size: 20px; }記事のタイトルだけを変更するには、以下のようにします。
.type-post .article h1{ font-size: 20px; }フォントサイズと縦の行間は、以下の数字を好みのものに変更してみてください。
.article { font-size: 16px; line-height: 170%; }あとできれば、子テーマを適用して、子テーマのstyle.cssに上記のスタイルを追記する形でサイズ変更をすれば、のちのちのメンテナンスが楽になると思います。
子テーマをインストールする方法話題がタイトルのフォントサイズのことになっているので
よろしければ新しくトピックを立てていただけると幸いです。画像回り込みのテキストで上部に表示する方法も教えてください。
あともう少し具体的に書いていただけると助かります。
それだったらこんな感じでいけるのではないかと思います。
（※動作確認はしていません。）.entry .entry-thumb, .related-entry-thumb { float: left !important; margin: 10px !important; } .entry .post-meta, .entry .entry-snippet, .entry .entry-read{ display:none !important; }!importantの場所がおかしいです。
修正してもう一度試してみてください。後半ですが、PCとスマホでデザインを変更したいときの方法です。これまでwptouchを使っていたので、レスポンシブのカスタマイズがよくわかりません。スマホデザインだけをカスタムする場合はどうしたらいいですか？
スマホだけのデザインを変更したいときは、mobile.cssに記入すればOKです。
サイズによって変更するには以下のように書く必要があります。
/************************************ ** 解像度639px以下のスタイル ************************************/ @media screen and (max-width:639px){ ... }カスタマイズ方法の記事を書きました。
>りんごさん
サムネイルのサイズを変更するには以下のようにします。.entry-thumb img{ width: 200px; height: 200px; }抜粋表示は以下のようにすればいいかと思います。
.entry .entry-snippet{ display: block; }変更がうまくいかない場合は、CSSセレクタを足すか!importantを足してください。
あと、モバイルだけのデザインを変えるのがうまくいきません。style.cssから何をコピーして使ったらいいのでしょうか。
この質問だけでは、変更対象がわからないので、何をしたいかがわからないです。
モバイルだけの何のデザインを変更したいのでしょうか？ウィジェット部分（人気記事など）をモバイルでみた場合に表示される形式（画像＋タイトルなど）ですっきり表示するにはどうすればよいでしょうか？
すっきり表示するという説明だけでは、ざっくりとしすぎていてどのように表示していいのかわからないです。
もう少し具体的にお願いします。
