iiie.nagoya

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

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

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

 

f:id:gorislog:20190714163706p:plain

 

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

 

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

 

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

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

 

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

 

もくじ

  

新テーマ「riseup」とは

 

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

 

和訳の通り、riseupは浮き上がること。記事一覧ページのカード部にJavascript+CSSの浮き上がる動きを追加しています。

 

他にも大小さまざまな動きを追加し、閲覧者が楽しめるデザインを目指しました。

 

blog.hatena.ne.jp

 

デザイン

PC、タブレット・スマホで最適な閲覧環境になる『レスポンシブデザイン』を採用しています。

 

現在、当ブログでも使用していますが、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等を使用して動きを実現しています。

 

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

 

インストール方法

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

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

 

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

 

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

 

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

 

ご注意

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

 

更新履歴

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

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