喫煙者は絶対に「LINEペイ」を使ったほうがいい理由-いろんなQR決済サービスをまとめてみた
最近「PayPay」を初めとしたバーコード決済サービスが盛り上がっています。
キャッシュレス時代の幕開けですね!
今回はバーコード決済サービスを使ってみた感想と様々なバーコード決済サービスを紹介していこうと思います。
海外のキャッシュレス決済比率
引用先
経済産業省データ:キャッシュレス化推進に向けた国内外の現状認識
韓国が96.4%でキャッシュレス化が進んでいますね!海外ではこのキャッシュレスが当たり前となっています。
政府もキャッシュレス化に力を入れており急速に「キャッシュレス化」が進むものと思われます。
喫煙者は「LINE Pay」を使うべき理由
煙草にもポイントが付きます。
これがデカすぎる!
450円なので15ポイント加算されます。
一日一箱吸う人は年間「5475円」還元されます。
いろんなバーコード決済サービス
楽天ペイ
メリット
- 楽天ポイントが使える!
アフィリエイトや楽天証券をやっている方はいっぱいポイントを持っているはずなので楽天のサービスをよく利用する方は使うべきですね!
楽天カードを支払いカードに登録しているとポイントの付与率が高くなるので、楽天カードを持ち、楽天経済圏でさまざまなサービスとメリットを受けたいと思う人にお勧めだ。楽天カードを持っていない場合は、他のバーコード/QRコード決済サービス以上のメリットは特に感じられない。
キャンペーン
- アプリのご登録で100ポイントプレゼントキャンペーンを実施中!→ 楽天ペイ
- 最大20%還元キャンペーン
使える店舗
PayPay
ソフトバンクとヤフーが共同出資し設立したPayPay株式会社が運営する決済サービスで日本のキャッシュレス決済の「火付け役」ですね。
メリット
- 支払い金額の0.5%を還元
- Yahoo!マネーで支払える
キャンペーン
LINE Pay
LINEによってリリースされた決済アプリであり、友達同士の割り勘や送金などができます。
メリット
- 最大10万円までの不正使用補償サービス
- 暗号化された通信
- 友だちに送金、送金依頼、割り勘ができる
- ECサイトでも決済できる
キャンペーン
Origami Pay
財布も、カードも、さようなら。今日からはスマホアプリでお支払い。
身も心も軽くなって、なんとオトクまでついてくる。
Origami Payをスマホに入れて。こんにちは、キャッシュレス。あたらしい生活がはじまるよ。
https://origami.com/origami-pay/
Amazon Pay
PCでもスマートフォンでも、Amazonアカウントで支払えるから、手間をかけずにかんたん、安全にお買い物できます。
Amazonアカウントをお持ちなら、面倒な情報入力は不要。登録された配送先情報やクレジットカード情報を利用してお買い物できます。
メルペイ
いらないものを売って、新しいお金をつくるメルカリ。
そのお金で、新しいものを買う、新しい体験をするメルペイ。
二つが揃うことで生まれるのは、何もしなければ、そこになかったはずのお金で暮らしが豊かになる、夢が実現する世界です。
そのために、わたしたちメルペイは、決済サービスを皮切りにさまざまな金融サービスへとフィールドを広げていきます。
これからも様々な会社が参入してくると思います。どの会社が覇権を握るのか見極めていかなければいけませんね。中国の「アリペイ」か「WeChat Pay」か?日本の「ペイペイ」か「楽天ペイ」か?それとも「LINE Pay」か?それとも?
マニアックで少し変わった面白いサイトまとめ
ネットの世界は非常に面白いサイトで溢れています。「サイトのデザインのみを紹介するサイト」や「子育てブログ」、「芸能人の日記」、「クレジットカードの比較サイト」、「漫画の感想サイト」などがあります。しかし中には誰が必要としているのかわからない非常に変わったマニアックなサイトがあります。
今回は様々なサイトがある中でひときわ異彩を放つ「マニアック」な「変わった」サイトをご紹介していきます。
見つけ次第更新していきますのでどうぞよろしくお願いします。
このサイトも変わってるよ!というのがあればTwitterやコメントで教えていただければと思います。
TEAM廃墟
とある廃墟マニア達のサイトで「ショッピングモールの廃墟」や「鉱山跡地」「廃屋」など様々「廃墟」の写真をコメントと共に紹介する廃墟のサイトです。
初回訪問時に、必ずお読み下さいと書かれているページには
私の基本的なスタンスとしては、より多くの人に実際の廃墟に触れ、魅力を直接感じていただきたいと思っています。 廃墟よりもリスクの高い趣味や危険なスポーツは、世の中にいっぱいあります。 ホームセンターで買い求められる程度の安価な装備と探究心、周りへの心づかいさえあれば、誰にでもはじめられる趣味でしょう。 廃墟を訪れる事で、歴史や文化、自然科学等の勉強になることもしばしばです。
愛を感じますね!
私は別に廃墟マニアではありませんがなぜか興味をそそられます。
こういった人気(ひとけ)のない場所というのにはなぜかロマンを感じてしまいます。
大島てる
1937年の老舗の会社である「株式会社大島てる」が運営する事故物件の情報提供ウェブサイトで不動産に関するネガティブ情報をみんなでマッピングしていく投稿型サイトとなっています。
非常に有名なサイトですね。
管理人の「大島てる」さんは結構いろんなメディアに出ています。
ニコニコ生放送番組「ホラーアシスタント女子会」
椅子の種類 | ソファから車椅子まで
椅子のことについてのみ書かれた「椅子のサイト」
ようこそ、めくるめく椅子の世界へ!
普段何気なく使っている椅子。
朝食を食べる時も、仕事中も、リビングでくつろぐ時も、常に椅子と共にあります。
椅子はインテリアの中でも特に人気の高いアイテム。椅子をデザイナーズチェアに変えるだけで、空間をお洒落にランクアップさせてくれます。
もちろん、椅子を選ぶ際には、デザイン性だけでなく、機能性・耐用性も考慮して選択したいものです。
さて、そんな椅子にはタイプや用途によって様々な種類があります。当サイトではダイニングチェアやソファといった一般的に使われる椅子から 医療や介護の現場で使われる車椅子まで、幅広い種類の椅子を紹介します。
ようこそ、めくるめく椅子の世界へ!
山さ行がねが
「廃道をゆく」や「大研究 日本の道路120万キロ 」などの著者で日本の廃道・廃線・隧道愛好家で知られるフリーライター「平沼 義之」さんのサイトで、日本の様々な廃道についてのレポートと写真が掲載されています。
退職理由の考え方~辞表・例文まとめ~
企業(会社)を辞める際には、退職の意志・理由を上司に語る必要があります。いざ上司に話そうと思ったけど…辞表も一緒に出す?退職届・願い?引き継ぎは?など疑問が沢山。そんな疑問に応えるサイトです。辞表の書き方や例文、退職理由のランキングなどもまとめてあります。
サイト名の通り「退職」する理由についてのサイトで仕事を辞める準備から再就職まできっちりと書かれています。
ウソだと思う退職理由ランキングは結構面白いです。
(2019/03/23 更新)
Hacker Typer
キーボードをテキトーにカチャカチャするだけでそれっぽいコードを書いてくれるサイトです。
個人で映画を撮影している方やYoutubeで使えそうなサイトだと思います。
SPAM MUSEUM
ユーザー投稿型サイトでテーマが「面白い迷惑メール」となっており非常に面白いサイトとなっています。
たまに来る迷惑メールですが中にはすさまじく面白いものがありますよね?
それをみんなで評価しようというサイトです。
例えば「助けてください!伝説の男、会釈山本が来日します!」
まず件名が面白い笑
気になった方はぜひ見てみてください。話のネタで使えると思います。女性を口説くときにどうぞ!
以上、異彩を放つ「マニアック」な「変わった」サイトのご紹介を終わります。面白いサイトが見つかったら随時更新していきますのでどうぞよろしくお願いいたします。
はてなブログに目の負担を軽くする『ナイトモード』を実装する方法!
「Twitter」や「YouTube」などで見る夜間(ナイト)モードを当ブログにも実装してみました。
今回は「はてなブログにナイトモード」を実装する方法をご紹介していきます。
ナイトモードとは?
ナイトモードは目の負担を軽くする効果があるといわれております。僕なんかは夜になると強い光がぼける「網膜色素変性症」で基本的に昼も夜もナイトモードやダークテーマで結構重宝しています。
実装方法
jQueryの「toggleClass」メソッドを使えば簡単に実装できます。
サンプル
タッチしてみてください。
ナイトモード
「toggleClass」はこのようにボタンをタッチしたら要素を追加してもう一回タッチしたら追加した要素を消すということができます。これを使えばナイトモードを簡単に実装することができます。
<div id="buttsdsf" class="syokibt"> <p class="nightp">ナイトモード</p> </div> <script> $("#buttsdsf").click(function(){ $(this).toggleClass("clicked"); $('html').toggleClass("clicked"); $('body').toggleClass("clicked"); }); </script> <style> <style> #buttsdsf.syokibt { background: #e5e6e6; padding: 15px; color: #4b545d; } .nightp{ margin: 0; } #buttsdsf.syokibt { background: url(ここにナイトモード前のスイッチ画像); background-position: right; background-repeat: no-repeat; background-size: contain; } #buttsdsf.clicked{ background: url(ここにナイトモード後のスイッチ画像); background-position: right; background-repeat: no-repeat; background-size: contain; } </style>
この場合タッチされたらhtmlとbody、#buttsdsfに「clicked」というclassを追加しています。
あとはテーマに合わせて色を変えていけば実装完了です。
css例
css
html.clicked { background: #10171e; } body.page-index.enable-bottom-editarea.page-archive.globalheader-off.clicked { background: #10171e; color: #f7f8f9; } .clicked a.entry-title-link { color: #1B95E0; }
基本的に「.clicked a.entry-title-link 」のように色を変える要素のclassの前に「.clicked」を選択します。
以上で『ナイトモード』の実装カスタマイズのご紹介を終了します。
後日、テーマ「Primeiro」での『ナイトモード』の実装カスタマイズコピペ記事を書きますのでお楽しみに!
月間PV数100万以上の6個の人気サイトが使っているフォントを比較!おすすめは2つ
以前、月間PV100万以上の人気Webサイトの記事トップのデザインについてお話したことがあります。
webサイトを多くの人に見てもらうためには情報量はもちろんですが「読みやすさ」が重要であると知りました。
今回は読みやすさの要であるフォントに注目し「どんなフォントを使っているのか?」や「行間」などについて掘り下げます。
読みやすいサイト・ブログを作る上でフォント選びは重要な部分になりますのでフォント選びの参考になればと思います。
参考にするウェブサイトは全部で6個です。
Google Japan Blog
皆さん大好きGoogleの日本語ブログサイトで特殊な作りのシングルページのサイトとなっておりシンプルで洗練されたデザインが素晴らしいなと思います。
フォント:Noto Sans JP
詳細
タイトル
- サイズ(font-size):24px
- 太さ(font-weight):nomal
本文
- font-size:17px
- font-weight:ノーマル
- 行間(line-height): 32px
シンプルな記事ですが圧倒的な見やすさを誇る「Google Japan Blog」
行間と本文の文字の大きさなどすべてが完璧といってもよいでしょう。
最も参考になるサイトの一つだと思います。
ボクシルマガジン
SaaS比較サイト「ボクシル」の月間350万PVを誇る情報メディアです。
多くの人が見ているサイトで記事も読みやすく多くの情報を発信しています。
フォント:Noto Sans Japanese
Google Japan Blogと同じNoto Sans JPフォントの古いバージョン「Noto Sans Japanese」です。
詳細
タイトル
従業員満足度(ES)調査の目的・項目・実施手順 | 質問サンプルとサービスも - 従業員満足度調査 | ボクシルマガジン
- font-size:28px
- line-height:1.7
- letter-spacing:0.8px
- font-weight:bold
本文
- font-size:16px
- line-height:1.9
- letter-spacing:1.1px
印象的なのは空間の使い方で文章と文章の間が離れており一呼吸おいて読めるような感じがしますね。
manablog
月間PV100万以上の有名ブロガーのマナブさんのサイト。
読みやすくブログのネタも参考になります。
フォント:Helvetica NeueとNoto Sans JP
iOSのシステムフォント等で使われるメジャーなフォントの一つで英語や数字はHelvetica Neueで日本語はNoto Sans JPとなっております。
Helvetica Neueは有料フォントで、すべて買うと4万円ほどになります。
Helveticaフォントを使いたいが買うのはちょっとという人は、似ている「Arial」フォントを使うといいと思います。
詳細
タイトル
- font-size:25px
- font-weight:600
本文
- font-size:17px
こちらも文章と文章の間が離れており読みやすいイメージを受けます。
バズ部
フォント:游ゴシック体
こちらの游ゴシック体は日本語のメジャーなフォントの一つでスタンダードな角ゴシック体ファミリーで漢字が見やすくなるように作られています。
詳細
タイトル
- font-size:28px
- line-height:1.7
- letter-spacing:0.8px
- font-weight:bold
本文
- font-size:16px
- line-height:1.9
- letter-spacing:1.1px
KACOO[カコー]
Webライターの求人サイトでデザインなどが優れており記事ページはライター求人サイトだけあってすさまじく読みやすい。
フォント:游ゴシック体
やはりメジャーなだけあって多くのサイトで使われています
詳細
タイトル
-
font-size:30px
-
line-height:150%
-
font-weight:bold
本文
-
font-size:16px
-
line-height:1.75
文春オンライン
フォント:Noto Sans JP
詳細
タイトル
-
font-size:.32px
-
line-height:1.4
-
font-weight:500
本文
-
font-size:16px
-
line-height:1.8
以上、6個のサイトを分析しましたが、「Noto Sans JP」か「游ゴシック体」かに分かれる結果となりました。
これらは多くの人が見るサイトなので「Noto Sans JP」や「游ゴシック体」はユーザーにもなじみのあるものになってきていると思います。
おすすめのフォントは?と聞かれたらこの二つのうちのどれかを迷わずおすすめできます。
それでは「月間PV数100万以上の6個の人気サイトが使っているフォントを比較!おすすめは2つ」を終了いたします。
「若い世代」にウケるサービスの作りかた
今の時代、流行を作っているのは女性と子供であると断言します。
特に「若い世代」女性を中心とした10代から20代にウケるコンテンツが流行っています。
例えば、『TikTok』や『Instagram』などが代表的な例です。
その他にもテレビでは「DIY」「お買い物系」「家事」「恋愛」などの女性にウけるジャンルが視聴率を取っています。
YoutubeではYoutuberが写真集を出したり、音楽を出したりといわゆる「アイドル化」が進んでいます。
今回の記事は女性と子供にウけているコンテンツを例になぜウけているのか?かんたんに調査した調査レポートです。
女性と子供にウけているコンテンツ
TikTok
どんなアプリ
中国の「ByteDance」という会社がリリースしたアプリで2016年9月にサービスが開始されました。
15秒の動画をユーザーが投稿・視聴し、コメントでコミュニケーションできる「ショート音楽動画コミュニティ」アプリです。
【Tik Tok公式チャンネル】新しい流行を作ろう!なんちゃってダンス襲来
いつ頃から流行に?
1日平均起動43回!「あごのせ」10代を中心にハマるユーザー続出の「TikTok」 – アプリ分析メディア・App Ape Lab
アプリ分析メディア・App Ape Labのデータによると2017年の11月から急激にユーザー数が伸び始めていることが分かります。
Youtubeでの広告がうざいうざいと騒がれ始めた時期でもありますね。
なぜうけた?
承認欲求の高まり
2006年ごろから誰しもが持っていた有名になりたい!人気者になりたい!という人間の基本欲求「承認欲求」がSNSを通じて爆発し
世はまさに『俺を見ろ。私を見ろ。』時代!!
TikTokはこの「承認欲求」をドンピシャにとらえたコンセプトとなっています。
流行を作ったのは女子高生で2001年または2002年に生また子供たちとなります、彼女らが5歳、6歳の時にはもうスマホが流行やっており彼女らはまさに「SNS」時代の申し子というわけです。
バンドワゴン効果
選挙などでよくみられる支持する人が多いほどその選択に対する支持がより強固になる現象で、「みんながやっているから」という考えでアプリを始めた人も多いと思います。
ダンスの義務化
2012年から中学校の保健体育ではダンスが必修となり、もはやダンスが日常になっており10代なら誰しもがなじみのあるものになりました。
Tik Tokで人気のある動画はダンス系で10代の子たちからすればダンスが最も参入しやすいコンテンツになります。
投稿ハードルの低さ
動画を簡単に盛る(可愛く自分を加工したり、面白く自分を加工したり)ことができYoutubeなどと比べて動画の質が問われず究極を言えば誰かの真似をするだけでフォロワーが増えていきます。
誰でもインフルエンサーになれる仕組みですね。
実際はその「真似」にアレンジを加えた動画がウけているイメージがあります。
「誰かの真似」というものには嫌悪感を抱く人は多く「パクり問題」で炎上することがよくありますが、 TikTokのコミュニティでは「だれかの真似」「パクリ」を寛容にも受けて入れてくれます。
強く言えば「パクり」を前提にしたアプリということになります。
もう「パクり」が嫌われる時代ではなくなってきたのかもしれませんね!
拡散率/注目率の高さ
TikTokのアプリを立ち上げるとまず「おすすめ」という項目で新規ユーザーの動画を表示します。
ここに表示されると多くのユーザーに見られ、再生数やいいね・フォローワーが増えやすくなります。
さらにはハッシュタグと呼ばれるカテゴリーのようなものをつけることができ、同じ曲を使っている動画などを手軽に探しテレビのザッピングのようなことができたりどんな動画も注目させることが容易です。
心理効果
音楽が前提:「コントロール効果」が働く
コントロール効果(感情誘導効果)があります。
これは、音楽のジャンルやテンポなどでお客様の心理を動かすというものです。
店舗BGMで売上に変化が?BGMに秘められた“コントロール効果”とは|コラム「店舗経営」|お店BGMを作れるアプリ OTORAKU -音・楽-
真似をする:「カメレオン効果」が働く
誰かと会話をしているときに、ふと気づいたら相手の仕草を真似していたという経験はあるだろうか? 例えば関西弁で話している友人と話を続けていると、うっかり関西弁もどきになってしまうという経験は? あるいは、友人の口癖がうつって、いつのまにか自分の口から吐いて出てしまったということは?
こういった経験はよく起こりうるという。この社会心理学現象は『カメレオン効果』と呼ばれている。私たちはカメレオンのように周囲の環境に溶け込もうとする傾向がある。それによって社会的な安心感を得ているのだ。
我々がこれを無意識に行っているということだ。真似を意識的に始めた場合、思いがけない副作用が生まれる可能性も否めない。
上記にも挙げた「承認欲求」や「バンドワゴン効果」なども流行った理由の一つだと思われます。
じつは男性の割合のほうが多い
1日平均起動43回!「あごのせ」10代を中心にハマるユーザー続出の「TikTok」 – アプリ分析メディア・App Ape Lab
男性の割合が多いですがそのほとんどは動画は出さず動画を見るだけの「見る専」が多いなというイメージですね。
基本的に最近の流行りは「女性が流行らして男性が後から乗る」のが多いですね!
どんなアプリ?
2010年にリリースされ2012年にFacebookに買収されました。
デベロッパーは Instagram, LLC
インスタグラムは、写真や動画をメインとしたSNSで日本での人気も高く、世界を含めると約10億人が利用していると言われています。芸能人などのインフルエンサーが多く利用している。
いつ頃流行ったか?
2014年2月に日本語アカウントが開設され日本語対応されその翌年の2015年からにかけて爆発的に流行りました。
2017年には「インスタ映え」という言葉が流行語大賞に選ばれました。
飲食店などでは「インスタ映え」するメニューを開発したりと新たなビジネスチャンスが生まれ「古民家」などもインスタ映えの対象となり古民家を転用したショップが流行りました。
「インスタ映え」という言葉が初めて投稿された日に驚きました。
「インスタ映え」という言葉が初めて投稿されたのは、いつだったと思いますか?
正解は・・・「2011年」です。より正確に言うと、2011年3月4日に投稿されていて、投稿したアカウントは著名人やいわゆるインフルエンサーという方ではありませんでした。内容は自身が投稿した写真の「インスタ映え」を気にするものであり、今と同じ意味で「インスタ映え」という言葉が使われています。
2017年新語・流行語大賞「インスタ映え」のSNS初投稿は、実は20XX年!? - Platinum Data Blog by BrainPad
なぜ流行ったか?
海外の「セレブ」が愛用し、日本の芸能人へと広がり芸能人から一般へと流行っていったファッションの流行パターンで。
こちらも「バンドワゴン効果」で流行ったのではと思います。
「いいね!」や「フォロワー」などのコミュニティ機能もウケる原因でしょう!
テキストから写真・動画へ
Twitterなどはテキストが交流に使われていたが、Instagramは写真や動画を手段として相手をより近くに感じる交流に変わった。
投稿の気軽さ
TikTokと同じくInstagramに投稿する写真や動画はフィルターを掛け「盛る」ことができる。
どんな写真でも手軽にかっこよく・美しく・かわいくできる。
ストーリー
画像や動画を一時的に公開できる、ストーリー機能といものがあります。
投稿した写真や動画は24時間以内に消える機能で、本当になぜか安心感が沸き気軽に投稿しようという気分になります。
気軽に投稿したストーリーが原因で炎上した人が何人もいますが....
拡散性・注目率
投稿する写真には「ハッシュタグ」をつけることができ多くの人に注目させることができます。
このハッシュタグは簡単に思いを伝える手段でもあります。
こちらも「承認欲求」が働きます。
根底にあるのは「有名になりたい」です!
嫉妬
漂うオサレ感
インスタで有名な人を「インスタグラマー」といい彼ら・彼女らは自らの私生活をおしゃれにアップしてみたり、「かわいい自撮り」を上げたり企業とのタイアップなどで年間1500万ほど稼いでいる人たちがいたりします。
そのような「インフルエンサー」の存在は嫉妬や憧れを呼んでいます。
SHOWROOM
どんなアプリ?
SHOWROOM株式会社が2013年11月25日にリリースしたサービス
誰もがスターになれる仮想ライブ空間をキャッチコピーに誰でも簡単に生配信できる動画配信アプリです。
ギフティングいわゆる投げ銭がライブを盛り上げます。
2019年2月にはジャニーズ事務所との「バーチャルジャニーズプロジェクト(VJP)」がスタートしました。
こちらも「誰でもスターになれる」という承認欲求を刺激します。
ここから書くことがほとんど同じになるのでウケているコンテンツをご紹介していきます。
MixChannel
Mirrativ
これらが「若い世代」にウケているサービスになります。
結論
若い世代・女性にウケるコンテンツには以下の共通点があることが分かった。
- 「承認欲求」を刺激するコンセプト
- 気軽にできるという点
- 盛れる
- コミュニティーがある
「誰でも有名人」・「誰でもスター」・「誰でもインフルエンサー」
とにかく人間の根底にある「有名になりたい」という欲を刺激するサービスがウケるのである。
これから、サービスを作ろうとしている人たちの参考になればと思います。
雑談
女の子を普通の一眼カメラで取ろうとしている人がいたんですが、
「普通のカメラで撮らんといてや!」という声を聞きました。
盛ることが普通になってるんやなと思うとおもしろいですね。
現実見て、盛っていない自分自身の顔に自信持ってほしいですね。
月間PV100万以上の人気Webサイト4つの記事トップデザインを参考にはてなブログをカスタマイズ
月間PV100万以上の人気のWebサイトは「読ませるための工夫」や「読みやすいデザイン」、「直帰率を下げるための工夫」などを施していたりとデザインの参考になります。
今回はそれらの人気WEBサイトの「記事トップデザイン」に注目!
記事トップのデザインを参考にしてはてなブログをカスタマイズしていくカスタマイズ記事となります。
カテゴリをいくつ表示しているかも参考にしていきましょう!
Primeiroを使っている方へ
トップページのカテゴリが多い場合や長い場合、カテゴリタグが重なる可能性があります。
cssにこちらを記述しておいてください。
.page-archive .archive-entries .archive-entry .categories a:nth-child(2) { display: none; } .page-archive .archive-entries .archive-entry .categories a:nth-child(3) { display: none; } .page-archive .archive-entries .archive-entry .categories a:nth-child(4) { display: none; } .page-archive .archive-entries .archive-entry .categories a:nth-child(5) { display: none; }
それでは始めていきます!
参考にするWebサイト
LIG
デザイン
「タイトル、著者、データ、カテゴリー」
カテゴリーデザインはシンプルでカテゴリー表示数は多くて5つですね。
テーマ「Primeiro」のコピペ
記事下
<div class="athersmaru"> <div class="profiruimg"> <img src="プロフィール画像のurl"></div> <div class="orofinames"> <a href="aboutページのurl">くろやん</a> </div> </div>
css
.entry-header { position: relative; padding: 25px 10px 45px; border-bottom: 1px solid #f7f8f9; } .entry-header .entry-categories.categories a { color: #666; border: 1px solid #444; } .entry-header .date.entry-date.first { position: absolute; bottom: 45px; right: 0; } .athersmaru{ display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .profiruimg img{ border-radius: 50%; border: 2px solid #e5e6e6; } .orofinames{ margin-left: 10px; } .orofinames a{ text-decoration: none; color: #444; font-size: 13px; font-weight: 700; } .orofinames a:hover{ color: #eee; }
Engadget Japanese
デザイン
「タイトル、コメント、著者、データ、カテゴリー、sns」
著者部分のなかに日付、カテゴリーを格納したデザインです。
snsのシェア数を表示しているのがいいですね!
LIGもそうですが、多数の人が記事を書くサイトはタイトル下に著者情報を記載していますね。
カテゴリ表示数は1つのみです。
テーマ「Primeiro」のコピペ
head内にjqueryを読み込ませる。
管理画面→設定→詳細設定→検索エンジン最適化→headに要素を追加
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
記事下
<div class="athersmaru"> <div class="profiruimg"> <img src="プロフィール画像のurl"></div> <div class="orofinames"> <a href="aboutページのurl">くろやん</a> </div> </div> <div class="share-buttons"> <div class="share-text hatebu-count"> </div> <div class="countsdsa">シェア</div> </div> <script type="text/javascript"> var countHatebu = function (response) { var nodeList = document.querySelectorAll('.hatebu-count') Array.prototype.forEach.call(nodeList, function (v) { v.innerHTML = response || 0 }) } document.addEventListener('DOMContentLoaded', function () { var addScript = function (src) { var script = document.createElement('script') script.src = src document.body.appendChild(script) } addScript('https://b.hatena.ne.jp/entry.count?url={Permalink}&callback=countHatebu') }) </script>
css
.athersmaru { display: flex; align-items: start; width: 40%; } .profiruimg img{ border-radius: 50%; border: 2px solid #e5e6e6; } .orofinames{ margin-left: 10px; } .orofinames a{ text-decoration: none; color: #444; font-size: 13px; font-weight: 700; } .orofinames a:hover{ color: #eee; } .entry-header-html { display: flex; } .entry-header .entry-categories.categories { position: absolute; bottom: 44px; left: 160px; } .entry-header .entry-categories.categories:hover { position: absolute; bottom: 44px; left: 160px; } .entry-header .date.entry-date.first { position: absolute; bottom: 50px; left: 80px; } .entry-header .entry-categories.categories a { color: #9a58b5; border: 0px solid #444; font-weight: 400; font-size: 12px; } .entry-header .entry-categories.categories a:hover { border: 0px solid #66bdb3; color: #9a58b5; } .share-buttons { width: 10%; text-align: center; position: relative; display: grid; align-items: center; border-left: 1px solid #aaa; } @media screen and (max-width: 991px){ .athersmaru { width: 80%; } .share-buttons { width: 20%; } ul.circle_group { margin: auto; list-style: none; padding: 0; position: absolute; bottom: 0px; } }
はてブのみをカウントして表示しています。
あとはsnsボタンを設置して終了です!
snsボタンはこちらの記事を参考にしました。
www.daipanman.com
このデザインを少しだけいじります。
/* リンク領域をブロック全体に */ .sns_circle a{ position:absolute; top:0; left:0; width:100%; height:100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-indent:-999px; color:#FFF; } /* 回り込み解除のためのクラス */ .clearfix{ zoom:1; } .clearfix:after{ content:""; display: block; clear: both; height: 0; visibility:hidden; } /* サークルのスタイル */ .sns_circle { position: relative; width: 36px; height: 25px; margin: 0 10px 0 10px; float: left; list-style: none; color: #eee; border-right: 1px solid #e5e6e6; } /* Webフォントに関する指定 */ .sns_circle span{ position: absolute; font-size: 16px; } /* マウスオーバー時のスタイル */ .sns_circle:hover{ color: #444; } /* シェアボタンエリア */ ul.circle_group{ margin:auto; list-style: none; padding:0; } li.sns_circle.pocket:last-child { border: none; } /* Font Awesome hatena bookmark(手作り) */ .fa-hatena:before { content: "B!"; font-family: Verdana; font-weight: bold; } @media screen and (max-width: 991px){ ul.circle_group { margin: auto; list-style: none; padding: 0; position: absolute; bottom: 0px; } }
CNET Japan
デザイン
「アイキャッチ画像、タイトル、著者、データ、sns」
カテゴリーを表示せず「パンくずリスト」でどのカテゴリに属すかを示すデザインですね。
シンプルですっきりとした印象を受けますね!
タイトル横にアイキャッチ画像を設置しているのはあまり見かけませんので珍しいデザインだと思います。
テーマ「Primeiro」のコピペ
記事上
<script> $('<div class="kokonigazougahairu"></div>').insertBefore('.entry-title'); </script> <script> $(window).on("DOMContentLoaded", function(){ $('.kokonigazougahairu').prepend('<img src="' + $('meta[property="og:image"').attr('content') + '">'); }); </script>
css
.entry-header .entry-categories.categories { display: none; } .entry-title { color: #020814; font-size: 21px; font-weight: 700; letter-spacing: -0.03rem; text-align: left; padding: 15px 0 30px; margin: 0; line-height: 1.3; } .kokonigazougahairu{ float: left; width: 160px; height: 90px; overflow: hidden; display: block; position: relative; margin-right: 15px; } .kokonigazougahairu img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; }
Roomie
デザイン
「アイキャッチ画像、タイトル、データ、カテゴリ」
アイキャッチ画像をカバーにタイトルを表示する「今風」のおしゃれなデザインですね!
カテゴリのハッシュタグがおしゃれです。
カテゴリ数は5から
テーマ「Primeiro」のコピペ
記事上
<script> $('<div class="kokonigazougahairu"></div>').insertBefore('.entry-title'); </script> <script> $(window).on("DOMContentLoaded", function(){ $('.kokonigazougahairu').prepend('<img src="' + $('meta[property="og:image"').attr('content') + '">'); }); </script> <style> .kokonigazougahairu { width: 100%; position: relative; } .kokonigazougahairu img{ width: 100%; height: auto; position: relative; } .entry-title { padding: 5px 10px; position: absolute; bottom: 135px; } .entry-title a{ color: #fff; } .entry-header { position: relative; padding: 0; } .entry-header .entry-categories.categories a { color: #fff; border: none; } .entry-header .entry-categories.categories a:hover { border: none; } .entry-header .entry-categories.categories:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .entry-header .date.entry-date.first { left: 0; z-index: 5; bottom: 30px; } .entry-header .date.entry-date.first a { color: #fff; } .entry-header .entry-categories.categories a::before{ content:"#"; } </style>
月間PV100万以上の人気のWebサイトはまだまだありますので探してみて「これいいな!」と思うデザインを見つけてみてください。
以上で「月間PV100万以上の人気Webサイト」の4つのデザインのご紹介を終わります。
僕がおすすめする入門書
【コピペ】はてなブログのヘッダーデザイン・アニメーションカスタマイズ9選
この記事は「はてなブログ」テーマ『Primeiro』のカスタム記事です。
他のテーマでも使えると思いますのでぜひ試してみてください。
ヘッダーはユーザーがサイトを訪れた際に一番最初に視界に入るポイントでSEO的にも重要なパーツですので慎重にデザインにしてくださいね。
まず、サイドバーデザインを先に行っているほうがデザインしやすいと思いますので以下の記事を参考にやっておいてください。
はてなブログのヘッダーデザインについて書かれた記事はたくさんありますのでそれらの記事もご紹介していきます。
それでは、ヘッダーデザイン例を9種類ご紹介していきたいと思います。
ロゴ+バー
隠しテキストになりますのであまりお勧めしません!
ですが「はてなブログ」の仕様上こうせざるを得ないのでご了承ください。
STEP1:まずはロゴをご用意
ロゴ作成のコツ
hitori-koho.com
自作するのは面倒!だという方はロゴジェネレーターを使おう!
おすすめのロゴジェネレーター
TwitterやFacebookなどのsnsで使用するサイズに合わせた画像や背景透過の画像なども一気に作ってくれます。
無料でネットショップをつくることができるサービスのSTORES.jpのロゴジェネレーターで簡単にロゴが作れます。
その他のロゴジェネレーター
・Free Logo Maker, Create Custom Logo Designs Online – DesignEvo
STEP2:「css」をコピペ
/*調整*/ header#blog-title { padding: 0; display: block; } /*バー*/ #blog-description { /*テーマに合わせて変えてください*/ background: #668bff; padding: 10px; color: #fff; margin-top: 0; } /*ロゴ表示*/ #title { display: block; /*画像に合わせて変えてください*/ background: url(画像url); padding: 15px;; background-size: 90px; background-position: center; background-repeat: no-repeat; } #title a{ opacity: 0; }
バーはいらない方はこちらでロゴのみを表示できます
#blog-description { display: none; }
ロゴ以外でももちろん使えます。
画像背景(アニメーション)
ハイクオリティなアニメーションを使ったらもっとおしゃれになると思いますのでスキルがある方はやってみてください。
STEP1:まずは画像または動画をご用意
画像のフリー素材
動画のフリー素材
記事でご紹介されているサイトでよさそうなものをダウンロードしよう!
mp4などの動画ファイルはgifに変換して使用しましょう。
STEP2:「css」をコピペ
#blog-title { background: url(動画・画像のurl); background-attachment: fixed; background-repeat: round; } #title a { /* 文字の色 */ color: #f7f8f9; /* 文字の影 */ text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; } #blog-description { font-weight: normal; font-size: .8rem; margin: 1em 0 0; /* 文字の色 */ color: #fff; /* 文字の影 */ text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; } /*調整*/ header#blog-title { padding: 50px; display: block; }
フォント+バー
このブログのデザインです。
STEP1: フォントを読み込ませる
サルワカさんの記事を参考にフォントを読み込ませてください。
詳しく書かれているので僕が解説する必要がありません。
さすがサルワカ!略してサスワカ!
STEP2:「css」をコピペ
/*フォントを指定する*/ #title a { font-family: 'フォントを指定する'; } /*幅調整*/ h1#title { padding: 15px; } /*バー*/ h2#blog-description { background: #668bff; padding: 10px; color: #fff; margin-top: 0; } /*調整*/ header#blog-title { display: block; padding: 0px; }
ブログヘッダーを消しちゃう
SEO的には最悪ですので使用は避けましょう!
はてなブログテーマ「Primeiro」のデモページで使用しているデザインでデモページやサンプルページでヘッダーの告知を目立たせたいとき等にどうぞ!
テキストアニメーション+バー
跳ねるテキストアニメーション
#title { animation: titlekey .4s ease infinite alternate; } @keyframes titlekey{ 0% {transform: translateY(0px);} 100% {transform: translateY(-10px);} } h1#title { padding: 15px; } h2#blog-description { background: #fe928b; padding: 10px; color: #fff; margin-top: 0; } header#blog-title { display: block; padding: 0px; }
かっこが点滅するアニメーション
スライドする文字は疑似要素でできそうですがちょっと難しかったのでかっこのみです。
すみません。
#title:before { content: '['; color: #16a085; -webkit-animation-name: opacity; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-name: opacity; animation-duration: 2s; animation-iteration-count: infinite; } #title:after { content: ' ]'; color: #16a085; -webkit-animation-name: opacity; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-name: opacity; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes opacity { 0%, 100% {opacity:0;} 50% {opacity:1;} } h1#title { padding: 15px; } h2#blog-description { background: #fe928b; padding: 10px; color: #fff; margin-top: 0; } header#blog-title { display: block; padding: 0px; }
文字が追加されていくエフェクト(バー)
ヘッダー→タイトル下
<script> var string = "Hello I'm Laith Haleem Form Ghammas Love Developing Websites"; var str = string.split(""); var el = document.getElementById('blog-description'); (function animate() { str.length > 0 ? el.innerHTML += str.shift() : clearTimeout(running); var running = setTimeout(animate, 90); })(); </script>
css
h1#title { padding: 15px; } h2#blog-description { background: #fe928b; padding: 10px; color: #fff; margin-top: 0; } header#blog-title { display: block; padding: 0px; }
溶けていくようなエフェクト
css
#title { position: relative; padding: 4em; filter: contrast(20); background-color: black; overflow: hidden; } #title a { color: white; font-size: 5rem; font-weight: 700; text-transform: uppercase; line-height: 1; filter: blur(0.5rem); animation: letterspacing 10s infinite alternate cubic-bezier(.2, 0, 0, 1); display: block; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); } @keyframes letterspacing { 0% { letter-spacing: -5rem; filter: blur(0.5rem); } 50% { filter: blur(0.5rem); } 100% { letter-spacing: -1rem; filter: blur(1.5rem); } } @keyframes letterspacing { 0% { letter-spacing: -5rem; -webkit-filter: blur(0.5rem); filter: blur(0.5rem); } 50% { -webkit-filter: blur(0.5rem); filter: blur(0.5rem); } 100% { letter-spacing: 1rem; -webkit-filter: blur(1.5rem); filter: blur(1.5rem); } } h2#blog-description { background: #fe928b; padding: 10px; color: #fff; margin-top: 0; } header#blog-title { display: block; padding: 0px; }
とりあえずこんなところでしょう!
他にもいっぱいありますので是非探してみてください。
あまり派手すぎると邪魔になるかもしれませんのでお気をつけて!
それでは、はてなブログのヘッダーデザイン・アニメーションカスタマイズ9選のご紹介を終わります!
自分なりのオリジナリティを出していきましょう!
Primeiroの紹介記事を書いていますのでテーマに興味がある方はどうぞ!
【コピペ】はてなブログテーマ「Primeiro」のサイドバーデザイン全12種類のご紹介
はてなブログテーマ「Primeiro」のポイントはサイドバーです。
このサイドバーのデザインでブログの印象が変わるといってもいいでしょう!
今回は、サイドバーのグラデーションデザインとシンプルな単色デザインの全12種類のデザイン例をご紹介します。
cssをコピーして使ってください。
サイドバーカラーデザイン
色彩心理学的に「ライト系」はソフトで軽い印象、爽やかで清潔なイメージを、「ダーク系」なら落ち着いた印象、大人っぽく重厚なイメージを与えます。
カラーというのは大事ですのでブログにあった色を選んでみてくださいね。
cssを記述する場所
デザイン > スパナアイコン(カスタマイズ) > デザインCSS
シンプル・単色
シンプルだからこそよい、単色デザインの例をご紹介していきます。
ダーク系
gray
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a:hover { color: #666; } #box2 { background-color: #6b7377; }
Bleu Nuit
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a:hover { color: #666; } #box2 { background-color: #0E4352; }
Cardinal
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a:hover { color: #666; } #box2 { background-color: #AD362C; }
ライト系
Bleu Myosotis
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a:hover { color: #666; } #box2 { background-color: #74A5CF; }
SafeColor
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a:hover { color: #666; } #box2 { background-color: #79CA9A; }
Siro
#box2-inner .hatena-module-profile .profile-description p { color: #666; margin-top: 10px; } .hatena-module-title a { text-decoration: none; padding: 14px 0; color: #666; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #666; } .id span.user-name-nickname { color: #666; } .hatena-module-title { color: #666; } #box2 { background-color: #FBF9F4; }
グラデーション
最近のウェブデザインでよく見かける、鮮やかなグラデーションカラーを使ったデザイン例をご紹介します。
グラデーションの配色に迷ったら配色ツールを使用してみてください。
ここではWebGradientsから取得したグラデーションカラーを使用します。
試してみていいな!と思うもの6種類をご紹介します。
ダーク系
Morpheus Den
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } #box2 { background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%); } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; }
Premium Dark
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } #box2 { background-image: linear-gradient(to right, #434343 0%, black 100%); } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; }
Aqua Splash
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } #box2 { background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%); } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; }
ライト系
Fly High
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a:hover { color: #666; } #box2 { background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); }
Strong Bliss
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a:hover { color: #666; } #box2 { background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); }
Over Sun
.hatena-module-title { color: #f7f8f9; } .hatena-module-body a { color: #f7f8f9; } .hatena-module-title a { color: #fafafa; } .id span.user-name-nickname { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a { color: #f7f8f9; } #box2-inner .hatena-module-body.hatena-module-body li a:hover { color: #666; } #box2 { background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%); }
さいごに
いかがだったでしょうか?
色を変えるだけでガラッと印象が変わりましたね。
配色ツールなどを使って自分だけのオリジナルのブログを作っていきましょう。
サイドバーデザイン以外にもカスタマイズ指南記事を用意していますのでぜひ見ていってください。
左固定サイドバーのはてなブログテーマ「Primeiro」を公開しました!
はてなブログのテーマを作ってみました。
その名も「Primeiro」
私のブログ名まんまです。
初めて作ったのですがうまくいったと思います。
バグやデザインの崩れを見つけ次第、改善してアップデートしていきます!
皆様にもご協力いただければと思います。
それではテーマのご紹介と注意点等を解説していきます。
テーマのダウンロードはこちらからどうぞ!
テーマを導入したらやること・知っておくこと
「Primeiro」はカスタマイズ前提で初期デザインをシンプルにしていますので少しだけカスタマイズが必要になります。
アイキャッチ画像
※1060×700の画像をアイキャッチ画像に設定することを推奨します。
サイズが小さすぎたりすると画質が荒くなることがあります。
レスポンシブデザイン
テーマ「Primeiro」はレスポンシブデザインですのでPC・スマホとも同じデザインで使用できます。
デザイン→スマートフォン→詳細設定の「レスポンシブデザイン」にチェック
PCのみにテーマを適用する場合はしなくても大丈夫です。
一覧表示
全文形式の場合は違ったデザインになりますのでご注意ください。
設定→詳細設定→トップページの表示形式→「一覧形式」にチェック
記事数
※トップページの記事数は8記事・14記事・20記事でデザインしています。
設定→詳細設定→トップページの記事数→
8記事(14・20記事)
デザイン
Windows標準のメールアプリやGoogleの様々なサービスで見られる、左サイドバー固定レイアウトで左サイドバーのレイアウトはコンテンツをよりよく見せることができるといわれており直帰率・離脱率が右サイドバーに比べて低く、他のページへの遷移が起こりやすく、より長くユーザーを留めておく滞在率が平均より長くなります。
人間は無意識的に左から見るとされており、広告の世界やウェブデザインの世界で有名な「Fの法則」、「Zの法則」的にも左サイドバーのほうが優れているとされます。
トップページ
トップ記事・4番目の記事を大きく表示するデザインです。
スマホの場合は1番目・4番目・5番目・8番目の記事を大きく表示します。
PC
カスタマイズ
二次配布違反などのテーマに実装していいものか分からなかったモノ、読者になるボタンデザインやヘッダー・フッターの背景画像などをカスタマイズしていきます。
記述する場所は「デザイン」→「カスタマイズ」→「デザインcss」です。
トップページのカテゴリ
トップページのカテゴリが多い場合や長い場合、カテゴリタグが重なる可能性があります。
cssにこちらを記述しておいてください。
.page-archive .archive-entries .archive-entry .categories a:nth-child(2) { display: none; } .page-archive .archive-entries .archive-entry .categories a:nth-child(3) { display: none; } .page-archive .archive-entries .archive-entry .categories a:nth-child(4) { display: none; } .page-archive .archive-entries .archive-entry .categories a:nth-child(5) { display: none; }
ブログロゴを表示
ロゴがない方はこちらのロゴクリエーターでご用意ください。
TwitterやFacebookなどのsnsで使用するサイズに合わせた画像や背景透過の画像なども一気に作ってくれます。
ロゴメーカー&ロゴクリエーター - 無料のオンラインロゴジェネレーター
サイドバーにHTMLモジュールを追加します。
タイトルは空欄にしておきます
html
<a class="imgcenter" href="自分のブログのURL"> <img src="自分のブログのロゴ画像" alt="ロゴ"> </a>
css
.imgcenter{ text-align: center; display: block; }
ブログロゴを表示しない場合
css
@media (min-width: 992px) { #box2-inner { padding-top: 40px; } }
読者になるボタンカスタマイズ
/*フォローされていないときの色*/ .hatena-follow-button.unsubscribing { background: #444; } /*ホバー時の色*/ .hatena-follow-button.subscribing.hover{ background: #eee url(none) no-repeat 0 -18px; } /*フォローされているときの色*/ .hatena-follow-button.subscribing { color: #f7f8f9!important; background: #233a50 url(none) no-repeat 0 -18px; } .hatena-follow-button.subscribing { background: url(https://cdn.blog.st-hatena.com/images/theme/hatena-follow-button.png?version=4761c38…&env=production) no-repeat 0 -18px,-o-linear-gradient(top,#fff 0,#ddd 100%); } .hatena-follow-button-box .subscription-count-box { display: none; position: relative; float: right; margin: 8px 0 0 5px!important; } .hatena-follow-button { width: 80%; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); text-align: center; display: inline-block; zoom: 1; height: 18px!important; padding-left: 20px; padding-right: 5px; min-width: 40px; border: 1px solid rgba(0, 0, 0, 0)!important; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 10px; transition: .3s ease; transition-property: opacity,border,color,background; -o-transition: .3s ease; -o-transition-property: opacity,border,color,background; -moz-transition: .3s ease; -moz-transition-property: opacity,border,color,background; -webkit-transition: .3s ease; -webkit-transition-property: opacity,border,color,background; line-height: 18px!important; font-weight: 700; text-decoration: none; color: #fff!important; background: #ebebeb; float: none; letter-spacing: 0!important; white-space: nowrap; -webkit-text-overflow: ellipsis; text-overflow: ellipsis; padding: 10px; color: #fff; overflow: hidden; } .hatena-follow-button-box .subscription-count { float: right; border: 1px solid #bbb; height: 18px; line-height: 18px; padding: 0 5px; display: block; min-width: 8px; font-size: 12px; color: #454545!important; background: #fff; border-radius: 50px; -moz-border-radius: 3px; -webkit-border-radius: 50px; margin-left: -1px; position: relative; z-index: 9; font-family: Helvetica,Ariel,sans-serif; } .hatena-follow-button.subscribing.hover{ width: 80%; }
ヘッダーデザイン
カテゴリータグデザイン
注目の記事を表示する。
フォントデザイン
ナイトモード実装
見出しデザイン
カスタマイズ記事投稿予定
関連記事デザイン
カスタマイズ記事を投稿していく予定ですのでお楽しみに!
コーヒーでも飲みながら待っていてください。
これほしい!というのがあればコメント欄でどうぞ!
今ごろReactNativeについて調べてみた!ReactNativeで作られたオープンソースアプリや採用アプリをご紹介します。
- ReactNativeとは
- ReactNativeを採用した有名なアプリケーション
- Facebook『Facebook』
- Facebook『instagram』
- 株式会社メルカリ 『mercari』
- 株式会社エアークローゼット 『airCloset』
- ReactNativeで作られたオープンソースのアプリ
- CodePicks(コードピックス)
- HackerBuzz-ReactNative
- Rocket.Chat React Native Mobile
- ReactNative開発環境ツール
- Expo.io
- デメリット
- ReactNativeを採用した有名なアプリケーション
ReactNativeとは
Facebook社が開発したクロスプラットフォーム開発フレームワークの事です。
通常のアプリ開発(ネイティブアプリ開発)はiosならxcodeを使ってのswiftでの開発、androidではandroidstudioを使ってのjavaで開発するが、ReactNativeではそれら開発環境、OSに依存する事なくios、android共に同じコード、同じ開発環境で開発出来るため非常に多くの企業が採用しているフレームワークの一つとなります。
続きを読む初めてのReactNativeメモ⑤axiosでgetしたデータを表示、別のページで表示するルーティング
表示するだけは何とか出来ましたが詳細ページにデータを送る方法がよくわからないので調べる。
- ルーティング
- HomeScreen.js
- constructor
- componentWillMount
- renderImages
- .mapとは
- onPressでパラメータを渡す
- render
- DetailScreen.js
- render
参考にできそうな記事を発見しました。
続きを読む初めてのReactNativeメモ③ TODOリストを作ってみる
今回は、プログラミングチュートリアルでよく出題されるTODOアプリを色々な記事を参考に作ってみようと思います。
todoとは
英語で“to do”
為すべきことの意を持ちます。簡単に言うと『やること』
todoアプリは『やる事リスト』の様なモノです。
iosではリマインダーというアプリがデフォルトで採用されていたりします。
突然、ビッグデータについて言い出す。
デフォルトのメモ帳アプリや有名なtodoアプリはビッグデータ収集の為に書いたデータを収集してそうで僕は使う気になりません。
ラインやツイッター、フェイスブック、最たる例はGoogleなどもパーソナルデータを収集し日夜、日々、毎秒ビッグデータを成長させています。
生きているだけで誰かの利益になるのが現代です。
そしてそのビッグデータがAIを成長させます。
現代に生きる身としては受け入れなければいけませんが僕はその事について啓蒙していきたい。(全身義体の英雄風)
急に語ってみましたが、本題に戻りましょう。
TODOアプリ作ってみる
デザインを考える。
モックアップと呼ぶらしい。
モックアップとは?
モックアップとは、ウェブサイトやアプリのデザインで使われる方法のことです。何を制作するのかにもよりますが、デザイン業務では画面の要素や機能を固めていくプロセスが共通してあります。このときに使われるのがモックアップで、完成イメージを視覚的に表示して確認していくために使われます。
モックアップとは?基礎知識とデザインフローにおける位置づけ | CodeCampus
参考にする記事
コンポーメントを作成しそれを読み込ませる。
src > compoments > TodoInput
TodoInputをインポート
import TodoInput from './src/components/TodoInput';
TodoInputを使用する。
<TodoInput />
TodoInputの内容を表示できた!
Reactの大原則
React にはpropsというシステムがあります。当然ながらReact NativeもReactなのでpropsというシステムがあります。
このpropsというシステムでは親子関係に当たるコンポーネントにおいて親から子に値を渡すことができます。そして、子から親へ値を渡すことはできないというルールがあります。
【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】2 - Qiita
分かりやすくて助かります!
初めてのReactNativeメモ② コンポーメント、スタイル・画面遷移でエラーだらけ
View
UIを構築するための最も基本的なコンポーネント
UI は ユーザー インターフェイス(User Interface)の略です。Interfaceとは「接点、接触面」という意味で、 UI はユーザーと製品・サービスの接触面を指すので、「 ユーザー の目に触れる部分使用する部分」はすべて UI とみなすことができます。ホームページの場合、パソコンやスマートフォンに表示されるデザイン、 フォント など、製品であれば製品そのものや外観など、 ユーザー の視覚に触れる全ての情報が「 UI 」と呼ばれます。
UIとは?UXとは?違いを理解しよう!|ferret [フェレット]
htmlでいう
<View style = {styles.container}> <View style={{backgroundColor: 'blue', flex: 2}}> </View> <View style={{backgroundColor: 'red', flex: 3}}> </View> </View> const styles = StyleSheet.create({ container: { flex: 1, height: 100, padding: 20, }, });
文字を入れるには
Text
テキストを表示するためのReactコンポーネント。
<Text style={{color:'white'}}>Hello World!</Text>
代入?できる
constructor(props) { super(props); this.state = { titleText: "Bird's Nest", bodyText: 'This is not really a bird nest.' }; } <View style={{backgroundColor: 'red', flex: 3}}> <Text style={styles.baseText}> <Text style={styles.titleText} onPress={this.onPressTitle}> {this.state.titleText}{'\n'}{'\n'} </Text> <Text numberOfLines={5}> {this.state.bodyText} </Text> </Text> </View> baseText: { fontFamily: 'Cochin', }, titleText: { fontSize: 20, fontWeight: 'bold', }, container: { flex: 1, height: 100, padding: 20, },
改行
テンプレートリテラルを用いる
<Text> {` 1行目 2行目 `} </Text>
\nを{}で囲って用いる
<Text>1行目{"\n"}2行目</Text>
コンポーネントを分ける
<Text>1行目</Text> <Text>2行目</Text>
ページ遷移
react-navigation
npm install --save react-navigation
StackNavigator:
画面を積んでいくタイプのナビゲーター。Screen1 -> Screen2とかScreen1 -> Screen3とか画面を積んでツリーを作っていき、行きつ戻りつしていくという感じです。描画した画面内のコンポーネントを押したら別の画面に遷移させる、といったWebのリンクと同じようなケースで使う感じです。
TabNavigator:
タブタイプのナビゲーター。[Screen1、Screen2、Screen3]のように並列に画面を依存させずに扱い、切り替えていく感じです。画面遷移はTabNavigator自身が責任を持つ感じです。
DrawerNavigator:
ドロワータイプのナビゲーター。自分的にはタブが横なら、ドロワーは縦という程度の位置が違うくらいの認識です。ただ、タブに比べて登録できる画面数が多い(多くても比較的わかりにくくならない)ので、例えばユーザーによって画面数が変化するタイプのものであれば、これを使うのかなと思います。
import { StackNavigator } from 'react-navigation';
エラーが起こる
Unable to resolve "react-navigation" from "App.js"
しらべる
This error means that either you haven't installed the react-navigation module or that you have installed the module but didn't re-built your project using react-native run-android or react-native run-ios.
Following these steps should solve your issue:
Install react-navigation module.
Re-build your project.
Restart the packager by stopping the current packager and then starting the packager again with react-native start.Unable to resolve module 'react-navigation' - Stack Overflow
日本語訳
このエラーは、react-navigationモジュールをインストールしていないか、インストールしたのにプロジェクトを再構築していない、「react-native run-ios」「react-native run-android」を実行していない事を意味します。
次の手順に従って問題を解決してください。
react-navigationをインストール
プロジェクトを再構築
停止してから再度react-native start
やってみる。
できた!
チュートリアルを探してみる。
エラー!
(0 , _reactNativeNavigation.StackNavigator) is not a function
{ "dependencies": { "@expo/vector-icons": "6.2.1", "react-native-elements": "0.18.5", "react-navigation": "1.0.0-beta.27" } } "dependencies": { "react-navigation": "^3.3.0" },
バージョンの問題かな?
しらべる。
`react-native-navigation`ではなく `react-navigation`を使用する必要がある?
import { createStackNavigator, createAppContainer } from 'react-navigation';を使う必要がある?
facebook.github.io
を参考にやってみる!
import {createStackNavigator, createAppContainer} from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'ホームページ', }; render() { const {navigate} = this.props.navigation; return ( <View style= {{flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Button title="詳細ページへ" onPress={() => navigate('Detail')} /> </View> ); } } class DetailScreen extends React.Component { static navigationOptions = { title: '詳細ページ', }; render(){ return ( <View style= {{flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text> 詳細ページ </Text> </View> ); } } const MainNavigator = createStackNavigator({ Home: {screen: HomeScreen}, Detail: {screen: DetailScreen}, }); const App = createAppContainer(MainNavigator); export default App;
できた!これはうれしいww
大体はつかめてきたと思った!