はてなブログの独自ドメインのHTTPS配信がついに有効になりました。 staff.hatenablog.com ていうかはてなブログの開発ブログがまだHTTPS化されてない(´・ω・`)最近WordPress移転する方が多くて寂しいです。 HTTPS化の手順・やることリスト 修正すべき記事を検索 置換ツール Upgrade Insecure Requestsのメタタグをheadに入れる Mixed Content（混在コンテンツ）の確認 忘れやすいポイント はてなブックマークのシェアボタンをカスタマイズしている場合 jQueryを使ったカスタマイズをしている場合 管理画面（デザイン＞カスタマイズの画面）が崩れている・混在コンテンツになっている場合 【追記】2016年12月以前のブログカード 画像の置換のやり方の詳細 Google Search ConsoleとGoogleアナリティクスの再

はてなブログのトップページの先頭に記事を固定できるようになりました。Twitterの「プロフィールに固定表示する」と似たような機能ですね。（と言っても実装は2週間前から既に行われており、正式な告知が今日だったようです。） staff.hatenablog.com 早速このブログでも実装してみました。 管理画面の記事一覧ページから先頭に表示したい記事のタイトル横の「編集」をクリックして「トップページの先頭に表示する」を選びます。 先頭に固定された記事の表示をカスタマイズこのままだと先頭に固定された記事と最新の記事の区別がつかないので、固定記事のタイトル後に「おすすめ記事」「固定された記事」などの”印”を付けることにしました。 （日付見れば時系列はわかると思いますが） 以下のコードをデザインCSSに追加すると固定記事の後ろにマークを付けることが出来ます。このカスタマイズは無料ユーザー、はてなブ

2月末から3月上旬にAmazonのタイムセールでAdobe CC(Adobe Creative Cloud)のオンラインコードが安く売られていたようなのですが、買いそびれてしまいました。どうしようかなーと思っていたところ、アカデミック版なら安く買えるということに気付いてAdobeの提携校のオンライン講座付きで購入することにしてみました。 ちょうど「たのまな」というところでキャンペーン中で、他のオンラインスクールより安かったのでここで買ってみました。 たのまな アドビトレーニング通信講座 + Adobe CC アカデミック版 学習応援スペシャルプライスキャンペーン！ 個人アカウントから学生アカウントへの変更は一旦解約が必要 ダウンロードカードが届いた後の手続き 学生教職員版でログインし直す 「たのまな」:たのまなはヒューマンアカデミーの通信講座・通信教育専門のサイトでAdobeの提携校である

はてなブログテーマストアに新しいブログテーマを投稿しました。 Hruni - テーマ ストア ピンクグラデーション背景のシンプルなレスポンシブテーマです。PC版は2カラム、スマートフォンは1カラムです。 License: GNU General Public License v3 or later License URI:GNU一般公衆ライセンス v3.0 - GNUプロジェクト - フリーソフトウェアファウンデーション GPLで公開していますので、このテーマを元に改変・改変したテーマを公開することが出来ます。 但し改変したテーマをテーマストアで公開する際はGPLに従い、著作権表示を行なって下さい（CSS内で）。 ※個人的にカスタマイズして使用する分には著作権表示は要りません。（元々テーマCSS冒頭に入っています。） デモブログはこちら↓ yumekawa.hatenadiary.com

saruwakakun.com サルワカさんのボタンのデザインサンプルが素晴らしいので、今更自分が公開しなくても良いような気がするのですが、今まで自分用のストックで作っていたガーリーデザインのボタンのサンプルCSSをまとめてご紹介します。 はてなブログでもはてなブログ以外でも使えます。 1. ステッチ風のボタン 2. 透明感のあるピンクグラデーションボタン 3. 吹き出しボタン 4. ストライプ背景の吹き出しボタン 5. ステッチ風の丸ボタン 6. ズレた背景の手書き風ボタン 1. ステッチ風のボタン Button このブログのシェアボタンでも使っているステッチ風のボタンデザインです。縫い目風になるとガーリーデザインっぽくなりますね。ドロップシャドウをかけることでコロンとした立体感を出してみました。 HTML <a class="girly_btn_1" href="">Button</a

blog.minimal-green.com 前回の記事ではテーマ制作者の立場からモラルと責任について書きました。ここではより一般的な視野で、Webデザインの著作権周りについて考えてみます。 デザインの著作権侵害訴訟の判例一般的にwebデザインをパット見パクった程度では著作権性で争うことは難しいそうです。 www.ituki-yu2.net 言及されたので拝読しコメントさせていただきました。その中で Webデザインで著作権侵害が認められるか否かですが、僕の見解としてはグレーだと思います。 こういったケースで裁判になった場合、過去の判例で大体決まるんですが、webデザインの著作権侵害の判例はありません。 類似のデザインの著作権侵害の判例で、とある商品の販促ツールデザインについての著作権侵害訴訟の中で、そのデザインについて制作者側の著作物性が否定された事例があります。 として以下の判例を教えて

ブログなどに表を挿入するとき、面倒なのがtableのコーディング。はてなブログの見たままモードだとExcelなどからコピペしてそのまま貼り付ければOKなようですが、セル結合をしていたりする複雑な表シートだと上手くいかないようです。 普通にHTML書けば良いのですが、tableの入れ子を書くのは結構手間ですよね。 numbersで作った表をはてなに貼り付けると崩れちゃう。 今までは問題なくできてたんだけどなんでだろう。 対処法求む！— エルパ (@elppapr) 2018年2月13日 Twitterでこういうツイートを見かけ以下のツールを使って無事解決されたようなので備忘録として書かせていただきます。 HTMLのtable（表）の基本についてはサルワカさんの記事がわかりやすいので是非ご参照下さい。 saruwakakun.com エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)エ

平成29年度の確定申告の受付が始まりました。 www.nta.go.jp 私は昨年ココナラでの出品を開始したのですが、ココナラの売上をどう仕訳するか少し迷うところがあり、色々調べたり、ココナラ運営に問い合わせました。ここでは個人事業主として確定申告の際に必要な帳簿付けでのココナラの売上の仕訳について、私が実際に仕訳した例を元に書いてみます。あくまで仕訳の一例ですので、これが必ずしも皆さんにとっても相応しいとは限りません。 ランサーズやクラウドワークスの仕訳のやり方はネット上にも沢山あったのですので、ココナラの例はあまり見かけなかったので参考例として書いてみます。 確定申告が必要かどうか 会社員など給与所得がある方 給与所得がない方 青色申告（65万円控除）をするために必要な帳簿 ココナラでの売上の仕訳例 ココナラでの売上（販売価格から手数料を引かれた額）＝「売上高」 売上高を手数料込とする

このブログの独自ドメインをhttp://blog.minimal-green.com/に変更しました。 読者登録されている方やこのブログに言及記事（リンクを貼ってくださっている方）を書いて下さった方は特にリンクの貼り直しや読者登録し直しは必要ありません。 ここでは独自ドメインの変更の影響を最小限に抑えるための施策に付いて書いていきます。具体的には301リダイレクトとGoogle Search Consoleのアドレス変更ツールを正しく設定する方法です。 はてなブログドメイン→独自ドメイン（新規）の場合も同様にアドレス変更ツールを正しく使えば、独自ドメイン変更の影響をあまり受けないはずなので、初めて独自ドメインを設定する方もアドレス変更ツールは是非使用して下さい。 独自ドメインの変更手順 はてなブログの設定→詳細設定で独自ドメインの欄を空欄にする ドメイン登録事業者でDNSレコードの設定 ム

ブログのヘッダー下やフッターにレスポンシブ広告のGoogle Adsenseを貼っていらっしゃる方は多いと思います。ファーストビューで目に留まりやすく広告を置きたい場所ですよね。 はてなブログでは「タイトル下」や「フッタ」に広告のコードを置くのですが、コンテンツ幅からズレて配置されていることをよく見かけます。 揃えるところは揃えた方が見映えよくすっきりすると思いませんか？ ↑のようにコンテンツ幅（記事幅＋サイドバー）のラインからはみ出てているのより このように中央寄せで揃っている方がすっきりします。 はてなブログでのセンタリングカスタマイズという程ではないです。 <div class="center"> ここに広告のコードを入れる </div> 広告を貼るときは上記のようなdivでくくってから貼り付けて下さい。以上です。（.centerははてなブログの共通CSSでセンタリング用にスタイル指

以前↓こういう記事を書きました。 blog.minimal-green.com 9999年の記事に直接HTMLを書き、全文表示にする方法です。 過去記事のカスタマイズの問題点 jQueryでトップページの記事一覧の前にコンテンツを追加する トップページ追加用HTML&jQuery 過去記事のカスタマイズの問題点 これはこれでまあまあ使えるのですが、トップページを作るためにかなり無理をしていることも確かです。 「10000年になったらどうしよう！？」という問題も心配でした。（嘘です） 問題点としては 問題点 ・トップページ用の記事が注目記事などに出てしまう。 ・→最新記事一覧に現れないようdisplay:noneを使わなきゃいけない ・display:noneを多用するとSEO的に心配？ 必要ならばdisplay:noneを使っても良いと思うんですが、本来あるべきものを非表示にしているのはS

他の方のブログを読んでいて、これは意図しないデザインの崩れ・隙間ではないかと思うことがあります。 例えばはてなブログで広く普及しているyukihyさんのドロップダウンメニューを利用されている方で背景いっぱいにタイトル画像を設定している場合、メニュー上下に余計な隙間ができ、気になることがあります。 意図しないデザイン崩れ・隙間 Chromeのデベロッパーツールで簡単に検証・修正しよう まとめ 意図しないデザイン崩れ・隙間 これはコードに問題があるのではなく、元々のテーマに合わせてデザインされているので、別のテーマやタイトル画像の設定の仕方を変えると意図しないデザイン崩れが出来るのは仕方のないことです。これはカスタマイズする側が自分で微調整しましょう。 Chromeのデベロッパーツールで簡単に検証・修正しよう Chromeのデベロッパーツールでブラウザ上でCSSの検証・プレビューができます。デ

ついに、はてなブログでトップページの一覧表示機能ができましたね！最近はてなブログはどんどん便利な仕様が追加されててカスタマイズ好きにとっては嬉しい限りです。 staff.hatenablog.com 今まで一覧表示にするにはCSSでなんとかそれっぽくしたり、/archiveページにJavaScriptでリダイレクトさせたりと無理矢理感があったのですが、これで簡単にトップページを一覧表示で多くの記事をスッキリと表示させることができるようになりました。（ただし、はてなブログProのみ） このブログにも一覧表示を使ってトップページをカード型レイアウトにするカスタマイズをしました。今回ははてなブログで難しいと思われたカード型レイアウトにするカスタマイズをご紹介します。 トップページを一覧形式にする CSS 追記：記事タイトルをサムネイル画像の下に配置する サムネ画像をアイキャッチ画像に置き換える

最近Adobe CCを導入してIllustratorを使っています。なんだかんだ言って有料のソフトウェアは使いやすいですね。解説もネットに多いですし。 印刷物を作る機会が増えて、無料の画像編集ソフトでは限界がありましたが、Adobe CC導入して良かったです。まだ全然使いこなせてませんが… プロフィール画像を作ってみた はてなブログのサイドバーに画像を貼る方法 画像をはてなフォトライフにアップロード サイドバーに画像を貼り付けるHTMLコードを挿入する 画像にリンクをつける はてなフォトライフではアップロードした後画像のサイズを変更出来る プロフィール画像を作ってみたプロフィール画像をIllustratorで作ってみました。絵心が無いので他人様用にはできませんが、自分用なら下手っぴでも良いかなと。 いくつか描きましたが、結局マトリョーシカにされてしまいました。閉じ込められてかわいそうですね

はてなブログでは6月から記事下に「関連記事」が表示されるようになりました。 記事下に「関連記事」を表示します - はてなブログ開発ブログ 今まではJSなどで表示するカスタマイズで対応していましたが、公式のパーツが出来たということで、こちらの方が軽くて良いですね。 既にカスタマイズ方法のパターンを網羅した記事があるのですが、一応自分でも作ってみました。 saruwakakun.com ↑のサルワカさんの記事があれば、正直要らないような気もするのですがｗ、最近作ったテーマ「yumekawa」に合うように作ってみました。 このCSSは記事下の関連記事を対象としたもので、サイドバーの関連記事のデザインには影響しません。 ピンクバージョン 水色バージョン ピンクバージョン 以下のコードをデザインCSSに追記して下さい。 /* 記事下関連記事 */ /* 関連記事日付 */ #entry-footer