カテゴリー: HP製作

【ワードプレス】HPなどの問い合わせフォームの設置方法

ネットショップを作ったり、募集サイトを作った際にお問い合わせフォームを作成したいと思ったことはありませんか？
またお問い合わせを一覧で管理するのも大変です。今回は問い合わせから管理まで無料でできるツールのご紹介です。 続きを読む 【ワードプレス】HPなどの問い合わせフォームの設置方法

【HP制作】検索結果に写真・画像表示

検索結果に顔写真が表示されるのを最近よく見かけるようになりましたね。

まずはGoogle+にプロフィール画像を登録してグーグルバッジを取得します。

グーグルバッジの取得方法はこちらのページで紹介していますので参考にしてください。
google+のバッジ作成ページはこちらです。
タグをコピーして、自分のサイトに掲載します。
以下のようなものがバッジです。




サイト内であれば場所はどこでも大丈夫です。

次にGoogle+のプロフィールを編集します

Google+のプロフィール部分から「基本情報」を選択します。

基本情報の編集でリンクの部分にある「寄稿先」で「編集」を選択します。

そこに自身のHPんのURLを記載すればリンク完了です。
1週間ほどで名前や顔写真が表示されるようになります。
顔写真のみや名前のみを表示させることも可能です。

※画像は顔写真でないと検索結果に表示されないことがあるので気をつけましょう。

【ワードプレス】SEOプラグインAll in One SEO Packの設定方法

Webの世界ではコンテンツマーケティングの時代と言われ、良い記事を書けば検索エンジンで評価されるようになりました。ところで、あなたの書いた記事は検索エンジンで上位表示されていますか？もし、思うように上位表示されてない方は是非お試しください。 続きを読む 【ワードプレス】SEOプラグインAll in One SEO Packの設定方法

【プラグイン】Q2W3 Fixed WidgetでSNSボックスを簡単作成

Q2W3 Fixed Widgetというとても便利なプラグインをご紹介します。

プラグインの追加方法

管理画面から「Q2W3 Fixed Widget」を検索してインストールします。
Fixed Widget Optionsから細かい設定が可能ですが、初期設定のままで問題ないと思います。

インストールが完了すると、ヴィジェットに「Fixed widget」という項目が表示されます。
SnapCrab_NoName_2014-7-13_14-11-58_No-00
ここにチェックを入れるとスクロールしてもヴィジェットがついてくるようになります。
注意点としては「AdSenseの広告」に対してチェックを入れてしまうと、
AdSenseプログラムポリシー違反となるので注意しましょう。

ここにSNSのソーシャルボタンを追加すると簡単にSNSボックスが作成できます。
SnapCrab_NoName_2014-7-13_14-13-36_No-00

うまくフローティングしない場合はjqualyを使用したプラグインと干渉している可能性があります。
一度干渉している可能性のあるプラグインを止めてやり直してみましょう。

【HP制作】CSSで画像リンクを光らせる

これずっと画像を光らせていると思ってたんですが、実は透過設定しているんですねw
CSSに以下を追記するだけですが、ワードプレスでテンプレートを使用している場合
すでに「opacity」（透過）の設定がされている場合も多いのでまずは「opacity」で検索しましょう。

検索はctrl＋fでできます。
b4a96a48

そこで検索にひっかかったらその部分を修正またはその下に追記しましょう。
なければcssの一番したで構いません。

サイト内全体に反映

a img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
※CSSに「a img」があったら、そこに以下を追記します。

a:hover img {
opacity: 0.7; /* 透過レベル */
filter: alpha(opacity=80);
}
※こちらはマウスオーバー時の指定です。
透過レベルの数値は「１」で元画像の濃さです。
数値が低くなればなるほど薄くなって光っているように見えます。
あくまで透過ですので背景を指定している時はそちらが映ってしまわないように注意しましょう。

画像ごとに指定もしくはサイト内全体に反映させることが出来ます。
以下をCSSに記載すればそれぞれの画像ごとに設定することも可能です。

.fade {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

.fade:hover {
opacity: 0.7; /* 透過レベル */
filter: alpha(opacity=60);
}

HTML記述時に、「class=”fade”」を記入します。
1

リンク画像を光らせるのは良く使うので使いまわせて便利です。