diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 39d873354..e68fd827b 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -20,6 +20,8 @@
 <%= yield %>
 </div>
 
+<%= react_component "Footer" %>
+
 
 <%= redux_store_hydration_data %>
diff --git a/client/app/bundles/comments/components/CommentScreen/CommentScreen.jsx b/client/app/bundles/comments/components/CommentScreen/CommentScreen.jsx
index 2ca9965e4..a5c3188c6 100644
--- a/client/app/bundles/comments/components/CommentScreen/CommentScreen.jsx
+++ b/client/app/bundles/comments/components/CommentScreen/CommentScreen.jsx
@@ -39,18 +39,6 @@ export default class CommentScreen extends BaseComponent {
 actions={actions}
 ajaxCounter={data.get('ajaxCounter')}
 />
- <div className="container">
- <a href="/index.cgi/larger-text/http://www.shakacode.com">
- <h3>
- <div className={css.logo} />
- Example of styling using image-url and Open Sans Light custom font
- </h3>
- </a>
- <a href="https://twitter.com/railsonmaui">
- <div className={css.twitterImage} />
- Rails On Maui on Twitter
- </a>
- </div>
 </div>
 </div>
 );
diff --git a/client/app/bundles/comments/components/CommentScreen/CommentScreen.module.scss b/client/app/bundles/comments/components/CommentScreen/CommentScreen.module.scss
index 1dc5a1eb1..2da0ba146 100644
--- a/client/app/bundles/comments/components/CommentScreen/CommentScreen.module.scss
+++ b/client/app/bundles/comments/components/CommentScreen/CommentScreen.module.scss
@@ -2,16 +2,4 @@
 padding: 1em 1.5em;
 }
 
-.logo {
- background: url('./images/railsonmaui.png') no-repeat left bottom;
- display: inline-block;
- height: 40px;
- margin-right: 10px;
- width: 146px;
-}
 
-.twitterImage {
- background: url('./images/twitter_64.png') no-repeat;
- height: 64px;
- width: 64px;
-}
diff --git a/client/app/bundles/comments/components/Footer/Footer.jsx b/client/app/bundles/comments/components/Footer/Footer.jsx
new file mode 100644
index 000000000..15e00dcfd
--- /dev/null
+++ b/client/app/bundles/comments/components/Footer/Footer.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import BaseComponent from 'libs/components/BaseComponent';
+import css from './Footer.module.scss';
+
+export default class Footer extends BaseComponent {
+ render() {
+ return (
+ <div className="container">
+ <a href="/index.cgi/larger-text/http://www.shakacode.com">
+ <h3>
+ <div className={css.logo} />
+ Example of styling using image-url and Open Sans Light custom font
+ </h3>
+ </a>
+ <a href="https://twitter.com/railsonmaui">
+ <div className={css.twitterImage} />
+ Rails On Maui on Twitter
+ </a>
+ </div>
+ );
+ }
+}
diff --git a/client/app/bundles/comments/components/Footer/Footer.module.scss b/client/app/bundles/comments/components/Footer/Footer.module.scss
new file mode 100644
index 000000000..92854f36b
--- /dev/null
+++ b/client/app/bundles/comments/components/Footer/Footer.module.scss
@@ -0,0 +1,13 @@
+.logo {
+ background: url('./images/railsonmaui.png') no-repeat left bottom;
+ display: inline-block;
+ height: 40px;
+ margin-right: 10px;
+ width: 146px;
+}
+
+.twitterImage {
+ background: url('./images/twitter_64.png') no-repeat;
+ height: 64px;
+ width: 64px;
+}
diff --git a/client/app/bundles/comments/components/CommentScreen/images/railsonmaui.png b/client/app/bundles/comments/components/Footer/images/railsonmaui.png
similarity index 100%
rename from client/app/bundles/comments/components/CommentScreen/images/railsonmaui.png
rename to client/app/bundles/comments/components/Footer/images/railsonmaui.png
diff --git a/client/app/bundles/comments/components/CommentScreen/images/twitter_64.png b/client/app/bundles/comments/components/Footer/images/twitter_64.png
similarity index 100%
rename from client/app/bundles/comments/components/CommentScreen/images/twitter_64.png
rename to client/app/bundles/comments/components/Footer/images/twitter_64.png
diff --git a/client/app/bundles/comments/startup/serverRegistration.jsx b/client/app/bundles/comments/startup/serverRegistration.jsx
index b17e93f87..7df848681 100644
--- a/client/app/bundles/comments/startup/serverRegistration.jsx
+++ b/client/app/bundles/comments/startup/serverRegistration.jsx
@@ -7,12 +7,14 @@ import SimpleCommentScreen from '../components/SimpleCommentScreen/SimpleComment
 import NavigationBarApp from './NavigationBarApp.jsx';
 import routerCommentsStore from '../store/routerCommentsStore';
 import commentsStore from '../store/commentsStore';
+import Footer from '../components/Footer/Footer';
 
 ReactOnRails.register({
 App,
 RouterApp,
 NavigationBarApp,
 SimpleCommentScreen,
+ Footer,
 });
 
 ReactOnRails.registerStore({
diff --git a/client/app/packs/client-bundle.js b/client/app/packs/client-bundle.js
index f930c71cb..74c0dc841 100644
--- a/client/app/packs/client-bundle.js
+++ b/client/app/packs/client-bundle.js
@@ -10,6 +10,7 @@ import SimpleCommentScreen from '../bundles/comments/components/SimpleCommentScr
 import routerCommentsStore from '../bundles/comments/store/routerCommentsStore';
 import commentsStore from '../bundles/comments/store/commentsStore';
 import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp.jsx';
+import Footer from '../bundles/comments/components/Footer/Footer.jsx';
 
 ReactOnRails.setOptions({
 // traceTurbolinks: process.env.TRACE_TURBOLINKS, // eslint-disable-line no-undef
@@ -22,6 +23,7 @@ ReactOnRails.register({
 RouterApp,
 NavigationBarApp,
 SimpleCommentScreen,
+ Footer,
 });
 
 ReactOnRails.registerStore({
diff --git a/client/app/packs/server-bundle.js b/client/app/packs/server-bundle.js
index 59150b0a6..4cec29f5e 100644
--- a/client/app/packs/server-bundle.js
+++ b/client/app/packs/server-bundle.js
@@ -7,12 +7,14 @@ import SimpleCommentScreen from '../bundles/comments/components/SimpleCommentScr
 import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp';
 import routerCommentsStore from '../bundles/comments/store/routerCommentsStore';
 import commentsStore from '../bundles/comments/store/commentsStore';
+import Footer from '../bundles/comments/components/Footer/Footer';
 
 ReactOnRails.register({
 App,
 RouterApp,
 NavigationBarApp,
 SimpleCommentScreen,
+ Footer,
 });
 
 ReactOnRails.registerStore({
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/shakacode/react-webpack-rails-tutorial/pull/534.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/shakacode/react-webpack-rails-tutorial/pull/534.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>