はてなブックマーク

GoogleのDiscover…GoogleのオススメだとかGoogle砲とも呼ばれるものですが、最近メインサイトのほうがよく載るようになってきました。 全部が全部載るわけではもちろんないのですが、「あ、これはきっと載る」というのがわかってきましたし、わりと載るための必要なもの…のようなものがわかってきたのでそれを書いてみようと思います。 Discoverについて 最近の載った記事やら数字やら 気づいたことあれこれ ある程度の規模は必要？ 最新の情報であること 同じ話題ならサイト規模が大きいほうが選ばれる？ SNSなどが重要 大きな画像で載るための条件2つ 記事の内容は多くの人が興味を持つもの まとめ まず、Discoverというのは先にも書いたとおりGoogleのオススメだとかGoogle砲とも呼ばれています。Androidスマホならホーム画面の左端のページがこれになっていることが多いで

Twitterでいろいろいじってたら、自分ではない他人のツイートを自分のプロフィールのトップに固定する方法を見つけました。実用性はあまりないと思いますが、紹介します。 まずは固定したいツイートをリツイートします。今回は有名な橋本環奈さんの「彼女とデートなう。に使っていいよ」を使いました。 彼女とデートなう。 に使っていいよ😆笑 ちなみにこの写真は高校からバスで帰ってる時です。卒業式の日かな〜🤔 友達から送られてきた写真見てたら、これを見つけました🙌 遅れて流行りに乗ってしまいました。笑 pic.twitter.com/xgA3c3CQuY — 橋本環奈 (@H_KANNA_0203) June 5, 2017 2.twilogで自分のページを開く 過去のツイートをブログ形式で保存・表示するtwilogというサービスがあります。 これの自分のページに行きます。https://twilo

自分のサイトの文字の大きさ、いろいろ悩みますよね。どの大きさが一番読みやすいのか、どうしたらみんなに読んでもらえるのか。でも個人サイトであるのなら、最終的には自己満足でいいんです。私はそう思います。 はてなブログでも、よく「本文は何pxが読みやすい」「行間は◯◯だ」みたいな記事がよくあります。まぁその内容はそれぞれの人の好みやこだわりがあるので好きにすればいいと思います。それで悩むのも楽しさです。ただ、そういう記事の中であまり触れられることのない「vw」という単位があります。これを使ってみるのもまた面白いですよ、というお話です。 今回の始まり 今回の記事は、以下のはるなぴさんの記事を読んでの感想記事です。 別に内容に突っ込んだりするわけではないのですが、紹介です。 1行の文字数を考えるならvw 上のはるなぴさんの記事の中で、1行の文字数について触れられています。 印刷物の場合ですが横書きの

アイコンフォントって便利ですけど、基本的にフォントなので1色しか使えないですよね。でもフォントファイルを工夫すれば2色使えるんじゃないかと思って試してみました。 元ネタ この辺を読んだのと、前々からモヤモヤ考えていたのをやってみた感じです。上の2つはどちらもSVGを使ってやっていますが、それを（わざわざ）アイコンフォントでやってみよう、と。 サンプル alarm_clock arrow_down arrow_left arrow_right arrow_up booknote camera cart clock coffee compass heart home image magnifier mail map pencil setting website こんな感じです。 仕組み アイコンを表示する部分のhtmlはよくある感じで <i class="icon2-image"></i> と

Google Fontsは便利ですね。めっちゃ種類あるのですが、その中から最近お気に入りのものをいくつかメモのように残しておきます。 Montserrat フラットデザインとかなり相性がいいフォント。メインサイトの1つ前のタイトルに使っていました。cssのletter-spacingで少し字間を開けるとタイトル系では良い感じになります。 ウエイトも100から900までありますが、まぁ通常の400と700だけでも十分です。この2つで本文に使ってもうまく溶け込んで良い感じになります。 The quick brown fox jumps over the lazy dog.

はてなブログにおいて、はてなが提供しているドメインを使用した全てのブログが、HTTPSで配信できるようになりました。2月末にはてなブログで人気のテーマについて、テーマとしての対応状況を調べました。今回、より多くのブログでHTTPS化できるようになったので、テーマについても再調査してみました。 2018.06.17　現在は、はてな側でテーマ内のコードを一部書き換えたのでほとんどのテーマで対応済みになっています。この記事のリストの中では「Material」のみが、非対応となっています。 MinimalismとBlankが対応 再調査の結果、前回混在コンテンツに引っかかっていたブログのうち、「Minimalism」と「Blank」については修正されているのを確認しました。この2つのテーマでは（テーマの素の状態であれば）ちゃんと「保護された通信」となります。 追加含め人気テーマ25種類の対応状況

先日はてなブログがHTTPS化に対応した事により、私のテストブログの1つもHTTPS化することができました。以前HTTPS化が発表された時に「はてなブログの人気テーマはHTTPS化に対応しているのか？（混在コンテンツに引っかからないか？）」と調べたのですが、それから時間も経ち、実際にHTTPS化できるようになったので、改めて調べてみました。 なお、これは2018年2月28日現在での状況であり、順番は適当です。また、スクリーンショット画像はPC版の全文形式ですが、一覧形式にしても変わりません。スマホ版はチェックしていません。 2018.06.17　現在は、はてな側でテーマ内のコードを一部書き換えたのでほとんどのテーマで対応済みになっています。この記事のリスの中では「Material」のみが、非対応となっています。 2018.04.17　はてなが提供しているドメインを使用した全てのブログがHT

以前作成した「この記事が気に入ったらフォロー」の表示、このブログでも使っているのですが、そのスマホ表示のときのスタイルを考えてみました。 元となる基本的なコードなどはこちらをご覧ください。 その1：以前のもの まずは基本的なものとして、以前のものです。コードは前回のものを見てください。 その2：アイキャッチ画像を背景に スマホのような横幅が狭い時にアイキャッチ画像とテキストやボタンで2分割してしまうと狭いです。なのでアイキャッチ画像は背景にして、更に暗くしたりぼかしたりしています。 コードはhtml部分は変わらず、cssを少し変えています。pc用の部分はほぼ同じですが、ちょこっとだけ変えています。 .iine{ display: -webkit-flex; display: flex; margin: 0 0 1em 0; } .iine-l{ width: 50%; color: tra

このブログでもcssやhtmlのソースコードを掲載することがあるので、それの見た目も少し整えてみようと思います。 ソースコードの表示とシンタックスハイライト はてなブログにおいてソースコードを表示するには、「はてな記法」と「Markdown」で書くのが便利です。それぞれ、簡単な記法でソースコードをうまく表示してくれるほか、言語ごとに色付きで表示（シンタックスハイライト）することができます。 はてな記法の場合 はてな記法の場合、該当のコードの前後を>||と||<で挟めばOKです。また、最初の>||の|と|の間に言語名を入れると、それぞれの言語に応じた色付きの表示（シンタックスハイライト）で表示されます。 表示例： >|html| <header id="blog-title" data-brand="hatenablog"> <div id="blog-title-inner" > <div

2017年11月14日に、Firefoxの最新版Firefox 57がリリースされました。これは別名Firefox Quantumと呼ばれるほどの大型アップデートです。めっちゃ速くなるらしいですけど、その影響で対応していないアドオン（拡張機能）が使えなくなってしまいます。 このアップデートと過去の非対応アドオン切り捨てについては結構前からアナウンスがあったのですが、実際に「その日」を迎えてもなお、更新がなく切り捨てられてしまうものがたくさんありました。私が入れていたアドオンも例に漏れずそんな状態でした。 現状入れているアドオンと対応状況 このアップデートは、まぁアドオンを整理したり見直したりするいい機会にもなりました。現在、Firefox57はリリースされていますが私は自動更新を切っているのでまだFirefox56のままです。そしてインストールしているアドオンと状況は以下の通り。 使ってい

はてなブログではトップページや個別記事で投稿の日付が表示されますが、デフォルトではその形式を選んだりすることができません。なのでcssやjavascriptを使って強引にカスタマイズしてみました。 通常の表示とhtml -（ハイフン）を/（スラッシュ）に変える ○年○月○日の日本語表記に変える 年-月-日の順番を変える 曜日を表示させる 表示文字を変更する 追加変更されたhtml 月を数字ではなく英名で表示 投稿日にプラスして更新日を表示 まとめ 通常の表示とhtml まずは通常の表示を確認します。はてなブログでは投稿日がいくつかの場所で表示されます。とりあえず、個別記事のヘッダー、タイトル前に表示されているのは以下のようなhtmlになっています。 <div class="entry-date date first"> <a href="http://www.foxism.jp/archi

前々からhttps関連で話題になっていたChrome 62が正式リリースされました。さっそくChromeを起動してバージョンアップさせ、表示を見てみました。 https化してないサイト さっそく自分のhttps化してないサイトを見てみると…あ、iマークが付くだけなのか。 いやいや、たしかテキスト入力欄がアクティブになると…って話だったな。 テキストエリアをクリックして入力受付中にしてもなにも変化せず。あれ？ 入力し始めると「保護されていません」にぴょこんと変化しました。あ、そうか、そういうことか…。これ、あまり目立たないな。テキスト入力欄に目が行ってると変化したのに気づかないと思う。いつの間にか「保護されていません」表示になっている感じ。 https化しているサイト https化されているサイトはどうなのか、見てみると… https://creatorclip.info/ こっちは最初から

はてなブログのhttps化に向けた案内が出ましたが、その文章に対して具体的にどういった準備をしたらいいのかわからないというような方がチラホラいるようなので、準備（修正）しておいた方がいいことを書いてみます。 とは言え、私も専門的な知識を持っているわけではなく、あくまではてなの案内記事からわかったことのみです。何か間違っていたり足りなかったりしたら教えてください。 https化までの段階 第一段階：はてなブログのダッシュボード・管理画面をHTTPS化 第二段階：はてなが提供するドメインのブログをHTTPSで配信できるように 第三段階：独自ドメインのHTTPS化に対応 事前に準備しておくべきこと（混在コンテンツ） 具体的な対象 混在コンテンツを修正する方法 記事内のコードを確認・修正 1. 修正対象記事を検索 2. 該当箇所を検索 3. 該当箇所を修正 ウクレレ記法 ブログカード 使用している

はてなブログのhttps化に向けてのお知らせがついに来ました。一斉にというわけではなく3段階でやっていくようです。よかったね。 とりあえず、ユーザー側でやっておかなければならないことは「混在コンテンツ（Mixed Content）について」というところですね。なので自分のブログをチェックしてみました。 混在コンテンツのチェック とりあえず、ブログ内（記事だけでなくサイドバーとかそういうのも含めた全部）に以下の物があるとダメなようです。 <img src=““>http://…”> @import url(‘http://…’ ….. <script src=“http://…” …> リンク（先）がhttpなのは別にそのままで大丈夫です。まずは記事内からこれらをチェックしてみました。 探すのは簡単です。はてなブログの管理画面から「記事の管理」へ移動し、上の3つを検索してみれば良いのです。

今現在（2017年9月8日）このブログで適用しているcssを野良テーマとして公開します。これをコピペすれば、誰でもこのサイトと同じテーマにできます。 野良テーマの適用方法 はてなブログのデザイン設定から「デザインcss」にこのページで公開するcssコードをコピペしてください。テーマはcssでしかないので、それだけでこのブログと同じになります。 また、デザインcssの最初には上の画像のように<system>～</system>の部分があります。これはテーマのcssファイルを読み込んでいる部分です。なのでこの部分は削除します。 そうすると元々適用されていたテーマが消えるので、その上から今回のコードを貼り付ければOKです。 注意点 もともと入れてあるcss（テーマではなく自分で設定したもの）と干渉する部分があるかもしれません なので、デザインcssの一番上にコピペするのが吉かも とりあえずテスト

時々はてなでも見るんだけど、過去の記事を消しました、消したらpv上がりました、という内容の記事。これについてモヤモヤ思うことを。 何のために記事を消すのか そういう系の記事はタイトルだけ見て中身はあまり見ていないんですけど、まぁたぶん必要のない記事、pvのない記事、検索順位の低い記事を消したらなぜかサイトの他の記事の検索順位が上がってpvも増えたよやっほー！という内容だと思ってます。 まぁ、つまりはSEOとして記事を消しているんだよね、ということ。でもそれがどういうことなのか、考えたのかなぁ？と。 検索のためになること 必要のない記事、薄い記事、例えば終了したキャンペーンの記事や時事的なニュースなど、まぁ確かに今必要のない記事というのはあります。それらが無駄に検索上位に来ると邪魔でしかない。 だから検索結果のクリーン化のために記事を消す。まぁそれはわかる。 自分が書いたということも消し去っ

前回の記事で基本的なことは書いたので、次は模倣。いくつかのサイトにある、実際に使われているボタンに似たものを作ってみます。 実際に使うかどうかは別として、cssの練習にはこういうのが良いんじゃないでしょうか。 基本的に、以下のaタグのみのごく簡単なhtmlを使って作っていきます。クラス名や中の言葉は変わっていきます。いろいろ察してください。 <a href="#" class="btn">ボタン</a> また、いつものことですが、使っているテーマなどによっては、そちらのcssが優先されてここでの指定がきかない場合もあります。!important付ければ大抵なんとかなりますが、あまり美しくはないですね。 ではでは、いってみましょー。 Amazon（サインイン） 元となるボタン できたもの css Amazon（アカウントを作成） できたもの css はてなブログ（写真を投稿） 元となるボタン

a.btn{ display: inline-block; /* インラインブロック化 */ padding: 1em 2em; /* 余白設定 */ line-height: 1; /* 行の高さ */ color: #fff; background-color: #2196f3; text-decoration: none; } a.btn:hover{ background-color: #42a5f5; } point paddingの値を上下1em、左右2emくらいにすると、フラットデザインっぽくなる。ここまで広げなくてもいいけど、狭いとダサくなるので、それなりに余裕ある数値にするといい感じ。 角丸に demo ボタンリンク a.btn{ display: inline-block; padding: 1em 2em; line-height: 1; color: #fff; b