[動画背景]WordPressに動画を背景に埋め込み、上にテキストを表示させる。映像を背景に!

Main

This video is sample.

Top1

This video is sample.

Top2

This video is sample.


Title1

This video is sample.

Title2

This video is sample.

Title3

This video is sample.

Title4

This video is sample.

Title5

This video is sample.

Title6

This video is sample.


Title7

This video is sample.

Title8

This video is sample.

Title9

This video is sample.


Title10

This video is sample.

Title11

This video is sample.

Title12

This video is sample.

[動画背景]Wordpressに動画を背景に埋め込み、上にテキストを表示させる。映像を背景に!
動画背景て重いけどかっこいいからサンプルで作ってみよう!

BMWのサイトで背景に動画をたくさん使ったトップページがあってカッコ良かったのでためしてみました。

[海外のブログ]ホームページを拡散、WEB集客するために色々なSNS拡散などを検証してみる。

■追記[2019/04/04] facebookの共有ができたりできなかったりで、4月から全く共有(自動投稿)ができなくなった。
jetpackではtwitterとTumblrの連携のみにしました。

■追記[facebookとtwitterの運用1日目] FacebookはHPへのアクセスが見込まれる。
twitterはlike,retweetで反応がある。

感想:twitterのが拡散してもらいやすそう。軽い感じでリツイートなどできるからでしょうか?

■ここからメインのコンテンツ

WordPressプラグインでSNSの種類を調べてみました。
Social Networks Auto-Poster 複数のSNSに自動投稿が可能です。

Social Networks

Facebook(自動投稿中止:2019/04/04 アクセスがあったものを後からボタンで共有することにする)
Google+
Instagram
LinkedIn
ok.ru
Plurk
Pinterest
Twitter (2018/03/18 自動投稿実施中)
VK.Com
Weibo
XING

Blogs/Publishing Platforms

Blogger
Flipboard
Google My Business
Instapaper
LiveJournal
Medium
Scoop.It
SETT
Tumblr (2019/04/04 連携開始 Jetpack)
WP Based Blog

Link Sharing/Boormarks

Diigo
Reddit

Email Marketing

MailChimp

Messengers

Line
Telegram
Yo

Image Sharing

500Px
deviantART (!)
Flickr

Forums

vBulletin

Other

YouTube

ここまでがSocial Networks Auto-Posterで自動投稿可能なサービスのようです。
Facebookとtwitterは他のプラグイン Jetpackで連携済みなのでそれ以外のサービスを調べていきます。

今回これを調べているのは英語のサイトを運営しているのでその集客効果を高めるのに使えるか?の検証をします。

お名前.comのネームサーバー変更(Xserverに変更)で切り替わる時間の例

■1日目
はじめ お名前.comで登録されていますの画面
12:08 切り替えの設定
12:20 XserverにてWordPressのインストール
12:40 以下のテキストのみ

無効なURLです。
プログラム設定の反映待ちである可能性があります。
しばらく時間をおいて再度アクセスをお試しください。

12:41 whoisではXserverに変わっている

13:03 お名前.comの画面に戻る

14:06 WordPress 5.0.3 へ自動更新しました。とのメールが来るが表示はまだお名前.com

14:53 切り替え確認 スマホで

2時間45分で別サーバーの確認ができました。

WP-ユーザー登録で固定ページを自動で作りたい。

ポータルサイトを作っています。

不特定多数が編集出来るように、
投稿、singleは解決しましたが、メインのページは固定ページにしたいと考えています。

参考にしている記事
WordPressでユーザー登録(追加)時に紐づいたページを作成

WordPressでユーザー登録(追加)時に紐づいたページを作成

css animation背景で使えるおしゃれなヘッダー背景アニメーション – ANIMATED BACKGROUND HEADERS –


DEMO1のイメージです。

ダウンロードはこちらから

Animated Background Headers

DEMO1-4までありどれもおしゃれな背景になります。

DEMO1 https://tympanus.net/Development/AnimatedHeaderBackgrounds/
DEMO2 https://tympanus.net/Development/AnimatedHeaderBackgrounds/index2.html
DEMO3 https://tympanus.net/Development/AnimatedHeaderBackgrounds/index3.html
DEMO4 https://tympanus.net/Development/AnimatedHeaderBackgrounds/index4.html

無料で作れるホームページ: Zoho Sitesを使ってみる

無料で作れるホームページ: Zoho Sitesを使ってみる

作成したサンプル:
http://atomon9.zohosites.com/

一言感想;どっかのサービスと似ている操作感です。日本でもバランスなど見た目も良さげです。
編集画面は英語のみ?どこかには言語変更があると思います。
footerのzohoロゴが画像でなくテキストだと最高です。他の無料ホームページの広告よりは控えめでオススメです。

■無料プランでできること


5ページ
500MBのストレージ
3GBの帯域幅/月
2つのフォーム
10MBの最大ファイルサイズ
ファビコン
モバイル最適化=レスポンシブ
自動サイトマップ

■レイアウト見本

■編集画面

■5ページまでは無料

6ページ目を追加しようとするとこのようになります。

その他の無料で作れるサービス一覧:https://atomon9.com/design/homepage-muryo-list-tada-free/

フッターのZohoロゴ

無料で作れるホームページ: crayonの使い方をまとめてみる

無料で作れるホームページ: crayonを使ってみる

作成したサンプル:https://atomon9.crayonsite.net/

一言感想;スマホで更新ができるようですがパソコンで作業しました。スマホは後ほど
パソコンでの使用感は左サイドにあるメニューがわかりづらいですがプレビュー画面を見ながらの編集なので簡単に更新作成ができます。
プレビューしながらだともっさりとした、重い動きが気になると思われますが、以外に早い動作で簡単に作れました。
テンプレートのまま作ると若干古臭い印象ですが、情報を伝えることが重要なので見た目にそれほど気にしないのであれば簡単なのでオススメです。

■レイアウト見本

■編集画面

■ページは3ページまで無料

その他の無料で作れるサービス一覧:https://atomon9.com/design/homepage-muryo-list-tada-free/

無料で作れるホームページ比較してみる-広告の有無や使いやすさ作り方を、サンプルページを作成してご紹介

無料で作れるホームページは?

現在18サイトが無料でホームページを作れるサービスを提供しているようです。(調査しながら順次追加修正していきます)

検索して見るとまとめ記事が多いので、実際の使用感なども合わせて紹介していきたいと思います。

試しにGoogle sitesで製作してみた。

https://sites.google.com/view/atomon-design-labo/

サービス名評価公式URL編集端末詳細DEMOページ
Google Sites☆☆☆☆☆https://sites.google.com/パソコンで編集
スマホ不可
https://atomon9.com/all/free-homepage-google-sites/https://sites.google.com/view/atomon-design-labo
Webnode☆☆☆☆☆https://www.webnode.jp/パソコンで編集
スマホ不可
https://atomon9.com/all/free-homepage-webnode/https://atomon9-web.webnode.jp/
SiteMixhttp://sitemix.jp/?試していません。動作が遅い、掲載されているページ404。-
One Page☆☆https://one-page.cloud/パソコンで編集
スマホ(パソコン表示)
-https://subdomain18092504134.one-pg.com/
Ameba Ownd☆☆☆https://www.amebaownd.com/-使えそう(編集中)https://atomon9.themedia.jp/
Jimdo☆☆https://jp.jimdo.com/-使えそう(編集中)https://atomon9.jimdofree.com/
Wix☆☆https://ja.wix.com/ブログの投稿はアプリでできるヘッダーに広告https://atomon9.wixsite.com/wix-by-atomon
BiND-https://bindcloud.jp/-初年度のみ無料-
忍者ホームページhttps://www.ninja.co.jp/hp/-サーバーだけhttp://atomon9.at-ninja.jp/
忍者ブログhttps://www.ninja.co.jp/hp/-サーバーだけhttp://atomon.blog.shinobi.jp/
CLOUD LINEhttps://cloud-line.com/-使えそう(編集中)http://atomon9.cloud-line.com/
crayon☆☆https://crayon.e-shops.jpパソコンで編集
スマホでも可能
https://atomon9.com/all/free-homepage-crayon/https://atomon9.crayonsite.net/
Zoho Sites☆☆☆☆☆https://www.zoho.com/jp/sites/-https://atomon9.com/all/free-homepage-zoho-sites/http://atomon9.zohosites.com/
Weebly-https://www.weebly.com/jp---
Strikingly-https://www.strikingly.com/---
Yahoo!ジオシティーズ-https://geocities.yahoo.co.jp---
FC2ホームページ☆☆☆http://web.fc2.com/--https://atomon9.web.fc2.com/
smart4me-http://smart4me.net/-新規登録中止中(
2018/7/23から)
-
mobeek-https://mobeek.net/---
Webydo-http://www.webydo.com/---
BASEhttps://thebase.in/

demoサイトについて

基本は元々のテンプレートをほぼそのまま使用しています。自分でレイアウトを設定したサイトもあります。無料でここまでできるのかと思うサービスや、動作が遅かったり(通信環境の影響?)したサイトもあり様々です。

本当にホームページが必要なのか?

私自身ホームページの制作や運営を行なっておりますが、本当に必要なのか?ポータルサイトや無料サイトで十分ではないか?と思うこともありますし、提案もします。

WordPressのプラグイン / ACF,アドバンス カスタムフィールドが表示されない、カスタム投稿が表示されない

WordPressのプラグイン「ACF」アドバンスカスタムフィールドを久しぶりに使ってみたけど、やり方を忘れてしまったための記録。

このプラグインは便利です。美容室のスタイリストページや、メニュー表に最適な機能がついています。
興味のある方は調べてください。[WordPress プラグイン ACF使い方]などで調べるといろいろでてきます。

インスタントメモで失礼します。
sc-imageなどがフィールド名なので変えてください。

        ■イメージ:<?php $image = get_field('sc-image'); $url = $image['sizes']['medium']; $width = $image['sizes']['medium-width']; $height = $image['sizes']['medium-height'];?><img src="<?php echo $url ?>" width="<?php echo $width ?>" height="<?php echo $height ?>" /><br>
        ■学校名:<?php the_field('sc-name'); ?><br>
        ■住所:<?php the_field('sc-adress'); ?><br>
        ■電話番号:<?php the_field('sc-tell'); ?><br>
        ■学費:<?php the_field('sc-fee'); ?><br>
        ■定員:<?php the_field('sc-number'); ?><br>
        ■HP:<?php the_field('sc-hp'); ?><br>
        ■ツイッター:<?php the_field('sc-twitter'); ?><br>
        ■インスタグラム:<?php the_field('sc-instagram'); ?><br>

※修正する場所は下の画像の名前のとこです


ACFの設定イメージ


表示例

author.phpでのACFカスタムフィールド投稿の設定方法
Advanced Custom Fields でプロフィールを拡張 ー http://web-taiyo.com/wordpress-plugin/130206.html

実はこの解決法を探すためにいろいろ探して、このサイトのやり方はダメ、、、ここもだめ、、、で行き着いたのが
過去に自身で書いたブログメモでしたw
過去の記事:ワードプレス カスタムフィールド カスタム投稿 表示されない 対処法

ほとんど引用の記事なのですが上位表示していましたので、驚きです。

SEO対策なら実績のあるatomonへご依頼ください!