ネットで検索をすると、素敵な装飾をしたサイトがたくさん表示されます。おしゃれな見出し設定やプロ仕様の写真が挿入されていると、見やすくなり、目を引きます。こんな装飾をしてみたいと思っても、素人の自分にできないとあきらめてしまう人もいるかもしれません。一見、難しそうに見える装飾も、プラグインを導入することで直感的に装飾することができます。この記事では、CSSの知識がない人でもWordPressのページを装飾できる方法を紹介します。
目次
ページの装飾にCSSの知識は必要？
WordPressでページを装飾する方法は2つあります。1つがCSSからコーディングしてページを装飾する方法です。CSSとは「Cascading Style Sheets」の略で、スタイルシートとも呼ばれています。Webサイトは、文書構造を作るHTMLと、デザインやレイアウトなどの装飾をするCSSから作られています。そのため、装飾をしたい場合にはCSSを編集する必要があるのです。具体的な方法としては、CSSファイルを作成したあと、HTML形式のファイルの＜head＞＜/head＞内に＜link rel=”stylesheet” href=”style.css”＞と記述してCSSファイルを適用させます。そして、幅や配色などの装飾内容をCSSファイルにコーディングしていきます。
このように、コーディングするには、ある程度のCSSの知識がないと難しいでしょう。そのため、この方法は初心者にはハードルが高くなります。しかし、ここであきらめる必要はありません。WordPressでページを装飾する方法はもう1つあります。それは、プラグインを利用する方法です。プラグインを利用することで、手軽にページの装飾が行えます。プラグインを導入すると複雑なコードを記述する必要がなく、ボタンをクリックするだけで見出しや画像などを挿入することができるのです。そのため、初心者のみならず、コーディングの知識がある人も、プラグインを導入して効率よくサイトの構築を行っています。
【おすすめプラグイン】1.Visual CSS Style Editor
WordPressでページを装飾するのにおすすめのプラグインを8つ紹介します。1つ目が、Visual CSS Style Editorです。Visual CSS Style Editorは、コーディングをしなくてもページやテーマをカスタマイズできるプラグインになります。文字の色やフォント、サイズや位置などを自由に編集することが可能です。また、50以上のスタイルプロパティを持つので、さまざまな装飾に対応しています。Visual CSS Style Editorは、WordPress管理画面から「プラグイン」の「新規追加」を選択し、「YellowPencil」または「Visual CSS Style Editor」を検索して、インストールすることができます。そして、プラグインを有効にしましょう。
すると、「Edit With YellowPencil」というボタンがページ内に表示されるようになります。ここをクリックして、編集したい箇所を選択します。そして、装飾の内容を決定し、保存をするだけで装飾が可能です。テーマへの影響が気になる人もいるかもしれませんが、このVisual CSS Style Editorはテーマファイルを編集しません。もし、元に戻したいと思ったときには、プラグインを停止すればこのスタイルは解除されるので、安心して導入できるでしょう。
【おすすめプラグイン】2.Shortcodes Ultimate
2つ目に紹介するプラグインは、「Shortcodes Ultimate」です。Shortcodes Ultimateは、50以上の豊富なデザインパーツで記事の装飾を行うプラグインになります。このプラグインでは、ショートコードを利用して記事の装飾ができるので、操作も非常に簡単です。Shortcodes Ultimateをインストールして有効化すると、記事の編集を行うエディタの上部に、ショートコードの挿入ボタンが表示されます。このボタンを押すだけで、ショートコードが記事に挿入されるのです。そのため、コードを記述する必要がなく、効率的に作業を進めることができます。また、テキストリンク用のボタンはカスタマイズ可能です。目的や好みに合わせて設定してみましょう。
Shortcodes Ultimateは、WordPress管理画面から「プラグイン」を選択し、「新規追加」をクリックしたあと、「Shortcodes Ultimate」で検索してインストールすることができます。このプラグインの最大の魅力は、デザイン性です。いくら有益な情報があったとしても、文字ばかりで抑揚のないサイトは、読む気がしない人も多いでしょう。そのため、見やすさやデザイン性はサイトを運営するうえで非常に重要です。Shortcodes Ultimateを活用し、ユーザーの興味を引くようなサイトを作りましょう。
【おすすめプラグイン】3.Smart Slider 3
3つ目に紹介するプラグインは、「Smart Slider 3」です。Smart Slider 3は、コンテンツスライダーの機能を拡張できるプラグインになります。コンテンツスライダーとは、大きなバナー画像をスライドして表示する機能です。コンテンツスライダーは通常トップ画面に表示させ、ユーザーにアピールしたい情報や記事を載せるときに利用されます。コンテンツスライダーは、「スライダー」「カルーセル」とも呼ばれています。Smart Slider 3は、このスライダーにバナー画像やテキスト、リンクなどを設置し、一定間隔で切り替わる設定が可能です。スライダー上にレイヤーを複数重ねて自由にレイアウトを編集することができます。スライダーを表示する位置は、ショートコードもしくはPHPコードを記述して指定します。
さらに、管理画面の機能性も高く、柔軟にスライダーをカスタマイズすることが可能です。また、レスポンシブWebデザインに対応しているため、スマートフォンやタブレットからのアクセスにも自動的に表示内容を最適化してくれます。Smart Slider 3は、WordPress管理画面から「プラグイン」を選択し、「新規追加」をクリックしたあと、「Smart Slider 3」で検索してインストールすることができます。Smart Slider 3を導入することにより、高性能なスライダーを表示させることができるので、ユーザーに大きくアピールしたい情報がある場合には非常に有効的です。
【おすすめプラグイン】4.Meta Slider
4つ目に紹介するプラグインは、「Meta Slider」です。Meta Sliderも、Smart Slider 3と同様にコンテンツスライダーを設置することができるプラグインになります。Meta Sliderの特徴は、操作が簡単だということです。管理画面がとてもシンプルなため、使いやすくなっています。初めてスライダーを導入する人は、Smart Slider 3よりもMeta Sliderのほうがスムーズに設置できるかもしれません。また、1つのプラグインで、Coin SliderとNivo Slider、Flex Slider、Responsive Slidesの4種類のスライダー機能が利用できます。数カ所に違うスライダーを設置したい場合には、プラグインが1つで済むので便利です。
Meta Sliderは、WordPress管理画面から「プラグイン」を選択し、「新規追加」をクリックしたあと、「Meta Slider」で検索してインストールすることができます。Meta Sliderには無料版と有料版がありますが、無料版でもその機能を十分に果たすことが可能です。機能が制限された無料版でもスライドのサイズやエフェクトの設定を行うことができます。記事に合わせて細かく設定することができるので、どんなレイアウトにも柔軟に対応できるのが、多くの人に選ばれている理由の1つでしょう。また、スライド毎にURLを設定することも可能です。
【おすすめプラグイン】5.Responsive Full Width Background Slider
5つ目に紹介するプラグインは、「Responsive Full Width Background Slider」です。Responsive Full Width Background Sliderもスライダーを表示させるプラグインですが、このスライダーはバナーではなく、背景画像のスライダーになります。つまり、全画面表示で背景画像のスライダーを表示させることができるのです。企業のホームページでトップ画像にこのような全画面に広がるスライダーを表示させているサイトを見たことがある人も多いでしょう。全画面に広がって表示されるスライダーは大きなインパクトがあります。よって、ユーザーの印象にも残りやすくなるでしょう。
Responsive Full Width Background Sliderは、WordPress管理画面から「プラグイン」を選択し、「新規追加」をクリックしたあと、「Responsive Full Width Background Slider」で検索してインストールすることができます。Responsive Full Width Background Sliderでスライダーを作成すると、自動的に画面の表示幅に合わせて背景画像が表示されます。また、この背景画像は一定間隔で切り替わるように設定することが可能です。大きく動く画像や情報は、どうしても目で追いかけてしまいます。この部分に、ユーザーに対して最もアピールしたい内容を表示させるように設定するといいでしょう。
【おすすめプラグイン】6.Pixabay Images
6つ目に紹介するプラグインは、「Pixabay Images」です。Pixabay Imagesは、クリップアート素材やパブリックドメイン扱いの写真素材を無料で利用できるプラグインになります。商用・非商用の制限はなく、全ての画像素材を無料で利用できることが大きな特徴です。このPixabay Imagesは、クリップアート素材やパブリックドメイン扱いの写真素材を無料できるサイト「Pixabay」のプラグイン版になります。Pixabayの画像をプラグインで簡単に挿入することができるのでとても便利です。画像の有無は、見やすいサイト作りに大きな影響を与えます。文字ばかりで、写真や画像のない記事だと、読み側も飽きてきてしまうでしょう。
Pixabay Imagesは、WordPress管理画面から「プラグイン」を選択し、「新規追加」をクリックしたあと、「Pixabay Images」で検索してインストールすることができます。画像を挿入することで視覚的にどんな内容の記事かを訴えかけることも可能です。一目でどんな内容について書かれているか想像できると、記事への期待感も高まります。オリジナルの画像や写真があれば、それを挿入すれば効果的です。しかし、人の画像や個人情報が含まれる画像の場合、不特定多数の人に発信するインターネット上では、避けなければならないケースもあります。そんなときに、Pixabay Imagesを利用すると便利です。また、無料でも良質な写真素材が多く、さまざまな記事に挿入することができます。日本語検索に対応しているので、豊富な写真素材のなかから、簡単に目的の画像を探しだすことができるでしょう。
【おすすめプラグイン】7.WP SVG Icons
7つ目に紹介するプラグインは、「WP SVG Icons」です。WP SVG Iconsは、490種類以上のアイコンフォントを利用できるプラグインです。さらに、カスタムアイコンをインポートして使用することもできます。WP SVG Iconsは、WordPress管理画面から「プラグイン」を選択し、「新規追加」をクリックしたあと、「WP SVG Icons」で検索してインストールすることができます。操作方法はとても簡単です。WP SVG Iconsをインストールして有効化すると、記事編集画面とプラグインの管理画面にアイコン一覧が現れます。そのアイコンを選ぶと、アイコンのプレビューとショートコードが表示されるので、そのショートコードを記事に貼り付けることで利用できるようになります。
シンプルな動作ですが、アイコンの力は絶大です。アイコンがあるだけでも、サイトが見やすくなり、ユーザーの印象にも残ります。例えば、虫眼鏡のアイコンを挿入すると、「検索する場所かな」と瞬時にユーザーに判断してもらうことが可能です。また、「入力する」「タグ付けする」と文字だけでリンクを作るよりも、鉛筆マークやタグのマークのアイコンと一緒に表示させたほうが見やすくなります。このように、アイコンは視覚的な情報からユーザーにアプローチすることができるので、WP SVG Iconsを利用して導入してみるといいでしょう。
【おすすめプラグイン】8.Menu Image
8つ目に紹介するプラグインは、「Menu Image」です。Menu Imageも、WP SVG Iconsと同じようにアイコン画像を挿入することができるプラグインです。WP SVG Iconsと異なる点は、アイコンを追加できる場所です。Menu Imageは、サイトのページ上部のグローバルメニューにアイコン画像を追加することができます。また、通常時とマウスオーバー時の画像を2枚登録することも可能です。文字だけのグローバルメニューにアイコン画像を追加することで、メニューの内容をわかりやすく表示させることができます。ラベルの内容に合ったアイコン画像を選択すると、ユーザーに対して視覚的にアピールできるでしょう。
Menu Imageは、WordPress管理画面から「プラグイン」を選択し、「新規追加」をクリックしたあと、「Menu Image」で検索してインストールすることができます。Menu Imageでは、登録するアイコンの画像サイズも選択可能です。「24×24ピクセル」「 36×36ピクセル」「 48×48ピクセル」から選べます。GIFやPNG形式の背景を透過した画像を使用すると、支障がなく表示されるでしょう。もし、使用できるアイコン画像がない場合は、無料のアイコン素材を扱うサイトから画像を利用する方法もあります。
まとめ
WordPressの装飾は、CSSのコーディングの知識がなくても、プラグインを使って簡単に導入することができます。サイトを直感的に装飾できると、時間や労力も削減できるので効率的です。サイトに合ったプラグインを導入して、見やすくて魅力的なサイトを構築しましょう。
コメントを残す