【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

WordPressを使うなら絶対に覚えたい3つのカスタマイズ法

WordPressを使うなら絶対に覚えたい3つのカスタマイズ法

medium_2913018697

こんにちは、ロックウェーブの岡本です。

Googleから「SEOを気にせず、コンテンツに集中できるツールである」と評価されているWordPress。

デザインについては公開サれているテーマファイルを利用される方が大多数だと思いますが、それでも「ちょっとしたところ」をカスタマイズしたくなるのが心情です。

そこで今回はWordPressが自動で出力してくれる7つのクラス値を利用したカスタマイズ法を3つ紹介したいと思います。

紹介されているクラス値を利用してCSSを変更するだけでOKな簡単カスタマイズを是非実践してみて下さい!

カスタマイズ法一覧

どのページを見ているかをわかりやすくする

使用するクラス値: current-menu-item

このブログでもTOPのタブに実装させているこの仕組み。
WordPressでは「クラス名」さえ知っていれば簡単に実装することができます。

グローバルナビのソースを見てみると、選択されているページのli部分に「current-menu-item」というクラス値が追加されているのがわかります。

current-menu-item

この機能は「外観>メニュー」から作成されたグローバルナビであれば、ほぼ間違いなく追加される様になっています。
ですので後はCSSで選択中のナビゲーションのスタイルを新しく設定するだけでOKです。

設定完了!

これでグローバルナビ内で、「今どのページが見られているか」をわかりやすく表示させることができます。

Function Reference/wp nav menu « WordPress Codex

投稿した画像のスタイルを編集する

使用するクラス値: aligncenter / alignleft / alignright / alignnone / wp-caption / wp-caption-text

WordPressはデフォルトで投稿した画像に一定のスタイルが付くようになっています。
そしてここでも「クラス値」を利用することで、簡単に記事の画像スタイルを編集することが可能になります。

投稿画像に使用されるクラス値は、「メディアを追加」をクリックすると表示される「メディアを挿入」の右下で選択することができます。

スクリーンショット_092413_031849_PM

使えるクラス値と「配置」は以下のような関係です。

.aligncenter 中央
.alignleft
.alignright
.alignnone なし

この他に「キャプション」を利用した際に生成される「.wp-caption」「.wp-caption-text」というクラス値もあります。
この2クラスと画像は下の画像のように「.wp-caption」の子要素に画像と「.wp-caption-text」が配置される関係になります。

wp-caption

画像の配置の調整は「.align」系のクラス値を、画像の装飾関係の調整は「.wp-caption」系のクラス値を利用することでCSSでのカスタマイズができるようになります。

サイドバーウィジェットをカスタマイズする

使用するクラス値: widget / widget_text

サイドバーのコンテンツは「外観>ウィジェット」を利用して追加・編集するやり方が一般的です。
そしてこの「ウィジェット」を利用した場合、こちらもオリジナルのクラス値を自動で出力するようになっています。

「ウィジェット」で生成されるクラス値は「.widget」と「.widget_text」の2種類です。

widget

この2つのクラス値にCSSを適用しているテーマは意外と少ないので、サイドバーのコンテンツをカスタマイズする際には積極的に使用したいクラス値でもあります。

最後に

WordPressでデフォルトで出力されるクラス値を紹介してまいりましたが、最後に注意点を1つ。
WordPressのプログラムはカスタマイズ性が非常に高いため、生成されるクラス値も自在に書き換えることができます。

このため公開されているテーマファイルを利用した場合、今回紹介したようなクラス値が出力されない場合もあります。

この場合はphpファイルあるいは「ChromeDeveloperTools」「firebug」などを利用して生成されているクラス値を直接確認することになりますので、ご注意下さい。

photo credit: Peregrino Will Reign via photopin cc

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+