- このトピックには17件の返信、2人の参加者があり、最後に
により8年、 11ヶ月前に更新されました。
-
投稿
-
-
いつもお世話になっています。
おそらくカスタマイズ設定の部分のCSSですが、BODY前にかなりの量が入ってしまうことが気になってしまいます。テンプレートを利用する上で仕方ないことなのかもしれませんが、完全に外部から呼び込むようにすることは可能でしょうか。SEO対策上でも気になりますし、ロボットが読む上でもBODYを読むまでの分量が気になるのと、クライアントに納品する際、指摘を受けそうです。
ご教授ください。
-
使われているSimplicityのバージョンは最新のものですか？
昔はそうでした(バージョン1.5ぐらいの時でしょうか)が、今はそんなに挿入されてなかったと思うんですけれども。またSEOに関しては必ずしもBODY前のCSSがダメと言うわけでもなく、むしろファーストビューのcssは小さくまとめて書いておけとGoogleは言ってます。また本格的なcssは非同期か遅延させろと無茶まで言ってます(無茶というほどでもないんですけれども)。
小さくまとめるってのがどれぐらいとは言っていないってのがアレなんですけどね（笑）
ただ、指摘される内容がわからなくもないんですよね。できるだけヘッダの中身は少ない方が良いと思うのは僕もそうなんです。
動的にcssを作成して読み込むとか方法がなくも無いようにも思います。ただそうすると、動的に作成する処理で時間がかかったりするので、ヘッダに書いておいてhtmlをキャッシュさせる方が結果的に速いと思ったりもします。作ったファイルをキャッシュすればよいだけと言うふうにも考えられるわけですが、どっちがよいのかなぁと思ったりも。ちなみに、うちのローカルのSimplicity(1.7.5)では、
.article { font-size:15px; } /*サムネイルをサークル状に*/ .entry-thumb img, .related-entry-thumb img, #new-entries ul li img, #popular-entries ul li img, #prev-next img, #new-entries .new-entrys-large .new-entry img{ border-radius:10px; } /*いずれ消す（ブラウザキャッシュ対策）*/ .entry-content{ margin-left: 0; }と、
html { margin-top: 32px !important; } * html body { margin-top: 32px !important; } @media screen and ( max-width: 782px ) { html { margin-top: 46px !important; } * html body { margin-top: 46px !important; } }これもそうかなぁ、なんだろこれ（笑）
ぐらいしかありませんでした。後のはプラグインが挿入してるcssとかでした。
まぁ量的にA4サイズの紙に印刷したらびっちり書いてあるってほどだと考える必要もあるかも知れませんけれども、気にされる程ではないのではないかと僕は思ってます。
-
Hidekichiさん、ありがとうございます。
ずっとxhtml+css3で作ってきて、Wordpressのカスタマイズは始めたばかりなので、稚拙な素人なのです。
テンプレートは他にも試したのですが、今までhead内は外部からの呼び込みのみでやってきた身としては、どうにも気になってしまって。。。で、バージョンを確認しましたら、1.7.0でした。1.7.5にすれば変わるのかな・・・
としても、Hidekichiさんのhead内のCSSは私のより圧倒的に短いです。
現在、
<style type=”text/css”>
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>と
<style type=”text/css”>
a:hover,
#new-entries a:hover,
#popular-entries a:hover,
.wpp-list a:hover,
.entry-read a:hover,
.entry .post-meta a:hover,
.related-entry-read a:hover,
.entry a:hover,
.related-entry-title a:hover,
.navigation a:hover,
#footer-widget a:hover,
.article-list .entry-title a:hover {
color:#5ee0ca;
}
#navi ul,
#navi ul.sub-menu,
#navi ul.children {
background-color: #2d69b0;
border-color: #2d69b0;
}
#navi {
background-color: #2d69b0;
}
@media screen and (max-width:1110px){
#navi{
background-color: transparent;
}
}
#navi ul li a {
color:#ffffff;
}
#navi ul li a:hover {
background-color:#1e4a7e;
}
#main{
float:right;
}#sidebar{
float:left;
}#sharebar{
margin-left:700px;
}/*@media screen and (max-width:1110px){
#sidebar{
float:none;
}
}*/
#s {
border-radius:25px;
}
/************************************
** サムネイルの非表示
************************************/
a.entry-image,
.new-entry-thumb,
.popular-entry-thumb,
.related-entry-thumb{
display:none;
}#popular-entries .wpp-thumbnail{
display:none !important;
}.related-entry-thumbnail .related-entry-thumb{
display:block;
}.entry-card-content,
.related-entry-content{
margin-left: 0;
}
/*いずれ消す（ブラウザキャッシュ対策）*/
.entry-content{
margin-left: 0;
}
</style>
<style type=”text/css” media=”print”>#wpadminbar { display:none; }</style>
<style type=”text/css” media=”screen”>
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>こんな感じです。「A4サイズの紙に印刷したらびっちり書いてあるってほど」です…
-
完全に外部から呼び込むようにすることは可能でしょうか。
テンプレートを、カスタマイズすれば、大抵のことは可能です。
ただ、やり方は、それなりに複雑なコードを書く必要があるので、カスタマイズは各自で調べて行ってください。行う内容的には単純で、ボディー手前に埋め込むものを、CSSファイル化して、そのCSSファイルを、ヘッダーからlinkで読み込めばいいだけです。僕は、ヘッダー部分にCSSが書かれていたからって言って、SEO的に不利になると思っていません。
スピード面で言えば、ファイルを読み込まなくていい分（読み込むファイル数は多いほど時間がかかる）、埋め込みの方が読み込みが早いので、そのようにするプラグインもあるほどです。（理想を言うなら、ファーストビュー以外のところは、後から読み込んだほうがいいかもしれないけど）そこまで気になるのであれば、テーマカスタマイザーからカスタマイズしないで、子テーマなどのstyle.cssで手打ちでCSSコードを書いて、必要ならば、テンプレートのカスタマイズを行えばボディー手前にそこまでコードが挿入されることはなくなります。
-
-
-
わいひらさん、ありがとうございます。
テーマカスタマイザーを利用してデザインを仕上げ、最終的にhead内のCSSを新規で外部CSSにして、コピペして読み込ませる、という風にやってみます！
head内にCSSがあっても問題ない、ということで個人的には納得していますが、headの長さを気にされるお客さんが多くて…
完全にオリジナルでテンプレートを作れればいいんでしょうが、Simplicityのような素晴らしいテンプレを作れるわけもなく。頑張ってカスタマイズしてみようと思います。 -
img.wp-smiley,img.emoji は、Wordpressの新機能のやつ(拡張文字のサポートとかいうやつ。4.2だったかそこらからあります)なので、不要ならoffにできるんじゃないでしょうか？
参考: WordPress 4.2 からデフォルトで吐く絵文字表示用の script と style を無効化する方法
>「A4サイズの紙に印刷したらびっちり書いてあるってほど」です…
僕のイメージしてたのは、圧縮して隙間なくびっちりだったんですけれども（笑）
レスの内容ぐらいなら、鬱陶しいぐらいにいつでもサーバーをうろちょろしにくる世界に誇るGoogleBotならミリセカンドの世界で処理すると思います。 -
あ、ちなみにGoogleのボットがどのように見えているかは、webマスターツール(search console)で、クロールのメニュー内にあるfetch as googleから調べられます。
だいたいチェックしに行って表示まで1秒ぐらいです。まぁテキストデータですからね、圧倒的に速いです。
-
Hidekichiさん、ありがとうございます！
emojiの件、とても助かります！とっちまいます。＞ミリセカンドの世界で処理する
安心しました。そうなんですね。見た目が気になるのはプラグインを入れてCSSを圧縮すればいいだけですね。
それにしても、HidekichiさんのCSSはほとんど入り込んでないですね。やはりカスタマイズされまくって、シンプルheadになってるのでしょうか。
-
うちのローカルサーバーのはデフォルトです。ただ、プラグイン自体のCSSはそれぞれに圧縮してます。
うーむ今、国内サーバーの方も見てみたんですけど、ローカルの方と同じ感じですねぇ。なんでだろ？
前はカスタマイザーの中にいくつか記述があったんですけど、そのあたりはわいひらさんが修正してくれたので、現在はややこしいのは無いと思うんですよね。となると、使用しているウィジェットや設定の違いでしょうか？
国内の方は一部原形がないくらいカスタマイズしてますけれど（笑） -
僕は、クライアント相手にWordpressのお仕事はしたことがないのですけど
そういった方もおられるのですね。
ちょっと、実装に興味が出てきたので、コードを書いてみたら、Simplicity最新版で、functions.phpに、以下のように書くと実装できました。ちょっと無理やりですけど。//カスタマイズした値をCSSに反映させる function celtisone_customize_css(){ if ( css_custum_to_css_file() ) { echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/css/css-custom.css">'; } else { get_template_part('css-custom'); } } add_action( 'wp_head', 'celtisone_customize_css'); //テーマカスタマイザーのファイル外部ファイルに書き出す function css_custum_to_css_file(){ if ( WP_Filesystem() ) {//WP_Filesystemの初期化 global $wp_filesystem;//$wp_filesystemオブジェクトの呼び出し //カスタマイザーのカスタムCSSを取得 ob_start();//バッファリング get_template_part('css-custom');//カスタムテンプレートの呼び出し $css_settings = ob_get_clean(); $css_settings = str_replace('<style type="text/css">', '', $css_settings); $css_settings = str_replace('</style>', '', $css_settings); //var_dump($css_settings); $wp_filesystem->put_contents( get_simplicity_local_dir().'/css/css-custom.css', $css_settings, 0644 ); return true; } }上の関数は修正、下の関数は加筆。
次のバージョンで、とりあえず、カスタマイザーのその他あたりに実装しておこうと思います。多分。
ただ、サーバー環境によって、不具合が出るようなら機能は取りやめると思います。 -
スクリプトもそうなので、cssも以下でどうですか？
<?php wp_enqueue_style( ‘mytheme-css’, get_template_directory_uri().’/style.css’ ); ?>
参考: wp_enqueue_style
-
お二人とも素晴らしいです！
わいひらさん、もし新バージョンに実装していただくことが可能でしたら、最高に嬉しいです。Hidekichiさん、今はまだ、プラグイン何も入れてない（というかWordpressのデフォルトのみ）状態です。
ですので、プラグインはあまり関係ないかと… -
-
仕事で忙殺されて確認できていませんでしたっ！すみません。
わいひらさん
＞ヘッダーにCSSが埋め込まれていると、嫌がるクライアントの方が、結構おられますか？はい。私のクライアントはほとんど。jsファイルもcssも完全に外部化して、どれだけシンプルに見せるか、ということを気にされています。
個人事業主の方で、ホームページがほぼ集客のツールとなっているので、クライアントもそこそこ知識があって、説明しても反論されたりしちゃいます（笑）。 -
-
コンパクトなインラインのcss(ヘッダにstyleタグで書き出す)は、ある意味高速化にもつながります。
google+とかのヘッダを見てもわかるように、cssをstyleタグで書くのは大きな問題ではありません。むしろ外部に接続するというのはhttpリクエストが増えるということです。
リクエストを出したサーバーの応答が遅ければページ内に書いてある方が速いのは想像頂けるかと思います。
css自体はテキストファイルなので、数万行になっても読み込むのは一瞬です。圧縮されていれば更に良しです。
問題はその経路にあります。例えば画像スプライト。1つの画像にたくさんのアイコンを並べてcss側で位置を決めて、ページ内のアイコンをその1枚を使いまわすことで、サイズダウンとhttpリクエストの軽減をする仕組みですが、その1枚の画像と、それぞれのアイコンの合計サイズが、1枚のほうが多少大きくてもhttpリクエストを軽減するほうがサイトの高速化に繋がるという実験結果もあります。
なのでページ内にcssを書くというのは何も悪いことではありません。ようは、やり過ぎたら逆効果って事なのです。酒もタバコもやり過ぎれば毒になりますが、適度にやる分には周囲の人に迷惑をかけるだけで特別(必ず)害が出るのではありません。
水を大量に飲んでも砂糖や塩を大量に摂取してもそれは害になるわけですから、なんでもやりすぎてはいけないという戒めみたいなものです。外部スタイルシートの最大のメリットは「デザインを一括管理できる」と言う点です。これはSEOにも言える話ですが、そのファイルがcssですよとわかれば、htmlの中からcss部分を探すよりわかりやすいですよね。中身はcssなんですから、その目的でデータを収集したり、確認できます。
最大のデメリットはキャッシュできないってことでしょうか。けどまぁhtmlをキャッシュしてればしてるのと変わらないんですけれども。
ブラウザはhtmlに書いてあることを上から読み込んで処理していきます。外部ファイルやキャッシュファイルはいつ読み込むかのタイミングを決めたり(defer,async)、あるいはブラウザの都合で読み込みますが、埋め込んだstyleはhtmlを読み込む時に読み込まれますから、表示崩れがないわけです。しかもheadに書いてあるので間違いなくbodyに反映されます。ここらがGoogleがオススメする小さなcssでレンダリングを妨げないようにするということです。
これらを踏まえて、再利用性とデザインとhtmlとの分離がどういう意味をなすのかを説明されるのが良いかと思います。
-
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。