tg29359
フォーラムへの返信
-
フォーラム: 使い方全般
返信が含まれるトピック: Twenty Sixteenのタイトルフォントカラーを変更したいえー、多分効かないと思いますが、ダメ元でもう一発だけ。
以下は、サイトタイトル、キャッチフレーズ、投稿タイトル、の三要素全てを、明るめの青(というか、水色)に、常に(訪問済みリンクであろうが、未訪問リンクであろうが、マウスがその辺りをよぎろうが、常に)するように意図した設定値で、私の実験サイトでは意図した色になってますが。。。
.entry-title { font-size: 20px; font-size: 1.25rem; color: #1e73be !important; } .entry-title a { color: #1e73be !important; } .site-title, .site-title a { color: #1e73be !important; } .site-description { color: #1e73be !important; }
フォーラム: 使い方全般
返信が含まれるトピック: Twenty Sixteenのタイトルフォントカラーを変更したい???。これは難しいですねぇ。私には対処方法がまったくわかりません。ダメです。ギブアップします。なんでおんなじテーマ使ってこんなに状況変わるんだろう?。お力になれずすみませんでした。
フォーラム: 使い方全般
返信が含まれるトピック: Twenty Sixteenのタイトルフォントカラーを変更したい完全に望むとおりの効き方はしていないということですね。う~ん、直接的に「では、こう書き直したら」というアイデアは無いのですが、問題点の調べ方のヒントを以下に書きます。
- PC上にGoogle Chromeを用意します(私のPCの場合だとWindows10にGoogle Chromeのバージョン 47.0.2526.106 mがインストールしてあります)。
- 望み通りの効き方をしていない画面をGoogle Chromeで開きます。この場合で言えば、例えば、管理者カスタマイズ画面のプレビュー画面を開きます。かなり大きめの画面で開くと作業しやすいです。
- 望み通りの色に変わっていない部分にマウスカーソルをあてて右クリックします。この場合で言えば、例えば、「キャッチフレーズ」にマウスカーソルをあてて右クリックします。
- メニューがポップアップするので「検証」を選択します。
- HTMLソース風の画面が開きますので、その画面上で、マウスカーソルをあてたあたりの要素部分の背景色が選択状態を示す感じの色合いになっているのを確認の上、その右隣にある、「Style」「Computed」といったタブが並んでいる領域の、「Computed」タブをアクティブにします。
- Filterと書いてある行の右端の「Show all」チェックボックスがオフ状態になっていたらオンにします。
- Filterの下の方にあるColorの行を探します。Color行の右側に、最終的に採用されたRGB値が示されています。例えば、青ならばRGB(0,0,255)と表示されています。
- Colorの左横にある三角形をクリックして、Colorについての詳細な表示内容を展開します。
- 展開すると、どのCSSファイルのどの部分の指定内容をColor設定の候補として検出したか、そして、最終的にどれが採用されたのかが、何となくわかる表示になっている(棄却された設定に取り消し線が引かれている)時があります。それを見て、自分の用意した設定が他の部分の設定によって取り消されていないかどうか調べます。
- 取り消されていたら、取り消されないような書き方を考えてみます。
経験から想像するには、
- !important付きの指定は他の指定より強くて、他を取り消すことが多い
- !important指定が無いもの同士だと、細かい指定の方が大ざっぱな指定より強いことが多い。例えば、単に.site-descriptionと書いたのとh2.site-descriptionと書いたのとでは、h2.site-descriptionの方が細かい指定として扱われ、採用されやすい。
- 細かさの点で同じレベルのもの同士だと、後に書いてあるものの方が先に書いてあるものより最終的に効くことが多い気がする。
といった傾向が見られるので、自分の書いた設定が最終的に採用されるように、上記の点を考慮して書き方を変えると、効果が出るかもしれません。
フォーラム: 使い方全般
返信が含まれるトピック: Twenty Sixteenのタイトルフォントカラーを変更したい以下の様な修正ではどうでしょうか。私の実験サイトをPCのGoogle Chromeで見てる限りではそこそこいけてそうです。「サイトタイトル」を緑に、「キャッチフレーズ」を青に、「投稿タイトル」を赤にする場合の設定例です。
.entry-title { font-size: 20px; font-size: 1.25rem; color: red; } .entry-title a { color: red; } .site-title, .site-title a { color: green !important; } .site-description { color: blue; }
ただ、このやりかただと「サイトタイトル」はマウスオーバーした時とか、訪問済みリンク・未訪問リンクの状態が変わった際にも常に緑になってしまってるように見えますが。
以下が私の実験サイトです。
http://meta-scheme.sakura.ne.jp/jikken/フォーラム: 使い方全般
返信が含まれるトピック: 自作ウィジェットのタイトル表示の仕方タイトルをechoしてないからではないでしょうか。後述の様に書くと、私のサイトではとりあえず設定したタイトルを表示することはできました。
ポイントは以下の部分だと思います。
$title = apply_filters( 'widget_title', $instance['title'] ); if ($title) { echo $args['before_title'] . $title . $args['after_title']; }
<?php class MyWidgetRecentPost extends WP_Widget { function MyWidgetRecentPost() { parent::WP_Widget(false, $name = '自作RecentPost'); } function widget($args, $instance) { $num = 10; extract( $args ); $title = apply_filters( 'widget_title', $instance['title'] ); if ($title) { echo $args['before_title'] . $title . $args['after_title']; } $body = apply_filters( 'widget_body', $instance['body'] ); /* 個別記事の時は、カテゴリ別の最新記事を表示する */ if (is_single()){ $cat = get_the_category(); $cat = $cat[0]; query_posts($query_string . '&category_name='.$cat->slug.'&posts_per_page='.$num.'&offset=0'); echo '<h3 class="widget-title">「'.$cat->name.'」の最新記事</h3>'; /* カテゴリ別アーカイブの時は、カテゴリ別の最新記事を表示する */ }else if(is_category()){ $cat = get_query_var('cat'); $cat = get_category($cat); query_posts($query_string . '&category_name='.$cat->slug.'&posts_per_page='.$num.'&offset=0'); echo '<h3 class="widget-title">「'.$cat->name.'」の最新記事</h3>'; /* それ以外の時は、全カテゴリの最新記事を表示する */ }else{ query_posts('posts_per_page='.$num.'&offset=0'); echo '<h3 class="widget-title">最新記事</h3>'; } if(have_posts()):while(have_posts()):the_post();?> <div style="float:left;width:135px;margin:0 10px 5px 0;text-align:center;"><?php the_post_thumbnail(array(135,135)); ?></div> <div style="float:left;width:135px;margin-bottom:5px;"><?php the_title(); ?></div><div style="clear:both;"></div> <?php endwhile; endif; wp_reset_query(); } function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); $instance['body'] = trim($new_instance['body']); return $instance; } function form($instance) { $title = esc_attr($instance['title']); $body = esc_attr($instance['body']); ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"> <?php _e('サイトに表示されるコンテンツ:'); ?> </label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /> </p> <p> <label for="<?php echo $this->get_field_id('body'); ?>"> <?php _e('サイトに表示されるコンテンツ:'); ?> </label> <textarea class="widefat" rows="16" colls="20" id="<?php echo $this->get_field_id('body'); ?>" name="<?php echo $this->get_field_name('body'); ?>"> <?php echo $body; ?> </textarea> </p> <?php } } add_action('widgets_init', create_function('', 'return register_widget("MyWidgetRecentPost");')); ?>
私のサイトのアドレスは下記です。
http://meta-scheme.sakura.ne.jp/jikken/使っているテーマはTwenty Sixteen, WordPressのバージョンは4.4です。
フォーラム: テーマ
返信が含まれるトピック: 縦書き用のテーマを探しています情報ありがとうございます。
表示デモを見たら、長文を縦方向に多段組で表示している例があって、その部分は自サイトでまだ実現できてないので、参考にさせていただくかもしれません。
フォーラム: テーマ
返信が含まれるトピック: 縦書き用のテーマを探していますありがとうございました。ばっちりです。以下の環境で縦書きできてます。
- Windows
- Edge
- Google Chrome
- Firefox
- Safari
- Opera
- iOS(iPad Air)
- Google Chrome
- Safari
- Android携帯電話(Digno)
- Google Chrome
Firefoxがいつのまにか縦書き対応してて驚きました。writing-mode(ちゅうかCSS3?)正式規格化した、ってことなんでしょうか。
となると、後は論理マージンの正式対応が待たれるばかりですね(もう対応してたりして?。あとでググってみよう。。。)
フォーラム: テーマ
返信が含まれるトピック: 縦書き用のテーマを探していますご呈示いただいた内容をraindrops.jsの末尾に追加して、 .category-6332 を .category-tategak に、$を、jQueryに変更してみましたが、挙動は変わらなかったです。サンプルのページはオーバーフローせずちゃんと見れているので、何か書き間違えてる気がします。いま調査中です。
ぶっちゃけ、raidrops.js、下記になってますが、もしかして、私、修正方法の意味を取り違えてます?。
http://meta-scheme.jp/s1/wp-content/themes/raindrops/raindrops.js
フォーラム: テーマ
返信が含まれるトピック: 縦書き用のテーマを探していますますは、以下のページがサファリでオーバーフローしないことを確認しました。
http://tenman.info/labo/css/?p=1797
1920×1080pxのフルスクリーンと、最大限横幅狭めた画面で確認しましたが、いずれもスクロールバーは画面横幅の範囲内。Windows10 home x64 ベース システム用 Windows 10 バージョン 1511。Safariは5.17(7534.57.2)。
今夜は年末進行でアルコールと焼き肉で脳みそと胃袋がトリップ状態なので、明日、素面の時に、期待を込めて自サイトに取り込みたいと思います。
フォーラム: テーマ
返信が含まれるトピック: 縦書き用のテーマを探していますとりあえず、ざっと以下の感じで取り込んでみました。safariの縦書きは諦めました(笑)。.yokoクラスのお陰でオーディオプレーヤーの埋め込みがなんとかなりました。
body:not(.safari) .category-tategaki .entry-title, body:not(.safari) .category-tategaki .entry-content .tate{ font-family: "@Meiryo", "@游明朝", "@YuMincho", "@ヒラギノ明朝 Pro W3", "@Hiragino Mincho Pro", "Meiryo", "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; float:right; writing-mode: tb-rl; -ms-writing-mode: tb-rl; -moz-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -webkit-transform-origin: left top; -o-writing-mode: vertical-rl; -o-transform-origin: left top; direction:ltr; } body:not(.safari) .category-tategaki .entry-content .tate:after{ content:' '; display:table; } body:not(.safari) .category-tategaki .tate p{ margin-right:2em; font-size:118%; letter-spacing: .3em; } /* お勧め テーマのレイアウトを崩さないための処理 */ body:not(.safari) .category-tategaki .entry-content{ margin-right:6em; } body:not(.safari) .category-tategaki .entry-content .tate{ overflow-x: auto; overflow-y: hidden; width:100%; min-height: 20em; max-height: 80vh; } body:not(.safari) .category-tategaki .entry-content .tate img.alignmiddle{ display: block; margin-top: auto; margin-bottom: auto; padding: 0.76923076923em; } body:not(.safari) .category-tategaki .entry-content .tate img.alignbottom{ float: right; padding: 0.38461538461em 0 0.76923076923em; height:auto; } body:not(.safari) .category-tategaki .entry-content .tate img.alignbottom{ float: right; padding: 0.38461538461em 0 0; height:auto; } body:not(.safari) .category-tategaki .entry-content .tate img.aligntop{ float: left; padding:0 0 0.76923076923em ; height:auto; } body:not(.safari) .category-tategaki .entry-content .tate .oembed-container{ width:100%; max-width:100%; margin:auto auto auto 2em; } body:not(.safari) .category-tategaki .entry-content .tate .oembed-tategaki-limmit-width { width:500px; margin-left:2em; } body:not(.safari) .category-tategaki .entry-content .tate .rd-table-wrapper{ overflow:visible; margin-left:2em; } body:not(.safari) .category-tategaki .entry-content .tate .yoko, body:not(.safari) .category-tategaki .entry-content .tate table{ float:none; writing-mode: horizontal-tb; -ms-writing-mode: tb-rl; -moz-writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -webkit-transform-origin: 50% 50% 0; -o-writing-mode: horizontal-tb; -o-transform-origin: 50% 50% 0; direction:ltr; } body:not(.safari) #writing-mode-vertical, body:not(.safari) #writing-mode-horizontal{ padding:1em; border:1px solid #ccc; background:#1abc9c; display:inline-block; color:#fff; } body:not(.safari) .category-tategaki .entry-content .tate a{ border-left:2px dotted blue; } body:not(.safari) .category-tategaki .entry-content .yoko a{ border-bottom:2px dotted blue; } body:not(.safari) .category-tategaki .entry-content .tate mark:hover{ cursor:pointer; }
追記
おっと、Safariだけ諦めたつもりが、iOSのChromeも道連れになってしまいました。難しい〜。フォーラム: テーマ
返信が含まれるトピック: 縦書き用のテーマを探していますいろいろと実験してくださったようでありがとうございます。ぱっと見、アップデート部分の取り込み方はすぐにはわからなかったのですが、使われているCSSを参照しながら順次取り込んでいこうかと思います。取り急ぎ取り込むべきなのは縦書きの中の埋め込みと画像のスタイルかなと思いました。今、私のサイトだと下記みたいになっちゃうんで(笑)。
で、この前、ルビ要素のスタイリングが要るかもという話をしましたが、今回ご呈示いただいたアップデート版の記事をみるかぎり、少なくともChromeだとブラウザのデフォルトで良い感じっぽいですね。
その後、私の方のサイトでは縦書き向けCSSは以下の内容になっています。
.category-tategaki .entry-title, .category-tategaki .entry-content .tate{ font-family: "@Meiryo", "@游明朝", "@YuMincho", "@ヒラギノ明朝 Pro W3", "@Hiragino Mincho Pro", "Meiryo", "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; float:right; writing-mode: tb-rl; -ms-writing-mode: tb-rl; -moz-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -webkit-transform-origin: left top; -o-writing-mode: vertical-rl; -o-transform-origin: left top; direction:ltr; } .category-tategaki .entry-content .tate:after{ content:' '; display:table; } .category-tategaki .tate p{ margin-right:2em; font-size:118%; letter-spacing: .3em; } /* お勧め テーマのレイアウトを崩さないための処理 */ .category-tategaki .entry-content{ margin-right:3em; } .category-tategaki .entry-content .tate{ overflow-x: auto; overflow-y: hidden; width:100%; min-height: 20em; max-height: 40em; }
俳句や短歌の短文の場合、スクロールバーが要らないことが多いのでoverflow-xをautoにしたのと、あと、iOSのChromeで見てたら、長文の縦がものすごく長くなったんでmax-heightを40emに限定して、逆に一行一行が短い文章ばかりだと縦がやや短すぎたんでmin-heightの指定もいれました。
そういえば、Windows版のSafariで見た時の、縦書きdivのwidth:100%の解釈が強烈で、「え、そんな解釈ありなん?」って絶句してしまいました(笑)。以下をWindowsのSafariで見ると大変なことにw。
あとは、最終的には、長文の時に、横スクロールじゃなくて、縦方向に段組して表示させたいところですが、これは、この間ご紹介した「長雨」っていうTumblrテーマで既に実現されているみたいなので、のちのちパクろうかと思ってます。(でもJavaScriptで処理してたらつらいなぁ。私、JavaScriptまったくわからないので)。
といった途中経過となっております。いろいろとありがとうございます。
フォーラム: 使い方全般
返信が含まれるトピック: webフォントが表示されなくなってしまったため回復させたい前の書き込みの別な書き方を付記します。
@import "http://fonts.googleapis.com/earlyaccess/notosansjp.css"; #page *, #sidebar * { font-family: メイリオ, Meiryo, 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'Noto Sans JP', 'Times New Roman', serif !important; font-weight: normal; }
もしかしたら、多少、重くなるかもしれませんが、こっちの方が素直な書き方で良いかもしれません。文字は、前のと比べると、もしかしたら若干細くなるかもです。前のはミディアムだけ狙い撃ちで使っていたので。
ちなみに、久しぶりにGoogle Fonts Early Accessを覗いたら、Noto Sans JPとNoto Sans Japaneseがあって、「どこがどう違うんだ?」と迷いましたが、文字数が多めに書いてあったNoto Sans JPの方を選びました。
フォーラム: 使い方全般
返信が含まれるトピック: Twenty Sixteenのフォントサイズを変更したい蛇足ながら付記しますと、14.4の変更が有効になるのはブラウザのウィンドウ幅が985px以上の場合だけかと想像されますので、パソコンなど大画面の端末上で以下の手順を行って、念のため、もっとウィンドウ幅が狭い場合にも問題がないかどうかチェックしてみると、より確実かと思います。
- ブラウザのウィンドウ幅を狭めてみる( 710px以下、783px以下、910px以下、それぞれを試す。または、スマホ、iPad Air並の大きさのタブレット、パソコン、それぞれで表示して見るのも可)
- ブラウザのリロードボタンを押してみる
- 表示結果にて、投稿タイトルのフォントサイズと本文のそれとの比が、自分の望んでいるような比になっているかどうかチェックする
- 望んでいる比になっていなかったら、関連する14.Xのfont-sizeを書き換える
フォーラム: 使い方全般
返信が含まれるトピック: Twenty Sixteenのフォントサイズを変更したいブラウザの画面を985px以上の大画面にしてページを見ている時に効く箇所は、3386行目と3387行目の以下の部分です。
font-size: 40px; font-size: 2.5rem;
これを小さくするには、例えば以下のように修正します。
font-size: 20px; font-size: 1.25rem;
見ている時のブラウザのサイズ別に複数の定義があります(印刷用の定義もあります。また、特定の投稿タイプにのみ効く定義もあります)。style.cssの中で、.entry-titleに対してfont-sizeを設定しているところを全て調べて、各部分で採用させたいフォントサイズに書き換えてください。
もし、私が前の書き込みで例示したみたいに、単純に「全ての画面サイズ、全ての媒体、全ての投稿タイプで同じフォントサイズで良い」ということであれば、style.cssの末尾に以下の様な感じの記述を付け加えると良いと思います。
.entry-title { font-size: 20px; font-size: 1.25rem; }
画面サイズ別・媒体別の設定内容は、style.cssの先頭の方の目次部分を見るとわかりますが、以下の様な種類があるようです。
* 14.0 - Media Queries * 14.1 - >= 710px * 14.2 - >= 783px * 14.3 - >= 910px * 14.4 - >= 985px * 14.5 - >= 1200px * 15.0 - Print
ちなみに、私が前の書き込みで例示した方法は、テーマのCSSファイル自体は書き換えずに、JetPack等のプラグインを使うことによって指定できるカスタムCSSを記述することで変更する方法です。
その方法を採ろうかと思った理由は、style.cssに直接書くと、テーマがバージョンアップされた時に、もう一回編集をし直さないといけなくなるかな?と思ったからです(実際にテーマを編集し直さなければいけなくなった経験があるわけではないのですが、なんとなく想像で)。なお、子テーマを作って子テーマ側のファイルを修正している場合にはその心配は多分ないと思います。これも想像ですが。
フォーラム: テーマ
返信が含まれるトピック: 縦書き用のテーマを探していますありがとうございます。さっそく上記の設定に切り替えて見ました。良い感じです。縦書き用のMS P明朝が、やや読みづらかったので、先頭に@Meiryoを追加してみました。