Image

WordPress

【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法
4年 ago

【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法

今回は、2015年末に公開されたWordpressの最新デフォルトテーマの「Twenty Sixteen」のカスタマイズTIPSです。

企業サイトや、ちょっと見た目の良いサイトではトップページ上部にスライドショーや大きなアイキャッチ画像が配置されています。

これによってページが目を引いたり、伝えたいことが一目で伝わったりします。

「Twenty Sixteen」ではデフォルトでヘッダーに画像を挿入する方法が最初に実装されています。

今回はこの方法と、プラグインを使用したスライドショー挿入方法の両者をお伝えします。

ご自身のサイトに合った方法でカスタマイズしてみてください。

 

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は? 【Twenty Sixteenカスタマイズ】フォントを変更する方法 【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法 【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ(段落)を装飾する方法

 

「Twenty Sixteen」デフォルト機能を利用したトップ画像配置

デフォルト機能で追加するトップ画像は、管理や差し替えが非常に簡単というメリットがありますが、一方で画像にリンクが張れず、またスライドショーにはならないというデメリットがあります。

慣れないうちはとりあえずこれでやってみるのもよいでしょう。

「外観」>「ヘッダー」を開きます。

そこで出てくるメニューより、「ヘッダー画像」を選択してください。「新規画像を追加」よりヘッダー画像をアップロードします。

おすすめサイズとして1200px×280pxが勧められますが、縦幅は280px以上でも問題ありません。横幅は1200px以下のものにすると荒くなってしまうので1200pxにしたほうが良いでしょう。

ここでは例として1200px×350pxの画像を入れてみます。


Read More

【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法
4年 ago

【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法

今回は、2015年末に公開されたWordpressの最新デフォルトテーマの「Twenty Sixteen」のカスタマイズTIPSです。

WordPressはブログ作成用のオープンソースですが、企業サイトを管理するCMS(Contents Management System:コンテンツ管理システム)としても多く利用されています。

数多くのプラグインが用意されており、簡単にホームページを作成できるといった点でも非常に有用です。

しかし、インストールしたままだとただのブログサイトっぽい見た目になってしまいます。

そこで、今回はWordpressのデフォルトテーマの「Twenty Sixteen」でロゴを配置する・メニューを作成するカスタマイズ方法をお伝えします。

 

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は? 【Twenty Sixteenカスタマイズ】フォントを変更する方法 【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法 【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ(段落)を装飾する方法

 

メニューを作成する

まずは企業サイトっぽく、ヘッダーのメニューを作成します。

「外観」>「メニュー」より、新規メニューを作成します。

各コンテンツを用意する「固定ページ」があればそれでよいのですが、まだない場合はとりあえず「カスタムリンク」で作成してみましょう。

「カスタムリンク」のURLに「#」と入力すればとりあえずメニュー項目を作成できます。(リンクは機能しませんが。暫定処置です)

とりあえず入力してみたものがこちら。下部メニュー設定の「メインメニュー」にチェックするのを忘れないようにしてください。

設定が終わったら右上の「メニューを保存」をクリックしてください。


Read More

【Twenty Sixteenカスタマイズ】フォントを変更する方法
4年 ago

【Twenty Sixteenカスタマイズ】フォントを変更する方法

今回は、2015年末に公開されたWordpressの最新デフォルトテーマの「Twenty Sixteen」のカスタマイズTIPSです。

「Twenty Sixteen」に限らず、Wordpressのデフォルトテーマや海外無料テーマなどは、カスタマイズしないとフォントが明朝体になってしまいます。

タイトルなどに使われているゴシック文字と混じってしまい、統一感がない、、全部ゴシックで統一したい、、

WordPressカスタマイズで誰しも最初に通る道だと思います。

今回は、一通りのフォントカスタマイズについてお伝えします。

 

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は? 【Twenty Sixteenカスタマイズ】フォントを変更する方法 【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法 【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法 【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ(段落)を装飾する方法 【Twenty Sixteenカスタマイズ】コピーライト表記を書き換える方法 【Twenty Sixteenカスタマイズ】トップに戻るボタンを追加する サイト公開前に必ず見てほしい、WordPressパーマリンク設定の基本

style.cssのfont-familyを編集する

「外観」>「テーマの編集」より、style.cssを開きます。特に設定していなければ、「テーマの編集」を開けばstyle.cssが出ます。

開いたら、このボックスの中にある文章を適当なエディタへコピペしましょう。


Read More

WordPressでGoogleAnalyticsをプラグインなしで埋め込む方法
4年 ago

WordPressでGoogleAnalyticsをプラグインなしで埋め込む方法

さて、もはやこのブログをご覧になっている人であれば説明の必要がないと思う、もっとも有名なウェブサイト解析ツール「GoogleAnalytics」ですが、今回はWordpressにプラグインを使わずにGoogleAnalyticsを設定する方法をお伝えしたいと思います。

やり方自体は非常に簡単で、ものの数分あれば完了すると思います。

ところで、このGoogleAnalytics無料のツールだと思われがちですが、プロパティあたり1000万を超えると有料になるらしいですね・・・知りませんでした。

まぁ1000万PVもあればもはや有料プランの料金を支払うのも訳ないと思いますが・・・。

 

なぜプラグインを使わず、直接導入する必要があるのか

必ずしも、プラグインを使わないほうが良い、という訳ではありません。

しかし、プラグインを使わずに直接記述することで、以下のようなメリットがあります。

・ プラグインが削減され、コードが短くなる

微々たる差ではあるのかもしれませんが、コードの短さや簡潔さは検索順位に影響します。

少しでもコードを簡潔にし、SEOを追及する場合はプラグインではなく、直接記述のほうが良いでしょう。

・ 一部のテーマではGoogleAnalyticsプラグインが適正に機能しない

GoogleAnalyticsのプラグインは、一部のテーマで正しく機能しません。いくつかの無料・有料テーマでそのような事象を確認しています。

これはほかのプラグインと競合して影響してしまっているからなのですが、その場合は面倒でも直接記述する必要があります。

・ プラグインがアップデートしなかった場合のリスクを回避できる

これは以前に、GoogleAnalyticsがユニバーサルアナリティクスという現在の形態にアップグレードしたときに確認されたのですが、一部のプラグインがGoogleAnalyticsのアップグレードに対応していなかったため、トラッキングできないことが起きていました。

手動で設置することでこのような事態に柔軟に対応できます。

 

まずはトラッキングコードを入手する

すでにコードをお持ちの方は必要ありません。

GoogleAnalyticsへログインし、アカウント>アナリティクス設定>プロパティ内 トラッキングコードを開きます。

ここにトラッキングコードがありますので、これをコピーペーストして下さい。

メモ帳などを別に開いて、一度そちらに張り付けておくのがいいと思います。

 


Read More

WordPressで画像をクリックしたとき自動的にサイズ調整してポップアップさせる方法
4年 ago

WordPressで画像をクリックしたとき自動的にサイズ調整してポップアップさせる方法

画像をクリックしたときに、きれいに画像がポップアップして画面に表示されるページがあると思います。

WordPressでブログなどを運用していると、やはり挿入した画像はきれいに見せたいもの。

それなのに。

画像をクリックしたときに、別のタブが開いてしまう・・・

ポップアップはするんだけど、そのサイズが安定しなくて画面のサイズ以上に広がってしまう・・・

いちいち画像のサイズを小さくしてアップロードするのはめんどくさい・・・

今回はそんなお悩みに対するTIPSです。

 

Lightboxの仕組みを利用する

Lightboxとは、ウェブサイト上で画像のサムネイルをクリックしたときに、サイト上にポップアップで浮かんでくる機能の事です。

Javascript、CSSを利用しています。

複数の画像をグループ化して、スライドギャラリーのように見せることも可能です。

最近では結構見かけることも多くなった、このLightbox。Wordpressならプラグインでサクッと導入できるためおすすめです。

一方、パソコンでは非常に見やすいLightboxですが、スマホの場合あまり表示サイズが変わらない割に操作性を侵害することがあるので、スマホサイトに導入する場合は要注意です。

画像を多く見せたいギャラリーページや、商品の詳細を見せるページなど目的を絞って導入するのが良いでしょう。

 

現在お使いのテーマがLightbox標準対応か調べる

Lightbox系のプラグインは複数インストールするとお互いが干渉しあい、変な表示になることがあります。

市販されているテーマや、高機能テーマをお使いで、初期状態でLightboxが使われている場合は、新しくLightboxプラグインを入れることで変になってしまうことがあります。

今お使いのテーマにLightboxが使われていないかどうか、あらかじめご確認ください。

 

最初にすべき、「画像リンク」の設定

WordPressで画像をアップロードした際に指定する、「添付ファイルの表示設定」を忘れずに指定してください。

リンク先の部分を「メディアファイル」に指定すると、クリック時に画像ファイルが開くようになります。

この時に、Lightboxの設定をしていないと、直接タブが開き画像ファイルだけが表示されているページに飛びます。

 

WP jQuery …
Read More