起業家・企業のありかた

起業家を育てるあたらしい企業の在り方

現在、日本の中小企業は、経営者の高齢化が進み、後継者問題が深刻化しています。結果として今まで培ってきた技術や伝統を継承することなく廃業する事業者が急増しています。さらに日本は起業家が生まれにくい国だともいわれています。 今回は、新しい時代の企業(社長)のありかた、世代交代、人材育成をテーマに考えてみたいと思います。 目次 起業家を育てるあたらしい企業の在り方日本の中小企業が抱える企業存続の問題点創業時の理念・技術を存続させる企業のありかた問題の根本を考えてみるひとつの会社に長居することを前提に考えていない ...

続きを読む

副業ドロップシッピングで開業!

40代会社員 副業|ドロップシッピング無知で開業はダメ! 始めるのに必要な心構えと知識

ドロップシッピングって稼げる?失敗する人から学ぶ 成功するための秘訣! 目次 副業で稼げる?将来を考えて、もしもドロップシッピングで開業したい副業ドロップシッピングで開業!稼げる?まず知りたいこと3つ!ドロップシッピング開業!失敗する人から学ぶ 成功するための秘訣!まとめ | 副業ドロップシッピング開業で成功の秘訣!実際のドロップシッピングで開業したショップを公開! 副業で稼げる?将来を考えて、もしもドロップシッピングで開業したい 冴えない40代サラリーマン。出世もこれ以上望めないし、給与は減るばかり。。 ...

続きを読む

自宅が仕事場のフリーランス

SOHOで働く!人間関係で会社辞めたい!働きに出たくない!

目次 人間関係に疲れたらSOHOで稼ぐのもいいかもしれない「SOHO 楽して自宅で稼ぐ」は本当か?働き方をSOHOにしてよかったと思うことSOHOにはどんな仕事があるのかSOHOで食べていけるのか?SOHOが大変と思うときは仕入れがほとんどないネットの仕事 人間関係に疲れたらSOHOで稼ぐのもいいかもしれない 会社辞めたい。でも生きていくためには働かないと・・・。 自分にはこの会社向いていない この職場で働くのムリ この仕事を一生続けていく自信がない もう人間関係に疲れた 転職しても同じことの繰り返し 辞 ...

続きを読む

もしもドロップシッピング

もしもドロップシッピングの始め方!ネットショップを3店開設してみた【完全解説】

初心者にも分かる!ドロップシッピングを始める!簡単ショップづくり!実際のショップがココで見れる! 目次 もしもドロップシッピングではお店が無料で作れる3ステップもしもドロップシッピングとはお店ができるまでの手順は簡単3ステップ!もしもドロップシッピングで稼ぐ仕組みと流れショップできすぎ君(もしもドメイン)で作成ショップ!ショップできすぎ君(独自ドメイン)で作成ショップ!ワードプレスで作成したショップ!自分で好きなデザインにできる!ショップ制作のお手伝い外部発注してショップを作ることも可能!実際に発注し納品 ...

続きを読む

会社のことをパソコンで管理

会社での3大管理「人・物・金」はもう古い!今は7大管理!

マネジメントする立場になったら覚えておこう!会社での重要な管理項目を簡単に解説! 目次 会社のマネジメントで大事な管理とは?人の管理とは物の管理とは金の管理とは会社での新しい7大管理とは技術の管理とは時間の管理とは情報管理とは自己管理とは会社の7大管理まとめ 会社のマネジメントで大事な管理とは? 会社での大事な管理項目は?一昔前までは「人・物・金」の3大管理で済んでいましたが、今ではリスクや様態の多様化でこれだけでは全く足りません。最低でも7大管理が必要な時代に突入しています。大変ですが会社や個人の優劣の ...

続きを読む

トップへボタンを実装

https://www.koko-de.com

ドロップシッピング

ショップできすぎくんに「TOPへ戻る」ボタンを実装する手順

投稿日:

moshimoドロップシッピングで無料で使える高機能のショップ作成ツール「ショップできすぎくん」

「ショップできすぎくん」は誰でも直感的にショップを作ることができるとても優れたツールです。

しかし、一つだけ残念な点があります。それが、TOPへ戻るボタンが付いていないこと。。。

下にスクロールして読み進めていくと右下に現れる「上へ戻るボタン」です。

一気に上に戻れるので便利ですよね♪

今回はこの「上へ戻るボタン」(TOPへ戻るボタン)をショップできすぎくんに実装する手順を解説します。

ショップできすぎくんに「TOPへ戻る」ボタンを実装する手順

ショップできすぎくんカスタマイズ

実装条件;レンタルサーバーを契約している。独自ドメインを取得している。

ショップ作成ツールとして有能な「ショップできすぎくん」ですが、そのままの状態では、他の方と同じショップになってしまいます。そこで必要なのがカスタマイズです!

もしものショップできすぎ君作成画面

デザインや機能で他店と差をつけることで訪問者へアピール度や使い勝手がアップします!

今回は訪問者の使い勝手(ユーザビリティ)を良くする「TOPへ戻る」ボタンをmoshimoドメインショップに実装する手順を解説します!

「TOPへ戻る」ボタンとは?

「TOPへ戻る」ボタンとは?

下に読み進めていくと右下に出現する上へ戻るボタンのことです。

あると便利なのですがショップできすぎくんにはこの機能が付いていません。

メリット

  • 商品ページが縦に長いページやトップページですぐに上にあがることができます。
  • ショップ訪問者、購入者のサイト使い勝手が良くなりストレス軽減に役立ちます。
  • 他ショップとの差別化が図れます。
  • 1ショップに設置することができれば、同じ方法で複数のショップで実装できます。

デメリット

ショップできすぎくんを使って、この機能のデメリットは今のところ確認できません。

実装手順

今回実装するのはコチラのTOPボタンです!透過性がありスクロールすることで現れるお洒落なボタンです。

トップへ戻るボタン実装手順

まず最初にトップボタンを表示したり、動かしたりするプログラムを書いたファイルを入れる専用の箱(フォルダ)を用意します!

独自ドメインでサブドメインを取得

箱(フォルダ)を用意するのは新しく作ったサブドメインに!

例)

独自ドメイン;https://〇×〇×.info/

サブドメイン;https://△△.〇×〇×.info/(△△の部分が追加されてサブドメインになります)

サブドメインもSSL化しておいてください。(http ⇒ https)

サブドメインの取得、SSL化については各レンタルサーバーの指示(マニュアル)に従ってください。

ドメイン内のフォルダーにファイルを入れます!

独自ドメイン内のフォルダーに新しくファイルを設置していきます。

ドメイン内のフォルダーにファイルを入れます!

▲「サーバー内の各フォルダ」(この画面はサーバ各社によって異なります)

フォルダーを開けて新しいファイルを入れます。

入れるファイルはこの2つです。

  1. cssファイル
  2. jsファイル

上記のファイルは今回、同梱(有料)されている「cssjs」というZIPフォルダーにまとめて入れています。(※最下部に案内あります)

ZIPフォルダーは圧縮して容量を少なくした形式のフォルダです。右クリックで解凍(すべて展開)してからお使いください。

解凍出来たらフォルダごと入れてください。それで完了です。

ファイルひとつひとつを入れるのではなく、2つのファイルが入った「cssjs」というフォルダ1つを入れるだけでOK!です。

こんな感じです。

ファイルひとつひとつを入れるのではなく、2つのファイルが入った「cssjs」というフォルダ1つを入れるだけでOK!です。

入れ方(転送またはアップロードのこと)は「ドラッグ&ドロップ」またはFTPソフトを使って入れてください。

ショップできすぎくん側の操作

すべてのページの一番下から戻れるようにサイドバーの自由ボックス内にHTMLを記述します。

ショップできすぎくんのサイドバー最下段に「TOPへ戻る」ボタンのHTMLを記述します。

ショップできすぎくんのサイドバー最下段に「TOPへ戻る」ボタンのHTMLを記述します。

次の画面▼

ショップできすぎくんのサイドバー最下段に「TOPへ戻る」ボタンのHTMLを記述します。

記述する内容は、同梱している「HTMLコード」というファイルにコードを記述しているのでコピペしてください。(内容は下の通りです。)

<a class="top-up" href="#">PAGE TOP ▲</a>

▲必ずHTMLモードで入力してください。(同梱のCSSと連動します)

[PAGE TOP ▲]の部分を変更することで表示を変更出来ます。

ココに注意してください!

ダブルクォーテーション「"」は半角英数モードで入力ください。コピペしてもパソコンの設定で「"」の部分が全角になることがあります。

ポイント

ダブルクォーテーション「"」は半角英数モードで入力ください。コピペしてもパソコンの設定で「"」の部分が全角になることがあります。
コードの「a」の後と「class」の前には半角スペースが入っています。

ココまで出来たら「保存」を押してください。

追加CSSとJSのリンクを設置

次は、ボタンを動かす仕組みを書いた仕様書(cssなど)はココにあるよ。というのをショップできすぎくんに教えてあげる作業です。
  1. ショップできすぎくんの左側の「設定」の「ショップデザイン設定」をクリック!
  2. 上の方に「基本設定」「詳細設定」「拡張設定」というタブが3つ並んでいるのを見つけてください。
  3. 「拡張設定」をクリック!
  4. オリジナルCSS URLに<サブドメイン+/cssjs/topup.css>を入力!
  5. オリジナルJava Script URLに<サブドメイン+/cssjs/topup.js>を入力!
  6. 「保存」

 

追加CSSとJSのリンクを設置

ポイント

「拡張設定の入力」。ココが一番間違いやすいところです。

失敗する時の半分以上がここです!何度も確認してください。

  • メモ帳などであらかじめ(独自ドメイン+cssjs/topup.css)と(独自ドメイン+cssjs/topup.js)を作っておいてからコピペで設定しましょう!
  • 独自ドメイン(サブドメイン)とショップできすぎくんの(もしもドメイン)を混同しないようにしてください。※もしもドメインを入力しないように!
  • 2箇所入力しますが、最後が「css」か「js」の違いだけです。よく見比べてください。
  • すべて半角英数です。スペース(空白)がURLの途中、または前後に紛れていないか注意してください。
  • 「/」と「.」も間違えないようにしてください。

公開予約を押す

  1. 「ショップ公開予約」を押す
  2. 「公開予約する」を押す
  3. 完成です!
お疲れさまでした!これで「トップへ戻るボタン」が実装されていますので、ショップを確認してみてください。

ボタン位置の微調整について

必ずスマホ画面でも確認してください。

CSSファイルの・・・

・<bottom: 40px;>の部分で下からの距離を変えることができます。
・<right: 10px;>の部分で右端からの距離を変えることができます。
・<font-size: 12px;>の部分で字の大きさを変えることができます。

文字色はカラーコードが分からない方には設定できないので、このCSSでは設定できません。

ショップできすぎくんの「ショップデザイン設定」>「詳細設定」>「リンクのテキスト色」が反映されるようになっています。

なのでショップごとに文字色が変化します。

ショップのカート内リンク文字色と同じ色になります。変更することも可能ですが、ショップ内のリンク文字色も同時に変化します。

ココがポイント

ショップのカート内リンク文字色と同じ色になります。変更することも可能ですが、ショップ内のリンク文字色も同時に変化します。

購入・詳細はコチラでご覧ください!

ココまで「ショップできすぎくんにTOPボタンをつける」の手順を解説してきました!

本文中にある「css」「js」ファイルはご自分で用意していただく必要がありますが、格安で購入も可能です。

詳しくはこちらをご覧ください!

SできすぎくんにTOPボタンの実装手順解説します できすぎくんに上へ戻るボタンがあればいいのに。。。を実現!

このサービスには以下の内容がセットされています。

「css」「js」ファイルの同梱、Q&A、サポートも用意させていただいてます。

この手順をマスターすれば。。。

自分で実装出来ると自信につながります。

1ショップ実装出来れば複数のショップに自分で「トップに戻る」ボタンを実装できます!お得ですね。

ぜひ頑張って実装してみてください。

このテーマがおすすめです!

「WING」アフィンガー5

アフィリエイトの成果をアップさせるワードプレステーマ

★アフィリエイトに特化したワードプレステーマ!

WINGはこんな方におすすめ!

アフィリエイトを本気で取り組みたい !

アドセンスブログに本気で挑戦したい!

ドロップシッピングに本気で取り組みたい!

ドロップシッピング×Wordpress制作代行!

Wordpress制作ショップ(ドロップシッピング)

ドロップシッピング×Wordpress ショップ制作をお手伝い!

ドロップシッピングでバリバリ頑張りたい人を応援するひな型・土台ショップが手に入る!

商品ページがすでに実装されているから分かりやすい!構造や商品ページ作りの勉強にもなる!

扱う商品ごとにショップが分かれています!

興味津々のサイトです!

  • この記事を書いた人
アバター

<50ブログ>

こんにちはこの<50ブログ>を書いているホットリングです。このブログを書いているのは1968年生まれ 申年のおっさんです。A型です。職歴は飲食業が長く現場と管理職を経験しました。広告の営業の仕事もしていた時代もあり、いろんな経験を経て今は独立して広告業とネットショップの構築などの仕事をしています。いろんな経験をもとにわがままに書いてます。日々Wordpressと向き合いHTML、CSSなどと向き合っています。参考になる部分があったら嬉しいです☆

最近よく読まれているページ

PVを増やして収益UP!はアフィリエイトではなくアドセンスです! 1

アフィリエイトの収益アップには「PVを上げろ!」とか「100万PVのわたしが解説!」なんていう文言をよく見ますが。。。 見られる回数が増えただけで収益は上がるのでしょうか?そんなにPVって大事なんでし ...

ドロップシッピング ベッドショップ ポートフォリオ 2

WordPressで作ったドロップシッピングサイトが欲しい WordPressのショップを持ちたいけど作り方が分からない WordPressのショップ構築が分からない 商品ページ、固定ページ、メニュー ...

副業ドロップシッピングで開業! 3

ドロップシッピングって稼げる?失敗する人から学ぶ 成功するための秘訣! 目次 副業で稼げる?将来を考えて、もしもドロップシッピングで開業したい副業ドロップシッピングで開業!稼げる?まず知りたいこと3つ ...

大きく打ち上げる 4

アフィリエイトで稼ぐ方法!長くやっていくには?アフィリエイトで売れない理由の一つに無駄に大きい目標を掲げてしまうというのがあります。楽して大きく稼げると思ったら大間違いです!アフィリエイトの本質を見極 ...

自宅が仕事場のフリーランス 5

目次 人間関係に疲れたらSOHOで稼ぐのもいいかもしれない「SOHO 楽して自宅で稼ぐ」は本当か?働き方をSOHOにしてよかったと思うことSOHOにはどんな仕事があるのかSOHOで食べていけるのか?S ...

2人のやる気 6

営業の仕事は大変!売れないセールスマンと売れるセールスマンには「売る気」の意味が違う!? 目次 売る気満々では売れない理由があるそれは「売る気」には、2つの「売る気」が存在するからです。成果を分ける2 ...

履歴書 7

転職の時期がきているのかも・・・ 目次 今の会社、今やっている仕事、このままでいいのか無駄な時間を過ごしていないか考えてみる無駄なところにパワーを使っていないか考えてみるブラック企業に身を置いていない ...

電子ベイプで禁煙 8

目次 40歳 禁煙したきっかけは体調不良吸いたくなる時があるのはこんなとき電子ベイプと出会い禁煙が加速今では電子ベイプがちょっとした趣味に 40歳 禁煙したきっかけは体調不良 40歳の時に私は禁煙をし ...

ワードプレステンプレート 9

アフィリエイト特化型ワードプレステーマを導入したらボタンやデザインに感動しただけでなく、落ち込んでいた売り上げも回復しました!アフィリエイトとGoogleの検索結果について、アフィリエイト成果が回復す ...

洗剤でテーブルを掃除中 10

なぜ新人さんは掃除をさせられるのか?そこには深い意味がありました。就職したばかりの社員、採用されて初日のアルバイトが掃除をさせられるのには教育と効率の2面性がありました! 目次 仕事初日から掃除が続く ...

Copyright© WEB制作・ネットビジネス・起業についてあれこれ<50ブログ!> , 2019 All Rights Reserved.