WEB制作 | AkuyDesign

CSSが効かない時に確認すること

AkuyDesign — Wed, 11 May 2022 18:08:48 +0000

cssを変更したはずなのに変更したcssが効いてないことがありますよね。今回かなりハマったので、健忘録としてまとめておきます。

今回以外にも、過去に何度かCSSが効かなくてハマったことがあるので、CSSが効かない時に私が通常チェックする箇所をまとめました。

今回の症状

WordPressでスマホ用の表示メディアクエリ（@media）を使った部分のcssを変更したのに、PCのChromeで確認したらcssが反映されているのに、safari、iOSのChromeとsafariともcssが反映されていない。

CSSの記述がおかしくないか

全角スペース / “（ダブルクォーテーション）

よくある記述ミスの中でも見つけにくいものが、本来なら半角スペースで記述しなければいけない箇所を全角スペースで記述している場合です。

.hoge{
　display: none;
}

上のコードには「display: none; 」の前のスペースが全角になっています。肉眼で確認するのは難しく、見落としてしまうことが多いので気をつけましょう。正しくはこちら。

.hoge{
 display: none;
}

また、ネットやノートアプリなどからコピペした時など、”（ダブルクォーテーション）が全角になっている時があります。こちらもよくあるミスです。

上のコードの”は全角になっています。正しくはこちら。

idとclassを間違えている

こちらもよくあるミスですが、idで指定したのにCSSの方ではclassで記述している場合、もしくはその逆です。

HTML

 これはテキストです。


CSS
#hoge{
 padding:20px;
}

上のコードではHTMLにclassを指定しているのにも関わらず、CSSではid指定の記述をしているのでCSSが反映しません。正しくはこちら。

HTML

 これはテキストです。


CSS
.hoge{
 padding:20px;
}

コメントアウトの記述は正しいか

これも過去実際にあった間違いですが、コメントアウトが正しく記述されていませんでした。

 / * ここにコメント */

上のコードには「/」の後に半角スペースが入っているので、その後のCSSが認識しません。正しくはこちら。

/* ここにコメント */

コードがしっかり閉じてるか

CSSの一部を削除した場合など、片方の「}」が残ってしまったり、末尾の「}」が削除されてしまったりすることがあります。特にメディアクエリの「}」を閉じ忘れると、それ以降のCSSが効かなくなるので、コードがしっかり閉じてるか確認します。

@media screen and (max-width:768px){
.hoge{
 display: none;
}

上のコードは最後の「}」が閉じ忘れています。正しくはこちら。

@media screen and (max-width:768px){
.hoge{
 display: none;
}
}

更新時にスーパーリロード（強制更新）しているか

CSSを変更した後、通常の更新だけだと変更したCSSが反映されないことがあるので、確認するにはブラウザ上からスーパーリロード（強制更新）する必要があります。

これは以前のCSSデータがブラウザのキャッシュに残っているからで、スーパーリロードすればキャッシュがクリアになって更新されます。大体変更したCSSが反映されていない時は、この場合が多いです。

Macの場合

Google Chrome：command+Shift+R
Firefox：command+Shift+R
Opera：command+Shift+R
Safari：Shift+更新ボタン

Windowsの場合

Internet Explorer：Ctrl+F5、Ctrl+更新ボタン
Google Chrome：Ctrl+F5、Shift+F5、Shift+更新ボタン、Ctrl+更新ボタン
Firefox：Ctrl+F5、Shift+更新ボタン
Opera：F5
Safari：Ctrl+R、Shift+更新ボタン

iPhone(iOS)の場合

スマホでは強制リロードができないので、ブラウザ上のキャッシュを削除してから更新します。

Google Chrome：Chromeブラウザのメニュー＞設定＞プライバシー＞閲覧履歴の消去＞「Cookie、サイトデータ」にチェックを入れて「閲覧履歴の消去」をタップ
Safari：iPhoneの「設定」＞「Safari」を開き＞履歴とWebサイトデータを削除

viewportが設定されているか

レスポンシブデザインでコーディングしている際、メディアクエリを利用するには内にviewportの記述がないと動きません。基本的なことですが、こちらもきちんと記述されているか念の為確認した方が良いでしょう。

CSSの読み込み順番は正しいか

CSSを外部読み込みしている場合や、ファイルを分けている場合、読み込む順番が違うことで、該当の箇所のCSSが適応されないことがあります。

例えば、mobile.cssをpc.cssよりも前に読み込みをしていてmobile.cssのデザインが反映されない、もしくはその逆で、モバイルファーストで作成しているのに、pc.cssをmobile.cssよりも前に読み込みをしている場合、pc.cssのデザインが反映されない箇所が出てきます。

ベンダープレフィックス（Vendor Prefix）が記述されているか

PCのCSSは反映されているのに、iOSではデザインが反映されていない場合、Vendor Prefixが記述されていないことが原因かもしれません。

display: flex;
flex-wrap: wrap;

例えば上記のようなflexboxコードを使っている場合、iOSのSefari 8以前のブラウザにはVendor Prefix (ベンダー接頭辞)を適用し、下記のように記述する必要があります。

display: -webkit-flex; /* 追加 */
display: flex;
-webkit-flex-wrap: wrap; /* 追加 */
flex-wrap: wrap;

その他にもベンダープレフィックスでないと表示されないブラウザ/CSSがあるので、状況に応じて使用すると良いでしょう。対応状況については以下のサイトで確認することが可能です。

https://caniuse.com/

WordPressのキャッシュをクリアする

WordPressのサイトの場合、ページの読み込みを早くするためにキャッシュのプラグインを使用していることがあります。ブラウザのキャッシュはスーパーリロードでクリアできますが、Wordpressでキャッシュのプラグインを利用している場合は、こちらのキャッシュもクリアしないと変更したCSSは反映されません。

プラグインのキャッシュをクリアする方法は、それぞれのプラグインによって異なるので、それぞれ調べてみてください。

まとめ

私がハマったのは、flexboxとWordpressのキャッシュが原因でした。今回の私のように、CSSが反映されない原因は1つでは無いかもしれないので、焦らず順番にチェックしてみてください。

The post CSSが効かない時に確認すること first appeared on AkuyDesign.

WordPressでいずれテーマ変更をしたい人がテーマを選ぶ際の選び方と注意点

AkuyDesign — Sat, 21 Dec 2019 07:56:12 +0000

WordPressはテーマ(テンプレート)がいくつもあり、手軽にテーマを変更することができるのが一つの魅力でもあります。しかし、テーマ変更自体はボタン一つでできたとしても、そのままではサイトの表示が大変なことになってしまいます。

そこでここでは、Wordpressのテーマを作ったり、テーマ変更やウェブサイトのリニューアルなどを経験してきている者として、テーマ選びの際に気をつけておきたいポイントをご紹介します。

WordPressにはどんなテーマがあるの？

まず最初にWordpressにはどんなテーマがあるか見てみましょう。大きく分けて2つの違いがあります。

有料 / 無料
日本製 / 外国製

有料テーマと無料テーマの違い

WordPressの有料テーマと無料テーマの違いは、もちろん文字通り有料か無料かではありますが、機能面での違いもあります。

有料テーマのメリット

有料テーマはデザインが美しいのは元より、独自の機能が使えたり、独自のカスタマイズ性が高いテーマであることが多いです。カスタマイズ性が高いテーマのものは、管理画面上でカスタマイズができるようになっているので、テーマ導入時の設定や微調整に時間を取られることがなく、サイト公開までの時間を大幅に短縮できます。

有料テーマのデメリット

しかし、有料テーマのメリットが、時にはそのままデメリットにもなることもあります。テーマ内で利用していたテーマ独自のショートコードやカスタム投稿などは、テーマを変更する際にはそのまま引き継げませんので、テーマ変更をする際にこの部分の調整を行う必要が出てきます。

多少の調整で修正できるものなら良いのですが、テーマ独自の機能に頼り切っているような場合、調整に手間がかかり過ぎてしまい、簡単にテーマ変更をするメリットを享受することができません。（不可能ではないです）

無料テーマのメリット

無料テーマの一番のメリットは無料であるということですが、無料であるがためにシンプルな構造のものが多いということです。多くの有料テーマではそのテンプレートの独自デザインや機能の設定ができるようになっていますが、無料テーマの場合はそのような機能が付いているテーマは少ないです。（無いわけではありません）

そのためテーマでコントロールするのはデザインのみで、サイトに必要な機能はプラグインで管理するなど、デザインと機能を分けて管理することができます。

無料テーマのデメリット

無料テーマは有料テーマと比べるとシンプルなものが多く、その分必要なところは自分で追加やカスタマイズする必要があります。自分でできる人なら良いですが、知識が少ない人だと大変です。

日本製と外国製テーマの違い

日本製のテーマのメリット

日本製のテーマのメリットは主に3つほどあります。

日本語の表示がきれい
日本で人気のデザインが標準装備
サポートが日本語

Webブラウザの文字の表示では、英語は1バイト、日本語は2バイトで扱われます。バイト数は簡単に言うと文字の幅のことで、英語やフランス語、ドイツ語のような半角は1バイト、日本語や中国語、韓国語のような全角は2バイトで表示されます。

従って英語テンプレートだと、文字が1バイト表示で想定されているため、日本語表示だとフォントサイズが大きすぎたり小さすぎたり、詰まりすぎていたりして読みづらかったりします。これが「英語だとかっこいいのに日本語にした途端にパッとしないデザイン」になる理由です。外国製のテンプレートは適応時にフォントサイズの調整をする必要があります。

2のデザインについてですが、日本語のサイトと英語のサイトでは好まれるデザインが違うため、テーマで利用できるデザインが異なることがあります。例えば日本語のサイトでよく使われる「会話のような吹き出し」表示は英語圏のサイトではほとんど見かけません。

そのため外国製のテーマでは吹き出し表示が利用できるテーマはほとんどありませんが、日本製のテーマには機能として搭載されているテーマがあります。

最後にサポートですが、やはりわからないところや困った時に日本語で対応してもらえるのは嬉しいです。ネットで日本語で調べても多くの情報が手に入るのもメリットです。

日本製テーマのデメリット

デメリットは外国製のテーマと比べると種類が少ないことです。少ないデザインの中で多くの人が同じテーマを利用すると、他のサイトとデザインがかぶる可能性が高くなります。

有料テンプレートだとサイトの色やカラム数、さらにはサイドバーの位置などを変えることはできますが、それでも同じテンプレートを利用していると言うことは、全体的な雰囲気は似たデザインになってしまいます。しかしデザインにそこまでこだわりが無ければ問題にはなりません。

外国製テーマのメリット

外国製のテーマのメリットは、何と言っても種類が豊富なところです。日本製のテーマの何十倍ものデザインがあります。中には無料とは思えないほどのクオリティーのものや、ウェブ制作業者がいらなくなるほどの機能を持った有料テンプレートなどもあります。豊富なデザインの中から選べるので、気に入ったデザインが見つかる確率は高くなります。

外国製テーマのデメリット

デメリットとしては、やはりサポートが英語だと言うこと。何か調べる時や困った時に英語で対応しなければならないため、英語が苦手な人は大変かもしれません。また日本語を表示するにはフォントの調整も必要になってきます。

なぜ簡単にテーマ変更ができないのか？

テーマを変更する時に必要なこと

テーマのスクリーンショットやデモサイトを見るととてもキレイなデザインだったので、ライブプレビューをしてみると何とも残念な表示になった経験はありませんか？

そもそもテーマは適応しただけではデモサイトのようにキレイなサイトは出来上がりません。特に有料テーマで多いですが、テーマによってはデモサイトのような表示にするにはウィジェットやカテゴリーの表示を選択するなどの設定が必要になってきます。（※有料テーマではデモをインポートできるテーマもあります。）

WordPressはオープンソースが故に無料でこれだけの機能やテーマなどを利用することができますが、世界中の人がそれぞれにコードを書いてテーマを作っているので、それぞれの仕様が異なります。以前使っていたテーマから新しいテーマに変える際には、新しいテーマの仕様に合わせてデザインを調整しなければなりません。

さらに、テーマ独自の機能を利用している場合、特にテーマ独自のショートコードやカスタム投稿などは、テーマを変更する際にはそのまま引き継げませんので、テーマ変更をする際にこの部分の調整を行う必要が出てきます。

こんな人はできるだけシンプルなテーマを選ぼう

飽きっぽい人
気分によってテーマを変えたい人
テーマ変更をする可能性がある人
サイトのリニューアルをする可能性がある人

こんなテーマには気をつけよう！

無料/有料問わず、独自のカスタマイズ性が強い（テーマに依存している）

上でも説明した通り、特に有料テーマは機能が充実している分テーマに依存しているものが多いです。テーマに依存しているというのは、テーマを変更してしまえば、その機能を使うことができません。

今後、特にテーマを変更するつもりが無いのならそういうテーマを選んでも良いでしょうが、テーマを変えたいor変える可能性がある、もしくはサイトのリニューアルをする可能性があるというような人は、その様なテーマを避けるか、テーマを利用しても独自機能を利用しない方が無難です。

サポート＆更新が受けられない

特に有料テーマの場合、無料でサポートが受けられる期間が決められている場合があります。そのようなテーマはサポート期間が終了しても使える場合が多いですが、サポート期間が終了してしまうと、テーマ内で何かトラブルがあったりカスタマイズする場合のサポートや、新しいバージョンへの更新も受けられなくなる場合があります。

サポートを受けたい場合は追加で権利を購入するか有料サポートがあるはずですが、一度購入しているテーマに再度お金を払ってサポートを受けるということは、なかなか受け入れられないと思います。

有料テーマでもサポートがないものもあるので、特に初心者が有料テーマを購入する際はサポートが受けられるテーマがオススメです。

こんなテーマを選ぼう！

テーマに依存しすぎないテーマ

何でもかんでも管理画面でできるのは、特に初心者にとっては簡単でありがたいですが、先程も説明した通りこれは諸刃の剣です。テーマに依存するということは、テーマを切り替える際に今まで使えていた機能が使えなくなるということです。

テーマ独自の機能がある場合は、テーマを変更する際に以前のテーマの独自機能を新しいテーマに対応させる為の調整が必要になります。最悪、大量のページを一つ一つ修正していかなければならなくなります。記事数が少ない時は良いですが、これが何百、何千もの記事がある場合、現実的ではなくなってしまいます。

テーマはあくまでもデザイン、機能や設定はプラグインで管理するのがオススメです。

モバイルフレンドリー（モバイルファースト）

Googleは、スマホからの検索が増えたため、レスポンシブデザイン、モバイルファーストを重要視するようになりました。

最近のテーマはほとんどがレスポンシブデザインになっているので、モバイルフレンドリーですのであまり気にしなくても良いでしょう。

テーマ内になくても大丈夫な機能

いいなと思ったテーマに欲しい機能が付いていなかった・・・なんてこと経験はありますか？デザインは好きだけど、あとこの機能さえ付いていたらなーと思うこともありますよね。でもWordpressならテーマ内についていなくても、プラグインで導入できる機能があります。

ソーシャルシェアボタン

FacebookやTwitterなどのシェアボタンが利用できるテーマは多いですが、プラグインで入れることもできるので無くても大丈夫です。

シェアボタンを管理できるおすすめプラグイン

WP Social Bookmarking Light
数あるシェアボタンのプラグインの中でも公式のボタンを表示することができます。
Jetpack Sharing
WordPressを利用する上で便利な約30種もの機能をパックにしたもので、このプラグインを入れるだけでシェアボタンや関連記事の表示を追加することができます。

パンくずリスト

パンくずリストはユーザビリティやSEO対策でも重要な要素となります。パンくずリストが表示されるテーマは増えてきていますが、無くてもプラグインで追加することができます。

パンくずリストを管理できるおすすめプラグイン

Breadcrumb NavXT
このサイトでも使っていますが、このプラグインを入れるだけでパンくずリストを表示することができます。

記事下に配置する関連記事はサイト内の回遊率を上げるためにも重要な要素ですが、こちらもプラグインで導入することができます。

テーマではなくプラグインでコントロールした方が良いもの

上にあげたように、テーマ内に無くてもプラグインで追加できる機能がありますが、むしろプラグインで管理した方がいい機能もあります。

これらの機能がついているテーマでも、あえてその機能はプラグインで管理するとテーマ移行時に楽です。テーマ独自の機能を使う利便性と比べて利用するかどうか決めると良いでしょう。

ショートコード

テーマ内でショートコードが使えるととても便利ですが、そのテーマ独自のショートコードを利用していると、テーマ変更時に全て使えなくなります。

ショートコードは新しいテーマ変更の際に、以前のコードをコピペしてそのまま使える場合もありますが、著作権の関係で移行できないものもあるので、できればプラグインで管理したい機能になります。

ショートコードを管理できるおすすめプラグイン

Custom post-content shortcodes
フィルター設定や関連スコア設定などで細かく設定できるカスタマイズ性の高い関連記事表示のプラグインです。
Jetpack Related Posts
Jetpackをインストールするだけで細かい設定なしで自動で関連記事を表示することができます。

SEO

SEOに強いテーマを探している人も多いかと思いますが、基本的な構造がしっかりしているテーマを使えば、テーマの違いでそこまでSEOに違いが出るものでもありません。SEOに関してはテーマよりもコンテンツ内容の方がより重要になってきます。

しかし、メタタグやメタディスクリプションなどのSEOに関する設定をテーマ内で設定している場合、それらに対応していないテーマに変更する場合、テーマ変更時に設定が全部無くなってしまいます。

テーマ移行時に再度それらの設定を表示できるように調整することが必要になり大変ですので、できればSEOのコントロールは最初からプラグインを使って行った方が良いでしょう。プラグインを使うことにより、より細かな設定も可能になります。

SEOを管理できるおすすめプラグイン

All in One SEO Pack
SEOに関するあらゆる設定が可能なSEOに特化したWordPressプラグインです。
Yoast SEO
こちらもSEOに人気のプラグインです。どちらもおすすめですがインターフェースで選ぶといいでしょう。

カテゴリーページ

カテゴリーページは投稿ページの一覧が一般的なデザインですが、カテゴリーページを強化することにより、SEOが向上されサイトの評価も上げることができます。

ただし、カテゴリーページ設定が強化されているテーマは全体的には少ないので、これをメインにテーマを選択するのは得策ではありません。

こちらもプラグイン等である程度設定することができるので、テーマに依存しなくても良いでしょう。

カテゴリー投稿を管理できるおすすめプラグイン

Categories Images
カテゴリーごとに異なるアイキャッチ画像を表示することができるプラグイン。
No Category Base (WPML)
カテゴリーのページのURLから”category”の階層を外すことができる。

カスタムフィールド

カスタムフィールドとは、「タイトル」や「本文」などではなく、独自に定義した編集フィールドを追加できる機能のことです。カスタムフィールドをテーマ内で利用していると、テーマ変更時にこの部分の調整が必要になってしまいますので、カスタムフィールドはプラグインで管理したい機能になります。

カスタムフィールドを管理できるおすすめプラグイン

Advanced Custom Fields
カスタムフィールドを便利で使いやすくしてくれる。設定できる項目が多く、高性能で使いやすい。

カスタム投稿

カスタム投稿とはデフォルトである「投稿」や「ページ」などの投稿ではなく、独自に定義した投稿タイプを追加できる機能のことです。このカスタム投稿をテーマ内で設定していると、テーマ変更時に今まで使っていたカスタム投稿機能を新たに追加しなくてはいけなくなります。

独自の投稿ができるようにカスタム投稿を設定しているテーマがありますが、特別にサイトに合わせてカスタマイズをしているテーマでない限り、カスタム投稿はプラグインで管理するのがオススメです。

カスタム投稿を管理できるおすすめプラグイン

Custom Post Type UI
SEOに関するあらゆる設定が可能なSEOに特化したWordPressプラグインです。

機能をプラグインで管理するメリット・デメリット

WordPressではテーマはデザイン、機能はプラグインで管理することをオススメします。

プラグインで管理するメリット

テーマを変更しても設定が変わらない
テーマに付随してくる機能よりも細かい設定ができることがある
ネットに情報が多い

プラグインで管理するメリットは、テーマを変更しても設定が変わらないことです。ショートコードやカスタムフィールドなどはテーマを変更するとそのままでは使えなくなってしまいます。

他にも、All in One SEO Packのようにそれ専用のプラグインを利用することで、より細かな設定ができることがあります。直感的に操作ができることもメリットです。

また有名なプラグインはネット上で検索しても情報が多いので、わからないことを検索して調べることもできます。

プラグインで管理するデメリット

プラグインの入れすぎで重くなる
たまにプラグイン同士が競合してうまく動かないことがある
プラグインの管理＆更新

プラグインを入れすぎると読み込むファイルやコードが増えるためサイトが重くなります。プラグインは入れすぎないように気をつけながら必要なものだけ利用するようにしていきましょう。

他にもプラグイン同士の相性があるので、たまに該当のプラグインがうまく動かないことがあります。そんな時は同じような機能の違うプラグインに変更するなどの対処が必要になります。

またプラグインの数が多くなると管理も大変です。特にプラグインの更新は、数が多いと頻度も頻繁になってきますので、サイトの更新頻度が低い場合は特に気をつけておかなければなりません。

まとめ：テーマ選びは慎重に。

いずれテーマ変更をするかもしれないが今の段階では分からないというような人もいるでしょう。いずれにせよ、上記の内容は全て取り入れる必要は無いと思います。テーマ独自機能を使う利便性もあるので、比べてみて利用や管理のしやすさで決めると良いでしょう。

テーマはそうそう頻繁に変更しないと思いますが、いざ変更するとなった時に、手間を考えたらもう変更できないとなってしまわない為にも、出来るだけ変更時の負担を減らせるようにテーマ選びの際から考えて、慎重にテーマを選ぶようにしましょう。

The post WordPressでいずれテーマ変更をしたい人がテーマを選ぶ際の選び方と注意点 first appeared on AkuyDesign.

WordPressタグクラウドのタグの前に#を自動で表示させてインスタグラム風にする方法【CSS初心者】

AkuyDesign — Fri, 13 Dec 2019 06:43:18 +0000

WordPressでタグを使用していますか？タグ使用の是非に関しては色々ありますが、タグを上手く使うとサイトの利便性が高まったり、より詳細な記事の振り分けができて便利ですよね。しかし、無料テーマのものはデザインが若干ダサい場合も多いです。

そこで今回は、CSSだけでタグクラウドのデザインを整頓し、自動でタグの前に#を付ける方法をご紹介します。

タグクラウドとは

WordPressで記事を書いた際にタグを付けておくと、カテゴリーとは別に自動でタグページを作ってまとめてくれます。

このタグをトップページやサイドバーに表示させるには、通常はタグクラウドというウィジェットを使います。

タグクラウドの初期デザイン

タグクラウドでは、そのサイトで多く利用されているタグの文字が大きく、少ないタグは小さく表示され流ので、そのサイトがどんな事について書かれているかが一目でわかります。

初期のタグクラウドのデザイン

しかしこのタグクラウド、標準ではデザインがイマイチ！文字の大きさが揃っていないので、一気に乱雑な印象を与えてしまいます。

使用しているWordpressのテーマ（テンプレート）がタグクラウドのデザインに対応している場合は、もう少しマシな表示にはなりますが、この標準のデザインだと見た目に美しくないですよね。

タグクラウドのデザインを変更する

そこで、タグクラウドのデザインを変更します。タグというからには、インスタグラムみたいにタグの前に#が表示するとそれっぽく見えますよね！

ということで、今回はインスタグラムやTwitterなどのSNSのタグのように、タグの前に#を表示させることにします。

しかし、全てのタグの前に手動で#を付けるのは現実的ではないです。そこで、CSSでタグの前に自動で#を表示させるようにします。CSSで自動で表示をするから、タグ一つ一つに手動で#を付けるという間違ったことをせずに済みます。

タグクラウドのデザインCSS

タグクラウドをインスタグラム風にするにはCSSを追加するだけでOKです。

/* タグクラウド
********************/
.tag-cloud a,
.tag-cloud a:visited {
	font-size: 15px !important;
	color: #3d3d3d !important;/* リンクの色 */
	margin-right:5px;
}
.tag-cloud a::before{
	content: "#"
}
.tag-cloud a:hover{
	color:#ff0000;/* マウスオーバーの色 */
}

※マウスオーバーの色はお好みで変えることができます。

.tag-cloud の部分（class）はお使いのテーマによって変わってくるので、調べる必要があります。

タグクラウドのclassの調べ方

上記のCSSを追加しただけでは、テーマによってうまく表示されない場合もあると思います。その場合は、そのテーマに合わせて.tag-cloudの部分をお使いのテーマに該当するclassへ書き換えてください。

classの調べ方は、Google Chromeの検証機能（ウェブディベロッパー・ツール）を使います。

Google Chromeブラウザーにてウェブサイトを表示します。そしてタグクラウドの一番最初のタグの上でカーソルを右クリック→「検証」を選択します。

そこで一番最初のタグのすぐ上のclass名を確認します。

ここでは「tagcloud」というclassが確認できましたので、.tag-cloud を.tagcloudに変更します。

/* tag cloud
********************/
.tagcloud a,
.tagcloud a:visited {
	font-size: 15px !important;
	color: #3d3d3d !important;/* リンクの色 */
	margin-right:5px;
}
.tagcloud a::before{
	content: "#"
}
.tagcloud a:hover{
	color:#ff0000;/* マウスオーバーの色 */
}

ポイントは、タグのaタグを全体的に囲っているclassを探すこと。最初のタグの直上にclassが無い場合は、タグクラウド全体を囲っているclass（タイトルの上のclass）を選択してもOKです。（この例の場合はwidget_tag_cloud）

また、たまにテーマによってはclassではなくIDのみの場合があります。その場合はclass部分を.tag-cloudではなく#tag-cloudとする必要があります。

/* tag cloud
********************/
#tag-cloud a,
#tag-cloud a:visited {
	font-size: 15px !important;
	color: #3d3d3d !important;/* リンクの色 */
	margin-right:5px;
}
#tag-cloud a::before{
	content: "#"
}
#tag-cloud a:hover{
	color:#ff0000;/* マウスオーバーの色 */
}

あとは、テーマのデザインに合わせて微調整をすればOKです！リンクの色やマウスオーバーの色はサイトに合わせて変えてください。

ちなみにWordpressにおいてCSSの追加は、①親テーマCSSに記述、②子テーマCSSに記述、③追加CSSに記述の3種類があります。①の親テーマに記述は、アップデートの際に上書きされてしまうのでオススメしませんが、残りの2つはどちらでもお好きな方に記述して結構です。

タグクラウドに#が表示されました！

文字のサイズを均等にして、タグの前に#が自動で表示されるようになりました。

初心者の方だと、お使いのテーマのタグクラウドのclassを取得するのが若干難しいかもしれませんが、正しいclassさえ分かれば簡単にデザインを変更することができますよ。

ご質問等ありましたがコメント欄にお願いします。

The post WordPressタグクラウドのタグの前に#を自動で表示させてインスタグラム風にする方法【CSS初心者】 first appeared on AkuyDesign.

ニュースペーパーをイメージしたWordPress 有料テンプレート11選

AkuyDesign — Thu, 17 Oct 2019 05:41:59 +0000

WordPressは初心者でもテンプレートを利用すれば、しっかりとしたウェブサイトが作れます。今回はニュースサイトを作るにあたって、ニュースペーパー（新聞紙）をイメージする有料テンプレートを調べたのでご紹介します。

テンプレートのイメージはニュースペーパー（新聞紙）

最近のテンプレートは以前と違って、写真を効果的に使えるようなテンプレートが増えましたが、今回は写真使いよりも文字を多く表示できるかを基準としました。

イメージはウォール・ストリートジャーナル（The Wall Street Journal）やThe New York Timesです。

最近は日本語のWordpressのテンプレートも多くなってきましたが、日本語のテンプレートでイメージに近いものが少なかったので、ほとんど英語のテンプレートになります。

それに加え、ビジュアルエディタやページビルダーなどが搭載されているので、初心者でも簡単にカスタマイズが可能になっています。Nightモード（黒背景）、SEOフレンドリー、広告表示、選択＆シェア、文字リサイズ、読み込みバーなど、多機能なテンプレートです。

Popnews

デモ

詳細

こちらもJNewsのデモの一つ。ワンクリックでこのデモ（サンプルサイト）がインストールできます。

Fox Times

デモ

詳細

写真も効果的に使いたいならこちらのテンプレートがおすすめです。写真を大きく配置することができ、モダンでギャラリー感の強いデザインです。

このデザインはThe Foxというテンプレートのデモの一つです。The FoxはFox Times (New York Times), Fox Classic, Fox Science, Fox Fashion の4つのデモがあり、ワンクリックでインストールすることができます。

Advanced Newspaper

デモ

詳細

まとめ

WordPressのテーマ（テンプレート）は有料・無料構いませんが、有料テンプレートはデザインが美しいのはもちろん、カスタマイズ性が高く、デモをインストールしたらすぐ使えるようなものも多いので、すぐにサイトを始めたい人にはぴったりです。

今回はシンプルなニュースペーパーデザインのテンプレートをまとめました。自分がイメージするテンプレートに巡り会えると良いですね！

The post ニュースペーパーをイメージしたWordPress 有料テンプレート11選 first appeared on AkuyDesign.

無料SSL(https)が使えるWordPressにおすすめレンタルサーバー比較【2019年】

AkuyDesign — Fri, 27 Sep 2019 05:48:53 +0000

まだサイトのSSL化(https化)が済んでいませんか？何かよく分からないから後回しにしていて今まで来てしまったという人もいるかもしれません。

サイトでSSLを利用するには従来だと証明書の取得に費用がかかってくるので敷居が高いものでしたが、近年では無料で利用できるSSLが多くのレンタルサーバーで利用できるようになりました。

そこで今回は、無料のSSLが使えてWordpressにおすすめのレンタルサーバーを厳選してまとめました。

この記事がオススメな人

新しくサイトを開設するに当たって、最初からSSLで運営したいと思っている人
今あるサイトのサーバー移転の際にSSL化も考えている人

なぜSSLにする必要があるの？

セキュリティ対策

SSLとはサイトのデータを暗号化して通信する仕組みのことです。ウェブサイトを常時SSLにすると、サイト上で発生する通信が全て暗号化されるため、セキュリティが強化されます。

セキュリティ面で大事なのはわかったけど、普通のブログやサイトだけならSSLにする必要が無いと思っていませんか？実はSSLはセキュリティ面だけでなく、他にもメリットがあります。

SEOで検索上位表示に有利になる

サイトのSSL化はSEOにも重要だとGoogleが正式に発表しています。感覚的にはそこまで順位に影響があるものだとは思いませんが、例えば全く同じページがあったとしたら、httpのページよりもhttpsのページの方が上位に表示されるでしょう。

少しでも検索結果に優位になるのであれば、やらない理由が見つかりません。

ページ表示速度が速くなる

利用できる通信プロトコルはレンタルサーバーによって変わってきますが、HTTP/2プロトコルだと通信が高速化するので、SSL化したウェブサイトの表示速度が大幅に向上します。

SSLにすると具体的には何が変わるの？

では、実際にSSLにした時に具体的に何が変わるのでしょう？

URLの横に表示されるマークが鍵マークになる

SSL化されていないサイトはアドレスバーのURLの横に( i )マークが表示されています。しかしSSL後はアドレスバーに表示されるマークが鍵マークになります。

URLがhttpsになる

ウェブサイトをSSL化するとURLがhttpからhttpsに変わります。たった一文字変わるだけですが、URLが変わることで、SNSシェア数やRSSフィード数がリセットされるなどのデメリットもあります。

レンタルサーバーを選ぶ上で知っておきたいキーワード

共用SSLと独自SSLの違い

共用（共有）SSLとはサーバー会社のSSL証明書を複数のユーザーで使用します。サーバー会社が取得したSSL証明書を複数人で共有して使うため、無料〜数百円ほどの低コストで導入することができる反面、ドメインが変わったり、サイト運営元の信頼性をアピールできないなどのデメリットがあります。

独自SSLとは、自分が持っているドメインに対してSSL認証を行います。ウェブサイトの所有者が自身（個人or法人）の名義でSSL認証を発行することで、対象の独自ドメインを暗号化通信にすることができます。

独自ドメインをSSL化する場合は独自SSLを利用することになります。

HTTP/2とは

HTTP/2(Hypertext Transfer Protocol version 2)とは、複数のリクエストを並列して送信することができる新しい通信プロトコルです。画像やJavaScriptなどといったリッチなコンテンツが多いウェブサイトでも、通信速度がスムーズになり、ページの表示やレスポンスが速くなります。

つまり、HTTP/2だとSSL化したウェブサイトの表示速度が大幅に向上するということです。

クラウド型レンタルサーバーとは

クラウド型レンタルサーバーとはCloudLinux（クラウドリナックス）というOSを使った共有サーバーのことです。通常のレンタルサーバーと比べると簡単にリソースを増やすなど拡張しやすく、アカウント毎にサーバーリソースが確保されるので安定したパフォーマンスが期待できます。

ただし使った分課金されるされる従量課金なので、予想外のアクセス増加で高額な月額請求が来るリスクもあります。

SSD搭載サーバーとは

ウェブサイトやメールのデータを収容するディスクスペースに使用しているストレージにSSDを採用しているサーバーです。SSD（Solid State Drive）とは、従来のHDDよりも読み書きの速度が非常に速いという特徴があります。

SSDはHDDの約3〜30倍の速さと言われています。その反面、SSDはHDDに比べて値段が高いので、同程度の容量でも料金が高くなります。

オールSSD・ピュアSSD

全てのディスクスペースにSSDを採用しているということです。
レンタルサーバーでSSDを採用していると言っても、全てをSSDにするとそれだけコストもかかるので、データベース（DB）のみSSDにするなど部分的に採用していることがあるからです。

RAID10

RAID（Redundant Arrays of Inexpensive Disks）とは、複数のハードディスクを組み合わせて1台の仮想的なハードディスクとして認識させ、パフォーマンスや保護を向上させる技術のことです。RAID10では、高速化を実現するRAID0と耐障害性のあるRAID1を組み合わせることで、高速化と耐障害性の両方を実現しました。

PHP5・PHP7

PHPは人気の高いサーバースクリプト言語です。PHPは動的でインタラクティブなWebページを作成するための強力なツールであり、WordpressなどのCMSに広く使用されています。

PHP7は最新のバージョンで、PHP5と比べて2倍以上の実行速度およびメモリ使用量の低減など、機能面で大きく改善されました。（ちなみにPHP6はありません。）

マルチドメインとは

一つのサーバーで独自ドメインを複数設定できるサービスのことです。複数サイトを運営したり、複数のメールアドレスを作成することができます。

MySQLとは

WordPressのデータが格納されているデータベース（DB）。複数サイトを運営する場合はサイト1つに対して1つが理想的です。

無料で独自SSLが使えるおすすめのレンタルサーバー

ここではHTTP/2に対応している独自SSLを無料で利用できるレンタルサーバーを厳選して紹介します。厳選条件は以下の通りです。

独自SSLを無料で利用できる
WordPressが使える
月額費用が比較的安価
マルチドメイン・MySqlを複数利用できる
コントロールパネルが使いやすい
ネットに情報が多い

エックスサーバー

エックスサーバーは安定した実績で信頼できる老舗サーバーです。オールSSDでディスク容量も200GB〜と多いですし、コントロールパネルが使いやすい点もポイントが高いです。利用している人も多いため、ネットで検索しても情報が手に入りやすいです。

エックスサーバーの公式サイトを見る

wpX Speed

エックスサーバーにはWordPress専用クラウド型サーバーであるwpX Speedもあります。次世代の接続インターフェース「NVMe(エヌブイエムイー)」の採用で、WordPressサイトをキャッシュなしで10倍以上高速化。ピュアSSDより読み込み速度が16倍以上と、Wordpressの超高速を実現しました。

WordPress専用に最適化した超高速サーバーだから、WordPress運営で役立つ機能はもちろん、現時点（2019年9月）でWordPress表示速度が国内最速です。

wpX Speedの公式サイトを見る

mixhost（ミックスホスト）

2016年にサービスを開始したmixhostはピュアSSDのクラウド型サーバーです。クラウド型ですが月額880円（36ヶ月契約）でSSD150GBと容量は十分。

また、他のレンタルサーバーがLet's Encryptを採用している中、世界シェアNo1のcomodo社の独自SSLを採用しています。

mixhostの公式サイトを見る

ConoHa WING（このはウィング）

共有レンタルサーバーでは珍しい時間単位で利用できるクラウド型サーバーです。使った分だけ課金されるので、月の途中でサーバー移転をしても利用した分だけ払えばOK。

2018年9月にサービスを開始した比較的新しいレンタルサーバーですが、国内最速の処理速度と高性能なサーバーを月額最大1200円でレンタルできるとあって利用者が増えているサーバーです。

ConoHa WINGの公式サイトを見る

ロリポップ

WordPressが使えるサーバーが月額250円〜から利用できる老舗のレンタルサーバーです。サーバーのスペックはHDDと低いですが、Wordpressが使えるプランが低価格から始められるので、まずはとりあえず始めてみたい初心者や個人ブログの人にオススメです。

ロリポップ！公式サイトを見る

サーバーを選ぶ基準

ランニングコスト

サーバーレンタルにかかる月額費用や初期費用は一番最初に検討する項目かと思います。安ければ良いわけではないですし、高いからと言ってサーバーの機能が高いわけではありません。自分に必要な機能が備わっているかが重要です。

長期契約で割引になるプランを用意しているサーバー会社は多いので、長く使う場合は長期で契約するとコストを抑えることができます。

サーバーのディスク容量と処理速度

WordPressはデータベースを使用するので、相応のディスク容量と処理能力が必要になってきます。特にサイトを長期運営する予定の場合、画像や記事が増えていくのでディスク容量を圧迫してしまいますので、ある程度容量があるサーバー（プラン）を選ぶと良いです。

最初は安価なサーバーもしくは一番下位のプランを使用する場合でも、今後アクセスが増えたりディスク使用量が増えた際に、簡単に上位プランへ移行できるか、または簡単にリソースを増やすことができるかも大きなポイントです。

マルチドメインやMySQLが複数使えるか

特に複数サイトを運営したいのならマルチドメインやデータベースであるMySQLが複数利用できるかどうかも重要です。

運営サポート機能の充実

WordPress自動インストールがあるか、またはWordPress簡単移行（もしくはWordPress移行代行）があるかは特に初心者には重要な項目ではないでしょうか。

さらに、バックアップ機能があるか、その場合は値段はいくらか、サーバーによってはアクセス解析が使えたり、ウェブフォントの設定が可能などの機能があります。

セキュリティ対策

WordPressは世界中で多くのユーザーに使用されている分、攻撃に合うリスクが高くなります。レンタルサーバーのセキュリティ対策には、主に下記の3つがあります。

国外IPアドレスからのアクセス制限
国外IPアドレスからのコメント・トラックバック制限
ログイン施行回数制限

サポート体制

メールだけでなく電話サポートがあると嬉しいです。特に商用で利用している場合、サーバーダウンが機会損失に繋がるため短時間の不具合でも大打撃となる場合もあります。さらに初心者も電話サポートがあると安心です。

各サーバーのスペックまとめ表　※2019年9月時点

各サーバーのスペックを表にまとめました。
※一番下位のプランを表示しています。

	エックスサーバー	wpX Speed	mixhost	ConoHa WING	ロリポップ
SSLブランド名	Let's Encrypt	Let's Encrypt	comodo	Let's Encrypt	Let's Encrypt
月額	900円(税抜)	2円/時最大1,200円	880円(税抜) ※36ヶ月契約	2円/時最大1,200円	250円〜
初期費用	3000円(税抜)	無料	無料	無料	1,500円(税抜)
独自SSL	無料（HTTP/2）	無料（HTTP/2）	無料（HTTP/2&QUIC）	無料（HTTP/2）	無料
SSL発行速度	即時～1日	即時(サイトへの設定反映に最大15分)	24〜72時間程度	即日発行	–
Webサーバー	nginx	オールフラッシュNVMe	LiteSpeed	Apache + nginx	LiteSpeed
ディスク種類	オールSSD RAID10	オールフラッシュNVMe RAID10	ピュアSSD RAID10	オールSSD RAID10	HDD
ディスク容量	200GB	200GB	150GB	200GB	50GB
MySQL	50個	無制限	無制限	60個（1GB/個）	1個
マルチドメイン	無制限	無制限	無制限	無制限	50
サブドメイン	無制限	無制限	無制限	無制限	ドメイン毎に300
転送量	70GB/日	2.5TB/月	2TB/月	2.5TB/月	60GB/日
プラン変更	◯（翌月1日反映）	◯	◯（即時）	○	○ ※ハイスピードプランを除く
自動バックアップ	◯（14日分バックアップ/復元は有料）	◯（7日分バックアップ）	◯（14日分バックアップ）	◯（14日分バックアップ）	×（有料：月額300円）エンタープライズプランは無料
WordPress簡単インストール	◯	◯	◯	◯	◯
WordPress簡単移行	◯	◯	×	○	×
WordPress専用キャッシュ	×	◯	◯	–	◯
WordPress移行代行	×	×	◯（9,800円）	◯（6,980円）	×
アダルトサイト	×	×	◯	×	×
Webフォント	◯（モリサワWebフォント）	◯（モリサワWebフォント）	×	◯（モリサワWebフォント）	×
メールアカウント	無制限	無制限	無制限	無制限	無制限
メールマガジン	◯	–	–	–	–
サポート	電話・メール	電話・メール	メール	電話・メール・チャット	メール・チャット
無料お試し期間	10日間	なし	10日間	なし	10日間

まとめ：結局どのサーバーを選べばいいの？

総合的に見て、私が一番オススメするのがMixHostです。月額880円で高速なSSDドライブが使え、マルチドメインやMySQLが無制限に使えるなど充実しています。しかも初期費用無料。SSLも唯一comodo社のものを使えるのもポイントが高いです。

次にオススメなのがエックスサーバーです。さすがの老舗で安定稼働。ネットに情報も多いので、初心者に特にオススメです。サポートも電話とメールで対応してくれて安心して利用することができます。

エックスサーバーは初期費用半額キャンペーン中です（10/10 18:00まで）。

個人のブログや趣味のサイトを運営するなら、月額費用が安価なロリポップ！がオススメです。初心者が低価格から始められます。

速度を一番に重視するならwpX SpeedかConoHa WINGでしょうか。どちらもお試し期間が無いのが残念ですが、キャンペーンなどを活用するとお得に利用できます。

ただ今、

wpX Speedはリニューアル記念で3,000円クーポンがもらえます（10/24 18:00まで）。
ConoHa WINGは1周年記念キャンペーンとしてドメイン取得・移管が無料です（10月31日 18:00まで）。

自分が運営するサイトの方向性によってレンタルサーバーを選びましょう。

The post 無料SSL(https)が使えるWordPressにおすすめレンタルサーバー比較【2019年】 first appeared on AkuyDesign.

wordpressの固定ページでタグを表示する（さらにタグアーカイブで表示する）方法2つ

AkuyDesign — Tue, 17 Jul 2018 06:01:03 +0000

wordpressでは通常、固定ページではタグが表示されません。
固定ページでもタグ表示をさせるには、functionsに下記を追加します。

//固定ページにタグを設定
 function add_tag_to_page() {
 register_taxonomy_for_object_type('post_tag', 'page');}
add_action('init', 'add_tag_to_page');

//タグアーカイブに固定ページを含める
function add_page_to_tag_archive( $obj ) {
	if ( is_tag() ) {
		$obj->query_vars['post_type'] = array( 'post', 'page' );
	}
}
add_action( 'pre_get_posts', 'add_page_to_tag_archive' );

参考：かちびと.net
しかし私の場合、このコードではなぜがページのトップメニューの表示がおかしくなります。
使っているテーマにもよると思いますが・・・。

いろいろ確認してみたのですが、なかなか解決せず。
さらに他にも調べてみると、英語のサイトで見つけたコードで解決しました。
//固定ページにタグを設定
 function add_tag_to_page() {
 register_taxonomy_for_object_type('post_tag', 'page');}
add_action('init', 'add_tag_to_page');

// タグアーカイブに固定ページを含める
function tags_archives($wp_query) {
	if ( $wp_query->get('tag') )
		$wp_query->set('post_type', 'any');}
add_action('pre_get_posts', 'tags_archives');

参考：WordPress › Support » Tags for Pages
固定ページにタグを設定するコードは同じですが、タグアーカイブに固定ページを含める際のpost_typeがanyになっています。
最初のコードでエラーが出たり、表示がおかしくなるなどの場合は、こちらを試してみるといいかもしれません。

The post wordpressの固定ページでタグを表示する（さらにタグアーカイブで表示する）方法2つ first appeared on AkuyDesign.