WordPressテーマDiverで、地図、地域別ランキングを作成するサンプル
目次
エリア別おすすめ
今現在、作成している途中ですが作業工程が多すぎ、マップを作って都道府県を入力www 大変、そこで思いついた。
作成している工程を説明しながら記事を書いていく、WordPressの記事も書いている事ですし、ちょうど良いでしょう。
WordPressテーマ：Diver
Diverの機能でサクサク作成して行く、途中で色を変えたり、機能の中にさらに機能を入れて行くとサンプル見たくできます。
※使用するWordPressテーマによってレイアウトが崩れることもあります、ご注意ください。
おすすめ期間工 都道府県別 ランキング
それでは、はじめに、日本地図と都道府県別とメーカー一覧をみる、サンプルです。
|
公式
|
期間工情報
|
|
|
アイシン
|
募集要項 - 期間従業員採用サイト | アイシン精機株式会社
|
|
|
いすゞ自動車
|
||
|
スズキ
|
||
|
スバル
|
||
|
ダイハツ
|
||
|
デンソウ
|
期間従業員採用情報 | 採用情報 | DENSO - 株式会社デンソー / Crafting the Core /
|
|
|
トヨタ
|
||
|
日産自動車
|
||
|
日野自動車
|
||
|
ホンダ
|
||
|
マツダ
|
||
|
三菱自動車
|
サンプルを見て頂けたでしょうか。
日本地図、都道府県、メーカー一覧をみる。
1:日本地図作成,Google 図形描画を使う
WordPressテーマで地図を作成できないんです。
図形を作るプラグインがありますが、今回は、無題の図形描画 - Google 図形描画、を使います、Googleアカウントを持っていない方は作成してください。
Google、chrome拡張機能もあります。Google 図形描画 - Chrome ウェブストア
Google 図形描画使い方
ログインして
画面がGoogle図形描画に変わります、矢印先端タイル状の所に図形描画していきます。
1、1をクリック図形を選択
3、2図形作成後、図形をクリックすると3メニューバーが表示されます。
4、図形を好きなところに移動して、1つ目の図を設置
5、図形作成を繰り返し日本地図の形を作って行きます。
4、全部塗りつぶしが終わったら
5、形を整えます。
Google 図形描画アイコン説明
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で説明して行きます
ここまでで、トグル完成です。
参考にしたサイト
検索している途中で画像の横に吹き出しがあり説明されている記事を見て、とても分かりやすく見やすい。
やってみたいと思い挑戦。
知識不足でイロイロ試したができないので、
また検索して見つけた答え。
ワードプレステーマが違いますがとても参考になります。
特にCSSはサルワカさんが分かりやすく種類が多く紹介されています。
まとめ
今回は、記事を作成しながら、Google図形描画を使って日本地図作成しトグルの使い方説明まで行いました。
Google図形描画は無料で簡単に図形描画ができ自動でGoogleドライブに保存してくれます、保存忘れがないので便利でなので使いこなしましょう。
トグルは使い方によりますが、単純なサイトページにアクセントを付けてくれて見た目もシンプルでスッキリさせてくれますね。
次回は、色の変更、テーブル、ランキング表示の使い方をやって見たいと思います。
Japanese
Chinese (Simplified)
English
French
German
Italian
Korean
Russian
Spanish