Loading…

記事内にプロモーションが含まれています。

Stinger6 WordPress カスタマイズ

WordPress,css外部ファイル化方法Stinger

記事上に人気記事表示

所要時間目安：約2分

This session is using　 IPv4 　is established in

この記事は2015年12月30日のものです。現在は状況が異なる可能性がありますのでご注意ください。

Stinger6 WordPress カスタマイズ

カーメンテナンスWAKO'S

  • 本日
  • 週間
  • 月間
  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 2PV

    この度は（今回は？）、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側（トランスミッター）のみをなくしてしまった場合です。（まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 2PV

    この度は（今回は？）、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側（トランスミッター）のみをなくしてしまった場合です。（まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 2PV

    この度は（今回は？）、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側（トランスミッター）のみをなくしてしまった場合です。（まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

目次に行く･戻る

メルカリ招待コード：

昨今…。
といっても、
ここ数年ページ表示速度もSEO対策のひとつにもなります。

また、
検索してくれた方がそのサイトが表示されるのになかなか表示されないと離脱率どころではなく、
サイトにすら訪れてくれない場合があり得ます。

そんな中で、


この記事を読む方へのオススメ


cssファイルの外部化やJavaScriptの外部化は知られていると思います。

今回はWordPressを始めてまだ大した記事数もないので、
アクセスなどはほぼない状況ですが備忘録とともに今後の為に…。

と思います。

（参考サイト）

Bloggerブログ CSS外部化する方法。ページ表示速度を高速化 | ～備忘録～ JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法 | 海外SEO情報ブログ

アドセンス336pxPC閲覧記事下表示1つ目コード

テーマによってheader内のcssやJavaScriptの数などは違いがあると思います。

また、製作者様がfooter部分に初めから記載されていたりasync、非同期化されていたりするものもあります。

そういうテーマは非常にありがたいですね！！

Stinger6もいくつか既に非同期化されているJavaScriptがありました。

まだWordPressはじめて間もないのでphp言語？とにらめっこしながらcssファイルを外部化してみました。

具体的方法

まずは、
自分のブログ・サイトが表示されてソースの表示をしてみます。

するとheader内にいくつか

<link rel="stylesheet" href=

という部分があります。

こんな感じのところです。

header内のcss読み込み部分

 

この部分をまとまられるものは1つにまとめて外部ファイルに1つのcssファイルを作ります。

無料サービスでいうと、

  • GoogleDrive
  • Googleサイト
  • Github

などがあると思います。

上記中でも速度が早いのはGithubかと思われます。

今回は親テーマのstyle.css内すべてと小テーマの自分でカスタマイズに使ったcss内容を一括して外部ファイル化します。

また、
ただ外部ファイル化するだけではファイル容量に違いがないのでcssファイルを圧縮します。

以下のようなwebツールがあります。

Refresh-SF - Online JavaScript and CSS Compressor
こちらに、
親テーマのcss内すべてと小テーマの自分でカスタマイズに使用したcssの順でコピペして圧縮してもらいます。

すると不要な部分（コメントアウトなど）が削除されて結構な削減率になります。

その圧縮された内容のcssをコピーして外部ファイル化したいサーバー内に任意の.cssファイルを作ります。

とりあえず、

これで下準備は完成です。

あとは、
テーマのどの部分がスタイルシート（.css）を読み込ませにいっているかを確認します。
（概ねheader.php内に記述されていると思います。）

その部分に、
外部ファイル化したURLを記載します。

あとは、
表示の確認をしてみて今まで通り表示されていれば完成です。

それと、
Googleのデベロッパーサービスですが、
pagespeed/insights
で、
レンダリングブロックされているものの数が減っているかどうかを確認してみてください。

今回の方法で複数のcssファイルを１つにしたのであれば、
例えば3つのcssファイルがあったものを外部ファイルに1つにしたとしたらレンダリングブロックされている数は２つ減っているはずです。

あとは、
javascriptも複数ある場合は1つにまとめて外部ファイル化した方がレンダリングブロックする数は減らせます。

さらに、
javascriptの場合は非同期にすればその外部ファイルに1つにしたものはレンダリングブロックされることはなくなります。

次回は、

javascriptの外部ファイル化+非同期にできるものがあればその方法も記載したいと思っています。

 

ただ、
いつになることやら…。（汗）

最後に注意として、
テーマの更新などがあった際や今後cssを追加してカスタマイズしていく上ではちょっとめんどい面もあります。

なので、
外部ファイル化はカスタマイズがほぼ終わってしばらくはカスタマイズしないなぁ。
という時にした方がいいと思われます。

あなたにおすすめな関連記事

WordPress 不具合 伝えたいこと

Important notice for administrators

先月にWordPressのプラグインで有名な人気記事などを表示することが簡単にできるWordPress Popular Postsにて、以下のようなエラーメッセージが表示されるようになりました。 エラ…

もっと読む

インフィード広告アドセンス

webフォントNoto Sans Japanese

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

webフォントNoto Sans Japaneseがとても綺麗

以前にwebフォントの導入方法を記載しました。 こちらでは、 webフォントのubuntuを使用しています。 しかし、 ひょんなことからwebフォントでNoto Sans Japaneseというとって…

もっと読む

インフィード広告アドセンス

Pixlrオンライン画像編集サイトにて作成

WordPress カスタマイズ 伝えたいこと 備忘録

ページ表示速度が遅いのでphotonが使いたくてJetpackプラグインをインストールしてみた…。

ここのところ、サイト（ブログ）のページ表示速度が気になってしまいます。以前に運営していたBloggerブログでも同様のことを考えたりしていました。ですが、サイトのページ表示速度が少しくらい遅くても時代…

もっと読む

インフィード広告アドセンス

ブログのデザイン夕日と夕焼けで考える

AFFINGER4Pro STINGER PLUS+ Stinger6 WordPress カスタマイズ 伝えたいこと 備忘録

ブログデザインがセンスの良いレイアウトやデザインにならない。Simple is Bestにしたい…。

人に見ていただくのでブログ運営においてデザインも重要です。自分の備忘録のみであれば、然程デザインやユーザビリティにこだわらなくても良いのかもしれません。テーマを変えてみようと思いましたが、これまでのカ…

もっと読む

インフィード広告アドセンス

no image

php WordPress

PHPバージョン5.5に設定変更方法

WordPressで使われているphpというものがあります。 これにもバージョンがあるらしく、 現状私が利用させていただいているサーバーのバージョンは5.5ではなく5.2.17でした。 そして、 Fa…

もっと読む

インフィード広告アドセンス

Stinger6右サイドバー上に別広告

AdSense Stinger6 WordPress カスタマイズ

Stinger6右サイドバー上に別広告を表示する方法

はぁ…。やっと、できた！！って何がという感じですが、 とても使い勝手の良いテーマStingerの最新版Stinger6を選ばせて頂いて、四苦八苦の日々が続いていたわけですが、アドセンス広告は1ページ当…

もっと読む

Stinger6, WordPress, カスタマイズ」同じカテゴリーの記事一覧

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場

Total343


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

-Stinger6, WordPress, カスタマイズ
-, , , ,

目次に戻る

目次に戻る

コメントを閉じる

comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

記事上に人気記事表示 アイキャッチ画像設定し忘れプラグインなし自動設定方法Stinger6

続行するには、下の数字を入力してください: 続けるには次の数字を入力してください

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.