WordPressテーマDiverで、地図、地域別ランキングを作成するサンプル

エリア別おすすめ

今現在、作成している途中ですが作業工程が多すぎ、マップを作って都道府県を入力www 大変、そこで思いついた。

作成している工程を説明しながら記事を書いていく、WordPressの記事も書いている事ですし、ちょうど良いでしょう。

WordPressテーマ:Diver

Diverの機能でサクサク作成して行く、途中で色を変えたり、機能の中にさらに機能を入れて行くとサンプル見たくできます。

※使用するWordPressテーマによってレイアウトが崩れることもあります、ご注意ください。

おすすめ期間工 都道府県別 ランキング

それでは、はじめに、日本地図と都道府県別とメーカー一覧をみる、サンプルです。

 

 

 

 

 

 

 

 

北海道・1
北海道
トヨタ自動車北海道
東北・2
青森県
岩手県
秋田県
宮城県・1
トヨタ自動車東日本
山形県
福島県・1
日産いわき
関東・11
茨城県・1
日野自動車
栃木県・3
いすゞ、日産栃木、ホンダ
群馬県・2
日野自動車、スバル
埼玉県・1
ホンダ
千葉県
東京都・1
日野自動車
神奈川県・3
いすゞ、日産、三菱ふそう
中部・12
新潟県
富山県
石川県
福井県
山梨県
長野県
岐阜県・1
パジェロ
静岡県・5
スズキ、デンソー、トヨタ自動車東日本、ホンダ、ヤマハ
愛知県・6
アイシン、スズキ、デンソー、トヨタ、トヨタ車体、三菱
近畿・9
三重県・3
ホンダ、デンソー、トヨタ車体
滋賀県・2
ダイハツ、三菱
奈良県
和歌山県
京都府・2
ダイハツ、三菱
大阪府・1
ダイハツ
兵庫県・1
カワサキ
中国・4
岡山県・1
三菱、
広島県・2
マツダ、デンソー
鳥取県
島根県
山口県・1
マツダ
四国
香川県
徳島県
愛媛県
高知県
九州・5
福岡県・3
ダイハツ、トヨタ、日産、
佐賀県
長崎県
大分県・1
ダイハツ
熊本県・1
ホンダ
宮崎県
鹿児島県
沖縄
沖縄

 

 

メーカー一覧をみる

 

サンプルを見て頂けたでしょうか。

日本地図、都道府県、メーカー一覧をみる。

 

 

 

1:日本地図作成,Google 図形描画を使う

WordPressテーマで地図を作成できないんです。

図形を作るプラグインがありますが、今回は、無題の図形描画 - Google 図形描画、を使います、Googleアカウントを持っていない方は作成してください。

 

Google、chrome拡張機能もあります。Google 図形描画 - Chrome ウェブストア

 

Google 図形描画使い方

ログインして

画面がGoogle図形描画に変わります、矢印先端タイル状の所に図形描画していきます。

 

 

1、1をクリック図形を選択

2、マウス左クリックしながら、図形を描画

3、2図形作成後、図形をクリックすると3メニューバーが表示されます。

4、図形を好きなところに移動して、1つ目の図を設置

5、図形作成を繰り返し日本地図の形を作って行きます。

四角い形は後で成形します。

 

 

 

1、画像をクリック
2、塗りつぶしアイコン
3、好きな色を選択

4、全部塗りつぶしが終わったら

5、形を整えます。

6,左クリックしながら、離さないで図形を移動したり、拡大、縮小できます。

 

文字入力をして完成です

 

Google 図形描画アイコン説明

 

1、元に戻す
2、やり直し
3、印刷
4、書式貼り付け
5、ズーム
6、選択 
7、線
8、図形
9、テキストボック
10、画像
11、色の塗りつぶし
12、枠線の色 
13、枠線の太線
14、破線の枠線
15、フォント
16、フォントサイズ
17、太文字
18、斜体 
19、下線
20、テキストの色
21、ハイライトの色
22、リンク挿入
23、コメントを追加

 

 

トグルの作成と使い方

トグルは、ボタンを押すと文字が出てくるスイッチボタンの事、2の図はトグルを使って北海道から沖縄までの9個のトグルを連続で使用している。トグルの中にトグルを使ってさらに追加で都道府県を記載しています。2は画像なので機能していません。

トグル見本
テキスト、テキスト

トグル作成

WordPressテーマDiverで説明して行きます

ダッシュボードから投稿画面、入力補助を押して
入力補助画面が出るので、トグルボタンを押す
タイトル:タイトル名
テキスト:テキスト入力

ここまでで、トグル完成です。

 

参考にしたサイト

 

検索している途中で画像の横に吹き出しがあり説明されている記事を見て、とても分かりやすく見やすい。

やってみたいと思い挑戦。

Diverでグリッドを使うとこんな感じになる。
画像と吹き出しの間にすきまが気になる!

知識不足でイロイロ試したができないので、

また検索して見つけた答え。

サルワカさん
画像の上に吹き出しの左側が重なっている、美しい

 


ワードプレステーマが違いますがとても参考になります。

特にCSSはサルワカさんが分かりやすく種類が多く紹介されています。

 

Diverでは表示がうまくいかない時があるので、今回は使っていませんが次回は使ってみようと思います。

 

まとめ

今回は、記事を作成しながら、Google図形描画を使って日本地図作成しトグルの使い方説明まで行いました。

Google図形描画は無料で簡単に図形描画ができ自動でGoogleドライブに保存してくれます、保存忘れがないので便利でなので使いこなしましょう。

トグルは使い方によりますが、単純なサイトページにアクセントを付けてくれて見た目もシンプルでスッキリさせてくれますね。

次回は、色の変更、テーブル、ランキング表示の使い方をやって見たいと思います。

 

気になる情報はこちら

当サイト申し込み人気ランク

 

1位 トヨタ期間工 期間工jp

2位 ホンダ期間工 期間工jp

3位 スバル期間工 期間工jp

 

 

 

 

気になるなる方は最後まで見てね!!

 

 

 

 

1位 TOYOTA
総合評価
安定、継続率、短期長期間
安心して応募できる。
初回更新、3ヵ月で始めやすい
日給10000~1080
時給1360~1469
総合評価 1位

 

2位 HONDA

40代・50代が応募できるおすすめ。

年齢と食事で考えると1位

初回更新3ヵ月で始めやすい

業界1位の初回日給10300~スタート
他社と比較して仕事が楽な感じ!
満足度 1位
食事が美味しい
食事無料(1日1食)

 

3位 SUBARU
最大手当 6ヵ月/合計227
残業で稼ぐスバルリピーターが多く人気
関東近郊1番人気メーカー
車の持込みOK。
選考会参加費は参加後21日以内もしくは入社確認後※規定有
入社祝い金は入社後35日以内に振り込まれます※規定有

 

 

カテゴリー
おすすめの記事