iiie.nagoya

物づくりと生活、"経験"を記事へ

【'19/07/13】
当ブログで使用しているカスタマイズテーマ『riseup』をテーマストアで公開しました。はてなブログを使用している方なら無料でインストールすることが可能です。(はてなProでの利用を推奨しています)

詳細は以下のページに記載しています。
https://www.iiie.nagoya/entry/2019/07/13/210356

ブログテーマページはこちら
http://blog.hatena.ne.jp/-/store/theme/17680117127217464048

はてなブログの新テーマ「riseup」をリリースしました

※このページでは、はてなブログテーマの「riseup」の紹介をしています。記事などで紹介する際は、テーマ配布先ではなく、こちらのページを掲載してください。

 

f:id:gorislog:20190714163706p:plain

 

はじめまして、ブログテーマ「riseup」の制作者のsyttgです。

 

riseupで二作目のテーマとなります。他のテーマをご覧になりたい方はこちらへ

 

近年、パソコンからスマホへ、インターネット閲覧端末のシェアが移っているとのことで、レスポンシブデザイン+動きのあるデザインを中心にカスタマイズを行っています。

前作でも、動きのあるデザインを使用し、閲覧者がタップ(クリック)したくなるような仕掛けを施しました。

 

今回の「riseup」も前作同様、動きのあるデザインを心掛け、制作を進めました。

 

もくじ

  

新テーマ「riseup」とは

 

f:id:gorislog:20190727221601j:plain

 

手軽さゆえにモバイル端末のユーザーが増え、サイト閲覧者の傾向を探ると「7割」がスマホユーザーだった!という有名ブログがあったり、かの有名な「Google」がPCサイトではなくスマホサイトの評価を基準する(モバイルファーストインデックス)と発表するなど、今ではモバイル端末のユーザー目線でWebデザインをするのが当たり前になりつつあります。

 

その影響もうけ、今回展開する「riseup」はモバイルファーストなブログテーマ制作をしました。

 

旧来のブロガーの方は、2カラムのオーソドックスなデザインを好みますが、あえて1カラムデザインを採用。サイト回遊率を上げるためにも、フルスクリーンメニューの設置や、フッターに上部への戻りボタンを設置、ユーザーが見飽きないためにも嫌がられない程度の動きのあるブログデザインにしています。

 

また、最近のモバイル端末の大型化に伴い、文字サイズやGoogleFontsをデフォルトで使用することで、文章を読みやすいデザインにしました。

 

ちなみに、riseupは、

 

rise up = 浮き上がる・湧き上がる

 

和訳の通り、riseupは浮き上がること。記事一覧ページのカード部にJavascript+CSSの浮き上がる動きを追加しています。大小さまざまなモーションを追加することで、飽きないデザインを目指しました。

 

現状、当ブログでもriseupを使用していますが、念のためデモブログも掲載しています。デザインの確認する際は、こちらも参考にしてください。

 

gorislog.hatenablog.com 

 

PCデザイン

f:id:gorislog:20190713095633p:plain

タブレットデザイン

f:id:gorislog:20190713095702p:plain

スマホデザイン

f:id:gorislog:20190713095724p:plain

 

タブレットデザイン・スマホデザインは共通です(閲覧端末サイズに最適化されます)

 

@mediaを使用したリサイズを行うようにカスタマイズしています。モバイルファーストなCSS記入をしているので、スマホ閲覧がしやすいようにデザインされています。

 

文字サイズも通常よりも大きく指定しているので、スマホで文章を読む際に目を細める必要が無く、ストレスの感じないデザインにしました。

 

テーマ製作者のメインブログでも使用しています

www.iiie.nagoya

 

動き

 

動きはjQuery + Javascript + CSSで実装

f:id:gorislog:20190713102735p:plain

CSSのみで表現できなかったので、jQueryやJavascript等を使用して動きを実現しています。

 

テーマインストール時に、指定した部位にコードを追記する必要があるので、他のテーマと比べ、インストールに手間がかかります

 

インストール方法

①ブログの設定

riseupは、「トップページ表示 一覧形式「レスポンシブデザイン」を推奨しています。

 

※もちろん、トップページ表示 一覧形式でなくても表示はできますが、トップページがカード型デザインにできないので、riseupの「浮き上がるモーション」の強みがなくなります。

 

トップページ表示 一覧形式は、はてなProで使用できる機能です。はてなProでなくても、トップページを一覧形式で表示することはできますが、ここでは割愛します。Googleなどで検索してください。

 

f:id:gorislog:20190723195012p:plain

 

ログイン後、はてなブログのツールバー(ブログのトップページなどで)で自分のid部分を選択。表示されるメニューから「ダッシュボード」を選択します。

 

f:id:gorislog:20190722195219p:plain

 

設定より、詳細設定を開き、下へスクロールします。

 

f:id:gorislog:20190722195245p:plain

 

トップページ表示形式(PC版)の「一覧形式」にチェックボックスを入れます。

 

ページ最下部までスクロールし、「変更する」ボタンをクリックして、変更を保存します。

 

PC版と記載されていますが、レスポンシブデザインを指定するとPCデザインとスマホデザインが同様の表示形式となるので、スマホも一覧形式の表示になります。

 

次に、レスポンシブデザインの指定方法です。

レスポンシブデザインは、PC、スマホ、タブレットなど、異なる表示環境でも、最適化されるデザインのことで、riseupもレスポンシブデザイン対応のテーマとなっています。CSSで最適化されるように指定しているので、設定ではチェックボックスをいれるだけで設定ができます。

 

f:id:gorislog:20190723194929p:plain

 

ダッシュボードで、デザインを選択。

 

f:id:gorislog:20190722195714p:plain

 

デザイン画面で「スマートフォン(スマートフォンのマーク)」→「詳細設定」→「レスポンシブデザイン」のチェックマークを押し、「変更を保存」。

 

これで、「トップページ表示 一覧形式」と「レスポンシブデザイン」の設定が完了です。

 

②ブログにテーマを適応する

ブログテーマをテーマストアよりインストールします。

 

blog.hatena.ne.jp

 

 

f:id:gorislog:20190713203430p:plain

 

ログインした状態で、riseupのテーマページ、右カラム側に表示されている「プレビューしてインストール」をクリックし、適応したいブログを選択します。

 

f:id:gorislog:20190713203500p:plain

 

適応したいブログに、riseupのテーマが仮インストールされ、表示確認がされます。

 

上写真では表示されていますが、この時点では記事カードが正しく表示されません(このあと、コードを追加する事によって表示されます)。

 

カードが表示されなくても、「このテーマをインストール」をクリックしてください。

 

※注意 )「このテーマをインストール」を押すと、それまで使用していたテーマやカスタマイズが消去されます。『デザインCSS』内に追加コードを記述している場合は、テーマインストール前に「メモ帳」などにバックアップを取っておくことをお勧めします。

 

③CDNを利用して、jQueryを使えるようにする。

jQueryを使えるよう、CDNを使って読み込みます。

 

f:id:gorislog:20190713203524p:plain

 

「設定」→「詳細設定」を開きます。

 

f:id:gorislog:20190713203540p:plain

 

画面をスクロールし、「headに要素を追加」へCDN読み込みコードを記述します。

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

上記のコードをコピー&ペーストしてください。

 

記述が完了したら、ページ最下部へスクロールし、「変更を保存」のボタンをクリックします。

 

④javascriptを記載し、浮き上がるモーションを追加する

f:id:gorislog:20190713203556p:plain

 

デザイン画面で「カスタマイズ(スパナのマーク)」→「ヘッダ」の順にクリック、表示。

 

タイトル下の部分にコードを記述します。

 

f:id:gorislog:20190713203651p:plain

 

タイトル下の白いエリアをクリックし、拡大されたエリアにコードを記載します。

 

<script>
$(function(){
$(window).scroll(function (){
$('.page-archive .archive-entry').each(function(){
var targetElement = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > targetElement - windowHeight + 50){
$(this).css('opacity','1');
$(this).css('transform','translateY(0)');
}
});
});
jQuery(window).scroll();
});
</script>

 

上記のコードをコピー&ペースト。

 

記載後、「変更を保存する」のボタンをクリックします。

 

以上でインストールは終了

ブログにテーマを適用、JQueryのCDNを読み込み、浮き上がるJavascriptを追記すれば、テーマの基本的なインストールは完了です。

 

フルスクリーンメニューや、フッターのカスタマイズは追記します。

 

フルスクリーンメニューの追加方法【追記 '19/07/14】

f:id:gorislog:20190714165050p:plain

 

フルスクリーンメニューは、PCデザインだと右上にある「MENU」、スマホ・タブレットデザインだと、右上にある三本線をクリックすると、ブラウザ全面が黒透明になって表示されるメニュー画面の事です。

 

デモブログでは表示されていませんが、CSSにはコードがあらかじめ記載されているので、タイトル下に表示したい内容を書き加えるだけで簡単に追加できます。

 

f:id:gorislog:20190714165647p:plain

 

デザイン画面で「カスタマイズ(スパナのマーク)」→「ヘッダ」→「タイトル下」にコードを追加します。

 

当ブログに記載しているコードはこちら

 

<a class="hamburger" href="#cp_fullscreenmenu"></a>
<ul id="cp_fullscreenmenu">
<li><a href="https://www.iiie.nagoya/first"><i class="blogicon-good"></i> おすすめ記事</a></li>
<li><a href="https://www.iiie.nagoya/iiie"><i class="blogicon-member"></i> ブログについて</a></li>
<li><a href="https://www.iiie.nagoya/searchbox"><i class="blogicon-search"></i> 記事検索</a></li>
<li><a href="https://www.iiie.nagoya/mail"><i class="blogicon-mail"></i> 問い合わせ</a></li>
<li><a href="javascript:history.back()">  <i class="blogicon-close"></i>  </a></li>
</ul>

 

下記のコードをベースに使用してください。

<a class="hamburger" href="#cp_fullscreenmenu"></a>
<ul id="cp_fullscreenmenu">

<li><a href="URL"><i class="アイコンコード"></i> 表示する文字</a></li>

<li><a href="URL"><i class="アイコンコード"></i> 表示する文字</a></li>

<li><a href="URL"><i class="アイコンコード"></i> 表示する文字</a></li>

</ul>

 

<li>~</li>間の要素を増やせば、メニュー数を増やすことができますが、ブラウザ表示領域に限界があるので、1~5個当たりがおすすめです。

また、仮に表示できた場合でも、左から右へのスライドモーションは5個までしか指定していないので、6個目からは別途指定する必要があるうえ、遅延してスライドする動作が正常に働かない場合があります。

 

<i class="アイコンコード"></i>は不要な場合削除してください。

アイコンは下記のサイトにて、はてなブログ公式のアイコンコードが掲載されています。(CDN不要)

 

www.foxism.jp

 

閉じるボタンを設置したい場合は下記のコードを使用してください。

 

<li><a href="javascript:history.back()">  <i class="blogicon-close"></i>  </a></li>

 

フルスクリーンメニューは、ブラウザバックで閉じることができるので、Javascriptで閉じるコードを使用しています。

 

f:id:gorislog:20190714170839p:plain

 

 コードを追記し終えたら、変更を保存します。

 

変更が完了すると、ページ右上にメニューボタン(三本線)が表示されますので、動作確認お願いします。

 

トップページへ戻る機能付きフッターの追加方法【追記 '19/07/23】

f:id:gorislog:20190723193947p:plain

 

riseupでは、レスポンシブデザインに対応するため、フレキシブルな2列フッターを採用しています。PCデザインでは、2列表示、スマホ・タブレット端末では、左側が上に、右側が下へ、1列表示へ変更されます。

 

また、Javascriptを使用した、ページ上部への回帰ボタンも実装されており、スマホなどでの閲覧時に簡単にページ上部へ戻ることができます。

 

f:id:gorislog:20190723194453p:plain

 

デザイン画面で「カスタマイズ(スパナマーク)」→「フッタ」で白い領域を選択。

 

拡大された領域に、コードを記載します。

 

<footer id="footer">
<div class="scroll_button">
<a href="#"><i class="blogicon-redirect"></i></a>
</div>
<div class="footer-box">
<div class="footer-box-in">
左側ボックス
</div>
<div class="footer-box-in">
右側ボックス
</div>
</div>
</footer>

<script>
jQuery(function($) {
var topBtn = $('.scroll_button');
topBtn.hide();
$(window).scroll(function() {
if( $(this).scrollTop() > 100 ) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function() {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>

<script>
$(window).on('scroll', function () {
var doch = $(document).innerHeight();
var winh = $(window).innerHeight();
var bottom = doch - winh;
if (bottom <= $(window).scrollTop()) {
console.log('#globalheader-container');
}
});
</script>

 

左側ボックス 右側ボックス の部分に表示したい内容を記載します。

 

【追記 2019/07/25.】

f:id:gorislog:20190725184931p:plain

 

フッター部の追加時に、公式フッター(Powerd by ~)との間に空きが存在し、白い帯が走ったようなデザインになっていました。現在では、隙間を無くし、フッターと公式フッターは地続きになったデザインへ修正されています。(Ver 1.1として公開)

 

記事一覧カードの”動き”をカスタマイズする方法【追記 '19/07/27】

 

別の記事として掲載しています。

www.iiie.nagoya

 

 

タイトル部をページ上部に固定表示する【追記 '19/07/28】

 

f:id:gorislog:20190728092716g:plain

 

タイトル・フルスクリーンメニューボタンを、ページトップに固定する方法です。

 

メニューが固定できるので、サイト回遊率アップが望めますね。もちろん、スマホ・タブレットも対応しています。

 

f:id:gorislog:20190727213419p:plain

 

デザイン画面にて、『カスタマイズ(スパナマーク)』→『デザインCSS』を選択。

 

白い領域を選択し、以下のコードを追記します。

 

#blog-title {
position: fixed;
margin: -5em;
right: 0;
left: 0;
z-index: 9;
}
#top-editarea {
margin-top: 6em;
margin-bottom: 1em;
}
.hamburger {
position: fixed;
z-index: 10;
right: 1em;
}
@media (min-width: 768px) {
.hamburger {
top: .1em;
right: 2em;
border-top: none;
}
}

 

追記する際は、一番最後に記載してください。(テーマ読み込み用のコードより前に記載すると正常に動作しません)

 

ご注意

riseupの不具合部分については、随時修正を行っていきます。Verアップ時に、各々で追加した「追加CSS」の部分と干渉し、デザインが崩れる場合があります。その点はご了承ください。(当テーマに対するsyttgが公開しているカスタマイズ記事は問題ないように指定する予定です)

 

更新履歴

2019/07/13. 紹介ページを掲載

2019/07/13. Ver1.0を公開

2019/07/25. フッター部のバグを修正 (Ver.1.1)