※テーマを導入する前に必ず全文お読みください。設定をしなければ正しく動作しないパーツもございますので、あらかじめご了承くださいませ。
当テーマ「Warrior」利用者の方に紹介記事を書いて頂きました✨
■ハシちゃそ(https://twitter.com/Flash_back_born)さん
該当記事:https://blogstyle.hateblo.jp/entry/2018/09/17/193245
テーマ利用ブログ「@ゲームスタイル」様:https://kengo1983.hatenablog.com/
はじめに
当テーマ「Warrior」は、より快適なテーマをブロガーの皆様に使っていただくため、随時テーマのアップデートをおこなっています。しかしはてなの仕様上、インストール済みのテーマへ内容が反映するまで、少し時間がかかってしまう場合がございます。その点あらかじめご了承くださいませ。
もしお急ぎの場合は、お手数ですが再度テーマをインストールしていただければ修正内容が反映されるかと思いますので、そちらもお試しください。
(※ちなみにテーマの再インストールを行うと、はてなの仕様上、カスタムCSSと背景画像が消えてしまうようです。そのため再インストールを行う際は、あらかじめメモ帳にカスタムCSSの内容をコピー&ペーストして、バックアップを控えておくようにしましょう)
テーマの特徴
シンプルな右2カラム構成で作られています。ちなみにテーマ名は、テーマを使う人が「初心を忘れず、ただただ愚直に書き続ける「戦士(=書き人)」であらんことを」という願いのもと名付けました。
ちなみに当テーマは、広告もきちんと出力するので、はてな民/はてなpro民問わず、利用できるテーマとなっています。
テーマに搭載されている機能
※一部カスタマイズの設定が必要です。
・レスポンシブ対応(iframeタグ・コマース・アドセンス広告は、レスポンシブ非対応)
・SNSフォローボタン付きプロフィール搭載
・記事内SNSボタン(シェア用)
・はてなアイコンフォント搭載(※SNSフォローボタン付きプロフィールにのみ利用)
・FontAwesome5 CDN搭載
テーマを導入したら設定する6つの機能
「Warrior」の全機能を利用するには、最初に6つの機能を設定する必要があります。以下、設定方法のご紹介です。
1.レスポンシブデザインの設定
設定方法:「はてなブログマイページの管理画面」>「デザイン」>「スマートフォン」>「詳細設定」>「レスポンシブデザイン」欄にチェックを入れて設定を保存すれば完了です。
2.FontAwesome5の導入
設定方法:「はてなブログマイページの管理画面」>「設定」>「詳細設定」>「検索エンジン最適化」>「headに要素を追加」に以下コピペ。
<!--FontAwesome5用コード--> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
3.グローバルナビゲーションの設定
設定方法:「はてなブログマイページの管理画面」>「デザイン」>「カスタマイズ」>「ヘッダ」>「タイトル下」に以下コピペ。
<!--グローバルナビ--> <nav id="navi" class="navi" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"> <ul class="g-nav"> <li class="navbar"><a href="ナビにしたいページへのリンク①">テスト1</a></li> <li class="navbar"><a href="ナビにしたいページへのリンク②">テスト2</a></li> <li class="navbar"><a href="ナビにしたいページへのリンク③">テスト3</a></li> <li class="navbar"><a href="ナビにしたいページへのリンク④">テスト4</a></li> <li class="navbar"><a href="ナビにしたいページへのリンク⑤">テスト5</a></li> </ul> </nav>
4.記事上SNSシェアボタンの設定(※使う場合はデフォルトで設定されているソーシャルパーツのチェックをすべて外してください+Zenbackもソーシャルパーツが付属しているので、こちらもチェックを外しましょう)
設定方法:「はてなブログマイページの管理画面」>「デザイン」>「カスタマイズ」>「記事」>「記事上下のカスタマイズ」>「記事上」に以下コピペ。
<!--SNSフォローボタン記事上--> <div class="sns-share-button-top"> <ul class="sns-area"> <li class="custom-sns-button"> <!--はてブ--> <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"></a> </li> <li class="custom-sns-button"> <!--Facebook--> <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650,height=450,menubar=no, toolbar=no, scrollbars=yes'); return false;" ></a> </li> <li class="custom-sns-button"> <!--Twitter--> <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"></a> </li> <li class="custom-sns-button"> <!--Google+--> <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650,height=450,menubar=no,toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"></a> </li> <li class="custom-sns-button"> <!--Pocket--> <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"></a> </li> </ul> </div>
5.記事下SNSシェアボタンの設定(※使う場合はデフォルトで設定されているソーシャルパーツのチェックをすべて外してください)
設定方法:「デザイン」>「カスタマイズ」>「記事」>「記事上下のカスタマイズ」>「記事下」に以下コピペ。
<!--SNSフォローボタン記事下--> <div class="sns-share-button-bottom"> <ul class="sns-area"> <li class="custom-sns-button"> <!--はてブ--> <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"></a> </li> <li class="custom-sns-button"> <!--Facebook--> <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650,height=450,menubar=no, toolbar=no, scrollbars=yes'); return false;" ></a> </li> <li class="custom-sns-button"> <!--Twitter--> <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"></a> </li> <li class="custom-sns-button"> <!--Google+--> <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650,height=450,menubar=no,toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"></a> </li> <li class="custom-sns-button"> <!--Pocket--> <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"></a> </li> </ul> </div>
6-1.SNSボタン付きプロフィールの設定
設定方法:「デザイン」>「カスタマイズ」>「サイドバー」>「モジュールを追加」>「HTML」に以下コピペ。
<!--SNSボタン付きプロフィール--> <div class="hatena-custom-module-prof-box"> <div class="profile"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kurocraft7522/20171014/20171014011557.jpg" width="200" height="200"> <p class="prof-name">名前を入力</p> <div class="prof-des">ここにプロフィール情報を入力</div> </div> <!--フォローボタン--> <div class="follow-button"> <ul class="follow-mark"> <li class="follow-bar"><a class="f-hatena" href="https://blog.hatena.ne.jp/あなたのID/ブログのURL(http/httpsなどは取り除いて貼り付けてください)/subscribe" target="_blank"></a></li> <li class="follow-bar"><a class="f-twitter" href="TwitterURLをリンク" target="_blank"></a></li> <li class="follow-bar"><a class="f-facebook" href="FacebookURLをリンク" target="_blank"></a></li> <li class="follow-bar"><a class="f-feedly" href="FeedlyURLをリンク" target="_blank"></a></li> </ul> </div> </div>
6-2.SNSボタン付きプロフィールの画像の設定方法
設定方法:
①はてなフォトライフ(http://f.hatena.ne.jp/)にジャンプ。
②「マイフォト」>「アップロード」でプロフィールにしたい画像をアップロードします。
③画像をアップロード出来たら、アップロードした画像を右クリックメニューより別タブで開きます。
④最後に別タブで表示されたURLをそのままimg src=の中に入れれば設定は完了です。
※一応これ以外にも設定方法はあるかもしれませんが、私自身が知っているやり方はこれだけですので、もっと手軽な方法があるのであれば、どなたかご教授頂けると幸いです。
デモサイト
(2018/06/21)表示だけ確認できるデモサイトです→http://kurocraft7522.hatenablog.jp/
お問い合わせ
不具合等ございましたら、お気軽にご連絡くださいませ。
※なお、不具合の対応は無償でおこなうものの、追加カスタマイズ等はすべて有料になります。そちらもご理解いただけると幸いです。
以下、作者への連絡ルートです。
Twitter:
※どちらからでも対応可能です。Twitterのお問い合わせはすべてDM欄からのみ承ります。
(趣味垢)
・https://twitter.com/kurocraft7522
(仕事垢)
・https://twitter.com/kurocraft0312
Mail:
※返信は基本72時間以内に対応いたしますが、内容によってはお答えできかねるものもございますので、その点はあらかじめご了承くださいませ。
kurocraft0312☆gmail.com
☆→@に変換してください。
2018/09/06追記(左カラムへ切り替えるためのカスタマイズ)
いつも当テーマ「Warrior」をご利用いただき誠にありがとうございます。
最近テーマ利用者の方からカスタマイズについてメールやTwitterで「サイドバーを右カラムから左カラムへカスタマイズしたい」とご相談いただいたので、左カラム用のカスタマイズコードを追記します。
もしサイドバーのメニューを右から左に置き換えたいという方いましたら、ぜひ一度お試しください。
設定方法:「デザイン」>「カスタマイズ」>「デザインCSS」に以下コピペ。
/*左カラム対応*/ #content-inner { flex-direction: row-reverse; }
更新履歴
2018.06.01 初版公開!!
2018.06.06 スマホデザインでグローバルナビが横長に広がってしまうバグを修正しました。(ご指摘いただきありがとうございます!)
2018.06.09 ヘッダータイトルがレスポンシブ化できていなかったので、修正いたしました。
2018.06.11 テーマ説明欄に「はじめに」の項目を追加いたしました。
2018.06.15 「4.記事上SNSシェアボタンの設定」ソーシャルボタンの設定について一部追記+「6-1.SNSボタン付きプロフィールの設定」のはてな読者ボタンのURLの書き方を追加いたしました。(別タブで読者登録用の画面が出力できるようになります)
2018.06.21 表示確認できるデモサイトを追加しました。
2018.09.06 左カラム対応用のコードを追記しました。&パーツ名称だけ書かれてもなかなかイメージがつかないと思うので、キャプチャの説明も一部追加しました。
2018.09.14 テーマのインストール数が100突破しました。皆様いつも使っていただき誠にありがとうございます!今後とも「Warrior」をよろしくお願いいたします。
2018.09.16 当テーマ「Warrior」利用者の方に紹介記事を書いて頂きました✨ハシちゃそ(@Flash_back_born)さん誠にありがとうございます!
2018.11.08 検索ボックスのサジェスト機能を使ったときに起こるデザイン崩れを修正しました。
2019.01.18 テーマのインストール数が200突破しました🎉
皆様いつも使っていただき誠にありがとうございます!今後とも「Warrior」をよろしくお願いいたします。
2020.01.06 テーマのインストール数が300突破しました🎉
皆様いつも使っていただき誠にありがとうございます!リリース当初は、こんなに使って頂けるとは夢にも思っていませんでした!色んな方に使って頂けて大変嬉しく思っております。今後とも「Warrior」をどうぞよろしくお願いいたします。