tg29359
フォーラムへの返信
-
フォーラム: テーマ
返信が含まれるトピック: 縦書き用のテーマを探していますとりあえず自分のサブサイト
にraindropsをインストールして、style.cssの末尾に以下のCSSを書いてみました。
.entry-title, .entry-content { font-family:"@MS P明朝", "@MS PMincho", "@ヒラギノ明朝 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; overflow:hidden; } .entry-content:after{ content:' '; display:table; } p{ margin-right:2em; font-size:118%; letter-spacing: .3em; }
今後、上手いCSSが思いついたらまたここに書きに来ます。
フォーラム: テーマ
返信が含まれるトピック: 縦書き用のテーマを探していますありがとうございます。上記のraindropsというテーマをベースに、CSS等をカスタマイズするといけるかも、ということですね。私の方で、何かうまいCSS設定とか思いついたら続報を書きに来ます。
ざっと見、思ったのは
- ルビ要素のスタイリングが要るかも(Chromeで「吾輩わがはい」の部分を見ててそう思いました
- フォントの設定をさらに縦書き向けに練り込む必要があるかも(ひろく使えるインストール済みフォントで、縦書きが綺麗にでるやつなかなかなくて難しそうですが)
ですが、「では具体的にどうすれば?」の案は私にもないです。
参考情報を以下に書きます。
TumblrテーマでそこそこいけてるものがGitHubにあります。
https://gist.github.com/metasta/5986308
WebKit系向けだけでIEとかむけのスタイリングはしていないみたいですが、それいれたらそこそこ実用でも使えそうな感じでした(フォントは旧字体豊富な独特のウェブフォント使っているみたいですが、そこは多分、一般ユーザーは必要としてないと思います)。
私自身がTumblrテーマで挑んで玉砕したのが以下にあります。
テーマのダウンロード元
https://www.tumblr.com/theme/39763GitHub
https://github.com/meta-scheme/tate-gakiデモサイト
http://tate-gaki.tumblr.com/こちらは、使ってみた皆さんから「くそ」と絶否された大失敗作ですが(笑)。
フォーラム: 使い方全般
返信が含まれるトピック: Twenty Sixteenのフォントサイズを変更したい間違えました。上の書き方だと、投稿を個別表示した時のタイトルが変わりませんね。
訂正版は下記です。
@font-face { font-family: HuiFont; src: url("http://meta-scheme.jp/software/font/HuiFont29.woff") format("woff"); font-weight: normal; font-style: normal; } header.entry-header .entry-title { font-size: 64px; font-family: HuiFont !important; }
フォーラム: 使い方全般
返信が含まれるトピック: Twenty Sixteenのフォントサイズを変更したいダッシュボード->外観->CSS編集、にて以下のCSSを設定すると、
@font-face { font-family: HuiFont; src: url("http://meta-scheme.jp/software/font/HuiFont29.woff") format("woff"); font-weight: normal; font-style: normal; } header.entry-header .entry-title * { font-size: 64px; font-family: HuiFont !important; }
投稿タイトルのフォントが、ウェブフォントの「ふいフォント」に、フォントサイズが64pxになります。
ただし、ダッシュボード->外観->CSS編集、にてCSS設定することが可能になるためには、もしかしたらJetPackというプラグインをインストールして、「カスタムCSS」という機能をONにする必要があるかもしれません(私のサイトは、ずっと以前からそういう設定だったので、WordPressのデフォルト機能でCSS編集が出来たのか、JetPackのお陰なのか、もう覚えてないです)。
仮に、端末側インストール済みのフォントのいずれかを指定したいだけならば、@font-faceの部分は必要ありません。単純に、狙っているインストール済みフォントのフォントファミリー名をfont-family:の後ろに書いて、効きが悪かったら、!importantを書いてください。
指定した部分のfont-familyの他にも!important指定されているfont-familyがあると、font-family指定はうまく効かないかもしれません。
font-size指定はわりと簡単に効きます(たぶん、font-size指定を!important指定することなんてあんまりないからなのでしょう)。
フォーラム: 使い方全般
返信が含まれるトピック: 親ターム名と子ターム名を表示する方法私のサイトで似たようなことを試してみたら、最初の例で既に子タームまで全部出ているように見えます。
最初の例を参考に以下のPHPファイルを作って
<?php require( dirname( __FILE__ ) . './../wp-blog-header.php' ); $taxonomy_name = 'utility-tax'; $taxonomys = get_terms($taxonomy_name); if(!is_wp_error($taxonomys) && count($taxonomys)): foreach($taxonomys as $taxonomy): $tax_posts = get_posts(array('post_type' => get_post_type(), 'taxonomy' => $taxonomy_name, 'term' => $taxonomy->slug ) ); if($tax_posts): ?> <option value="<?php echo $taxonomy->slug; ?>"><?php echo $taxonomy->name; ?></option> <?php endif; endforeach; endif; ?>
以下のURLに置きました。
http://meta-scheme.jp/wp/test-php/
上のURLの表示内容と、下のURLの表示内容にある「記事案内 便宜分類別」っていうドロップダウンをよくよく見比べてみると、なんか、子タームまで全部出てる感じですけど。既に最初のコードの段階で。
タームの並び順については、以下のリファレンスを見る限りでは
orderby引数とorder引数で指定できそうな気はしますが、私自身はまだ試していません。
ただ、以前私がwp_list_categoriesやwp_dropdown_categoriesを使った時、少なくともCategory Order and Taxonomy Terms Orderプラグインを使ってる環境では、orderby引数とorder引数が上手く効いてないように見えたので、もしそのプラグインを使っている環境だと、同じ問題が起こる可能性はあると思いました。
と、上の様に思ってましたが、Category Order and Taxonomy Terms Orderプラグインを使ってる私の環境でも、orderbyがNAME、orderがDESCは、あるていど効いてるみたいでした。
以下のPHPファイルを書いて
<?php require( dirname( __FILE__ ) . './../wp-blog-header.php' ); echo 'test orderby<br/><br/>'; $taxonomy_name = 'utility-tax'; $taxonomys = get_terms($taxonomy_name, array('orderby'=>'name','order'=>'DESC')); if(!is_wp_error($taxonomys) && count($taxonomys)): foreach($taxonomys as $taxonomy): $tax_posts = get_posts(array('post_type' => get_post_type(), 'taxonomy' => $taxonomy_name, 'term' => $taxonomy->slug ) ); if($tax_posts): ?> <option value="<?php echo $taxonomy->slug; ?>"><?php echo $taxonomy->name; ?></option> <?php endif; endforeach; endif; ?>
以下においたら、先に書いた例と違う並びに変わりました。
http://meta-scheme.jp/wp/test-php/index2.php
とはいえ、この表示結果、名称降順になってるとは考えにくいので、やっぱ、狙ったとおりには並ばないのかも(Category Order and Taxonomy Terms Orderプラグインの入ってない環境が私のサイトにはないのでそっちの環境での動きは試せてないです)。
フォーラム: 使い方全般
返信が含まれるトピック: ブログタイトルに余計な文字がはいるそうですね、サイト名だけになればハイフンは入らなくなるような気がしますね。
サイト名だけになるようにかえるために、簡単なプラグインを自作してみました。以下のプラグインをインストールすると、トップページだけはtitle要素がサイト名だけになるかと思います。ただし、このプラグインはWordPress4.4以上でしか動かないと思いますが。
http://tg29359.rdy.jp/app/tg29359-customize-title/tg29359-customize-title.zip
このプラグインでやっていることは、意味的には、ダッシュボードの設定->テーマ->表示されたプラグイン一覧のSTINGER6の行の「編集」をクリック->画面右側のテンプレートの羅列の中の「テーマのための関数」をクリック->画面上で「st_get_document_title」を検索して、st_get_document_titleという名前の関数の中の以下の部分を
// ホーム if ( is_home() ) { $title .= get_bloginfo( 'description', 'display' ) . ' - ' . get_bloginfo( 'name', 'display' );
以下に変えてる、みたいな感じです。
// ホーム if ( is_home() ) { $title .= get_bloginfo( 'name', 'display' );
ただ、テーマのための関数(functions.php)を直接編集しても、次回テーマにアップデートがかかったら、元に戻っちゃうかもしれないと思ったのでプラグインにして見ました。カスタマイズ用に自分独自の子テーマを作ってあるのであれば、子テーマのfunctions.phpに対して上記の編集にあたる変更を行ってもいいと思います。
追記
もしかしたら、「設定->テーマ->」のところは、「外観→テーマの編集」とかかもしれません。私のサイトはサブディレクトリ型のマルチサイトであるため、通常のサイトでの操作方法を確かめてみれないので、正確にはよくわかりません(サブディレクトリ型のマルチサイトの場合は、「サイトネットワーク管理者->テーマ」)。フォーラム: 使い方全般
返信が含まれるトピック: 投稿者名を表示させたいテーマのデザインでそういうデザインになっているせいかもしれないですね。必ず投稿者を表示するデザインのテーマもあるかも知れないので、そういうテーマを探してみるのもいいかもしれません。
私は今、Twenty Sixteenというテーマを使っていて、トップページだと投稿者名がでないのですが、記事のタイトルをクリックして一つの記事だけ表示するページに行くと、投稿者の名前やプロフィールが出てきます。
あと、テーマによっては、PCで見ている時でも、スマホみたいな細長いウィンドウサイズにすると、スマホの時みたいなレイアウトの表示になったりもします。今使ってるTwenty Sixteenと、前使ってたTwenty Fifteenと、Decodeがそうでした。
フォーラム: 使い方全般
返信が含まれるトピック: ブログタイトルに余計な文字がはいるその&#8211;は、多分、- という文字を表しています。
ちなみに私のサイトでは、WordPress 4.4 とテーマTwenty Sixteenを使っていて、カスタマイズしない状態では、title要素は以下の様になりました。で、サイトトップページのパターンだけ気に入らなかったので、プラグインを作ってカスタマイズしました。私の様にプラグインを自作したり、既存のプラグインをインストールしたりして、title要素の形式をカスタマイズしたら、余計な文字をいれずにお気に入りに登録できるようになるかもしれません。
・見ているページ:サイトトップページ
形式:サイト名 – キャッチフレーズ
実際の内容(例):メタスキーマウェブサイト – メタスキーマというハンドル名の一般人が運営しているブログ系のウェブサイトです・見ているページ:特定のカテゴリーに属する記事(単独表示)
形式:記事のタイトル – サイト名
実際の内容(例):風邪を引きました – メタスキーマウェブサイト・見ているページ:カレンダーウィジェットから開いた月別のページ
形式:YYYY年MM月 – サイト名
実際の内容(例):2015年10月 – メタスキーマウェブサイト私の場合、サイトトップページの形式を、単に「サイト名」になるようにカスタマイズしました。
フォーラム: 使い方全般
返信が含まれるトピック: ブログタイトルに余計な文字がはいるではtitle要素とは関係なさそうですね。
ちなみに、「ページのソースを表示」でみた場合、 - は&#8211;などと表示されることもありますが、タイトルの前にそれがついていれば目立ってすぐわかると思うので、この場合は関係なさそうですね。
フォーラム: 使い方全般
返信が含まれるトピック: ブログタイトルに余計な文字がはいるその余計な文字は、ウェブページのソースを見た時に、title要素に入っていますか?。例えば、以下の手順をGoogle Chromeでやったとして、
- 自分のウェブサイトのトップページを表示する
- 右クリックして「ページのソースを表示」選択
- ウェブページのソースが表示されるので、CtrlキーとFキーを同時に押して検索欄を開いて「title」を検索
私のウェブサイトだと、例えば以下のような部分が見つかるのですが、
<title>メタスキーマウェブサイト</title>
この<title>と</title>で挟まれた部分に、いま問題になっている余計な文字が入っていますか?。もし、入っているようであれば、例えば、以下のページに書いてあるような方法で、改善できる可能性があります。このページに書いてある方法は、自分のサイト専用のちょっとしたプラグインを書いて、それを自分のサイトにインストールすることにより、title要素の編集方法をカスタマイズする、という方法です(ただし、このページで紹介しているプラグインのコードの中には、WordPress4.4以上でないと使えないコードが含まれています)。
なお、「title要素の編集方法を変えるだけなら、わざわざプラグインなんか作らなくてももっと簡単な方法がある」という噂も聞いています(私はその方法を具体的には知らないのですが)。もし、title要素の編集方法を変えれば改善しそうで、そのもっと簡単な方法を知りたければ、ウェブを検索したら出てくるかもしれません。
フォーラム: 使い方全般
返信が含まれるトピック: webフォントが表示されなくなってしまったため回復させたいまったくの余談ですが、私は自サイトで、ダッシュボード->外観->CSS編集にて、以下の設定をしています(外観の下のCSS編集は、もしかするとJet Packプラグインを入れてないと出てこないかもしれません)。Twenty SixteenやTwenty Fifteenを想定した設定なので、他のテーマだと使えないかもしれませんが。
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format("opentype"); } #page *, #sidebar * { font-family: メイリオ, Meiryo, 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, 'Noto Sans JP', Times New Roman, serif !important; font-weight: normal; }
この設定をすると、見た目は以下になります。
狙っているのは
- Windows端末でメイリオ適用
- Mac、iOSで游明朝かヒラギノ明朝
- Android端末でNoto Sans JP
です。
本当は明朝系で統一したかったのですが、Windows端末とAndroid端末で広く使えそうで綺麗な明朝体フォントがどれかわからなかったので、ゴシック系で諦めました。Noto Serif JPが欲しいと切望しております。
ただ、この設定すると、Windows端末上のChromeでダッシュボード見た時、文字が異様に見にくい気がします。あと、Android端末でのNoto Sans JPの字体が無骨で嫌なのですが、端末内蔵フォントだと異体字とか弱かったりするんで、諦めて使ってます。Windows端末でのメイリオは、たぶんゴシック系だと思うんですけど、わりと綺麗で特に気にならないです。Windows系のモバイル端末で見たことがないので、もしかしたらとんでもなく汚いかもです(メイリオ入ってるかどうかもしらないし)。
ちなみに、Noto Sansは、普通にGoogle Fontをそのまま見に行けばいいのかと思ってたら、日本語対応版はちゃっかりEarly Accessにしかなかったという点に、最初、結構ハマリました。
フォーラム: 使い方全般
返信が含まれるトピック: webフォントが表示されなくなってしまったため回復させたい突然フォントが使用できなくなる原因について、参考情報をいくつか書きます。
- 使っているサーバーがクロスドメインまわりのアクセス制限をきつくしたためにウェブフォントファイルへ外部からアクセスできない状態に変わってしまった。
(該当してるかの確認方法)簡単なHTMLを書き、複数のブラウザでそれを開いてみて、各ブラウザにて、今現在でも、そのウェブフォントがちゃんと表示されるかもう一度確認してみる。
(該当してた場合の対処方法).htaccesssとかの設定を変える。 - 他のCSSがフォント関連の指定を上書きしている
(該当してるかの確認方法)ブラウザの解析機能(Google Chromeの「検証」とか)でCSSがどう解釈されてるか確認してみる。
(該当してた場合の対処方法)他のCSSの記述をさらに上書きする強そうな書き方に変えてみる。 - ページに読み込まれるウェブフォントの数があまりにも多いと、@importでの指定が無視されることがある気がする(根拠はなし)
(該当してるかの確認方法)可能であれば、link要素を用いたロードの仕方に変えてみて、それで動きが変わるかためしてみる。
(該当してた場合の対処方法)@import指定や@font-face指定をlink要素での指定に置き換える。
最初のクロスドメインどうたらについて。たとえばこんなHTMLを書いて、いまでもちゃんと表示されるかアクセスしてみてください。表示されなかったら、.htaccessを書き換えるとかの対策が要ります。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> @font-face { font-family: "myFont"; src: url("http://meta-scheme.jp/software/font/ArmedBanana.woff") format('woff'); } .myFontClass { font-family: "myFont"; } </style> </head> <body> <p>サンプル文字列は「<span class="myFontClass">サンプル文字列</span>」です。</p> </body> </html>
対策の参考情報はこちらです。
http://meta-scheme.jp/2445二番目のCSS云々について。たとえばGoogle Chromeで以下の手順をやってみます。
- 問題のウェブページを開く
- 「ここは絶対に私が指定したウェブフォントになっていなきゃおかしい」という辺りの文字列を選択なりマウスフォーカスあてるなりする
- 右クリック->検証
- 開いた画面の「Style」タブや「Computed」タブを見て、最終的に効いてるfont-familyを確認する
で、もしも、他のプラグインとか、テーマとか、新しいコアとかが仕掛けたCSSに負けてて、所望以外のfont-familyになっちゃってるようだったら、「!important」の乱発とか、勝てる書き方に変えてみてください。
三番目のは山勘なんですけど、なんか、私のサイトで、大量のウェブフォント使ってるページで、一部のフォントがロードされなくなって、@importをlink要素で書く書き方に置き換えたらうまくいったことがあったので、link要素指定に変えられるなら変えてみるといいんじゃないかな、と。例えば、以下のURLがその例なんですけど、
http://option-font.tumblr.com/option-font-list
このURLで使ってる中国語フォントのcwTeXHeiとか、@importだとfirefoxとかiOSのブラウザとかで無視されがちだったんですが、以下の書き方にしたら効きやすくなった気がしたんですよね。
<link href="http://fonts.googleapis.com/earlyaccess/cwtexhei.css" rel="stylesheet" type="text/css"/>
なんでそうなるのか、理屈はまったくわからないんですけど(笑)。
以上、参考情報でした。
フォーラム: 使い方全般
返信が含まれるトピック: 特定のパーマリンクにアクセス出来ないフォーラム: バグ報告と提案
返信が含まれるトピック: wp_list_categories()のパラメータexclude_treeで複数除外できないあ、失礼しました。以下は動いてないときの例だったのですね。だとすると、リファレンスの言ってる「カンマや空白区切り文字列も可」と合ってなくて不具合っぽい気はしますね。
'exclude_tree' => array( 0 => '9,10' );
フォーラム: バグ報告と提案
返信が含まれるトピック: wp_list_categories()のパラメータexclude_treeで複数除外できないあ、ちょっと待ってください、この挙動、もしかしたら仕様通りかもしれません。以下は4.4でもうまく動くんですよね?。
'exclude_tree' => array( 0 => '9,10' );
それって、配列の先頭要素が、リファレンスで言ってる「カンマで区切られた文字列」である、ってことだとも言えますよね。で、一方、私が例示した以下も、意図通り動くのは実際に確認しています。
'exclude_tree'=>array(9,10)
で、私が例示したのはカンマ区切り文字列じゃなく単なるidの配列です。つまり、リファレンスに書いてある通り、カンマ区切り文字列でも配列でも両方いけてる、ってことで、ある意味、仕様通りなんじゃないですか?。
ただ、文字列で渡す時は、今までと微妙に渡し方が変わってます、ってだけで。