サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
今年の「#文学」
blog.minimal-green.com
こんにちは。久しぶりにはてなブログのカスタマイズ記事書きます。 追記：はてなでは表示位置の変更を検討中 はてなブログのヘッダー右上に「読者になる」ボタンが突如出現 「読者になる」ボタンを消す方法（はてなブログProユーザー限定） 無料ユーザーの方は注意 はてなブログProユーザーの方でグローバルヘッダーを表示しつつ読者になるボタンを消したい場合 はてなブログのスマホ版のオリジナルヘッダー画像も表示が変わる スマホ版のオリジナルヘッダー画像の高さが変わる スマホ版のオリジナルヘッダー画像を元のサイズのままぴったり表示する方法 ユーザーの意向を無視した急な仕様変更はやめてほしい 過去にはてなブログのカスタマイズお手伝いさせていただいたブロガーさんから「ヘッダーの表示が崩れて困っている」という連絡を同時期に何件か複数受けました。 最近はてなブログを触っていなかったので気づかなかったのですが、はて
はてなブログのブログメンバー機能とは ユーザー毎に記事下にそれぞれのプロフィール欄を表示する プロフィールのHTML/jQuery はてなブログのブログメンバー機能とははてなブログProには複数人で一つのブログを運営できる「ブログメンバー機能」があります。 help.hatenablog.com このブログメンバー機能を使うとブログオーナー以外のはてなユーザーも記事を書いたり（寄稿者）、デザインの変更やブログの設定を変更したり（管理者）できます。 ブログメンバーの権限は「寄稿者」「編集者」「管理者」と三段階あります。詳しくは上記のはてなブログのヘルプページをご覧ください。 ユーザー毎に記事下にそれぞれのプロフィール欄を表示するさて本題です。複数人のブログメンバーでブログ運営している場合、それぞれのユーザー毎の記事の著者をしっかりアピールしたいですよね。 はてなブログの標準の機能では 記事下
「2019年10月1日より、はてなブログの個人営利利用を許諾します」という発表がはてな運営公式のはてなブログ開発ブログより公開されました。 以前は一応「収益を主目的としたはてなブログ」の利用が禁止されていました。（実際には営利が主目的であっても黙認状態ではあったと思いますが） このガイドラインの変更により、アフィリエイトや自身のサービスの宣伝・集客を主目的とした営利利用のブログもはてなブログで運営することができるようになります。 ただし、個人営利利用をするにはプライバシーポリシーや連絡先の明記や法令・JIAA（一般社団法人 日本インタラクティブ広告協会）のガイドラインを遵守することが求められ、新ガイドラインでは以前より厳しく禁止行為が定義されています。 この記事でははてなブログの個人営利利用ガイドラインへの対応に必要なプライバシーポリシーやお問い合わせページの作り方・設置方法、また特定商取
スマホでのメニュー表示はいつも悩ましいものです。スマホの画面サイズが大きくなったとはいえ、やはり表示領域は狭く限られています。 特にカテゴリーの数が多くメニューが多階層にわたるサイトやブログのメニュー表示をどうするか。 今回はたくさんのメニュー項目をコンパクトにまとめて表示できるメニューのカスタマイズです。 blog.minimal-green.com ベースは↑のメニューを使い、若干デザインと機能を追加しました。 変更点 メニューの動き HTML＆jQuery CSS まとめ 変更点変更点 ハンバーガーメニューのデザイン変更スマホ表示で2階層目の項目をタップで開閉するように メニューの動き動きは以下のgifをご覧下さい。 HTML＆jQuery 以下のコードをはてなブログ管理画面>デザイン＞カスタマイズ>ヘッダ＞タイトル下に入れて下さい。 <div class="drawer_menu"
2019年2月くらいからはてなブログの独自ドメインのブログがGoogle AdSenseのサイト追加申請が通らないという話を目にすることが増えました。同時期に、Google Search Console のサイトマップ送信に失敗するという声もよく見かけました。 Google AdSenseの申し込み及びサイト追加申請について www無し→wwwありへリダイレクトが必須？ Google AdSenseのads.txtについての警告 Google Search Console のサイトマップ送信に失敗する件 Google AdSenseの申し込み及びサイト追加申請についてGoogle AdSenseは以前は一度最初のサイトの審査に通過すればサイトの追加は自由でしたが、2018年の途中からサイトの追加毎に審査が必要になりました。 また以前はwww付きのサイトアドレス でもサイトの追加申請出来たの
時分秒まで表示される XML サイトマップのlastmodタグについて サイトマップバージョンを一部改変 AMPバージョンなら今まで通り フッターに貼るscript CSS はてなブログで「リライト記事の更新日時を日付横に表示する」カスタマイズをされている方も多いと思います。 カスタマイズの作者はつばさノートさんです。 www.tsubasa-note.blog www.tsubasa-note.blog サイトマップで更新日時を取得するやり方をされていた方が多いと思いますが、昨日おととい？あたりから更新日時の表示がおかしくなっています。 これは過去のカスタマイズのクライアント様から教えていただきました。情報提供ありがとうございます。 時分秒まで表示される 更新日時の日の後に時刻も表示されています。前は日付だけでしたね。流石に分秒単位までの表示はいらない笑 現在のはてなブログのサイトマップ
はてなブログで独自ドメインを設定している場合に、追加でサブドメインのWordPressを新規作成するときの手順のまとめを書きます。 ・既にはてなブログ:www.example.com として運営している（HTTPS化済み） ・追加でサブドメインsubdomain.example.comのWordPressサイトを作りたい こういう状況です。 レンタルサーバーにメインドメイン（www無し）を独自ドメインに追加する www無しのメインドメインにアクセスするとどうなるか？ 各レンタルサーバーでの独自ドメイン設定 お名前.comで取得した独自ドメインをエックスサーバーなど他社サーバーで使う場合 ムームードメインで取得したドメインをエックスサーバーで使う場合 レンタルサーバーでサブドメインを追加する サブドメインにWordPressをインストールする ドメイン管理事業者側で正しくはてなブログへ向けて
はてなブログのテーマストアにはたくさんのテーマが公開されています。多くのユーザーが目にし利用するものなので、ある程度内容は精査しないといけません。 自作テーマを「非公開」で投稿するのはそれほど内容に気を使う必要はありません。（但し著作権には気をつけましょう） 非公開でテーマストアに投稿すると自分だけがインストールして使えます。 【追記】2018/09/12 記事タイトル変更しました。 2018/09/18 はてなへ「テーマストアに非公開で自分のはてなブログで使用する目的で投稿してもよいか」問い合わせました。回答は以下の通りではてなブログで個人で使用する分には問題ないそうです。 自分のブログだけで自作テーマを使う目的で非公開でご利用いただいても結構です。はてなブログ以外のブログのテーマ置き場としてご利用いただくのはご遠慮ください。 はてなブログのテーマストアを使う理由 テーマストアへの投稿方
以前書いた「【ムームードメイン編】はてなブログの独自ドメインを変更した後にやることリスト」の記事が「はてなブログのムームードメインの独自ドメイン設定の解説」として割と参照されているようなので、改めてもっと詳しく新規ドメイン取得からはてなブログでの独自ドメイン設定について書いてみたいと思います。 ムームードメインで独自ドメインを取得する ムームードメインでのDNSレコードの設定 はてなブログへ向けてCNAMEレコードを設定する（ムームーDNSのセットアップ） ネームサーバーをムームーDNSへ変更する（ネームサーバー設定変更） はてなブログ管理画面での独自ドメインの設定 Googleサーチコンソールに設定する 補足：www無し独自ドメイン→wwwあり独自ドメインへ301リダイレクト ロリポップでwww無しの独自ドメインを設定する ムームードメインのコントロールパネルでwwwありのサブドメインの
PCでは横並びのドロップダウンメニューで、スマートフォンではトグルボタンでドロワーメニューが横から出てくるグローバルメニューをはてなブログ向けに作りました。（はてなブログ以外でも使えます） PCではマウスオーバーするとドロップダウンメニューが表示され、スマートフォンでも2階層目のサブメニューが表示されます。 使用ライブラリ： ドロワーメニュー用のテンプレートを作りました | ザリガニデザインオフィス github.com こちらのザリガニデザインオフィスさんのテンプレートをベースに作らせていただきました。 デモ HTML・JS CSS 【追記】 改良版を作りました。 blog.minimal-green.com デモ出来上がりはこんな感じです。スマートフォンではメニュー項目の他、プロフィール欄やフォローボタンも表示されます。PC非表示フリースペースはアレンジして作り込んでみて下さい。PC版
はてなブログのサイドバータイトルデザインのカスタマイズ集を作ってみました。 はてなブログではそのままコピペでお使いいただけます。WordPressや他のブログサービスでもセレクタを変えればお使いいただけます。 注意 文字色について（全共通） シンプル 色変更 フォント変更 背景色あり 下線あり 下線あり(ダブル） 左右に直線を重ねるデザイン アイコン付き FontAwesome はてなブログのblogicon ガーリーデザイン リボン風 レース風 アイコン画像を使う ポップ系 左ライン ストライプ背景 吹き出し 基本 中央寄せ 左寄せ リセット サイドバータイトルのテキストを画像に置換する サイドバーの最新記事にリボンラベルを付ける サイドバーに画像（バナーリンク）を貼る 注意 文字色について（全共通）サイドバータイトルの文字色が変わらないときはaタグの文字色もご指定下さい。 .haten
はてなブログで使える目次のデザインを幾つか作ってみました。コピペでお使いいただけます。 目次の挿入方法 目次デザインパターン集 FontAwesomeの呼び出し ストライプ背景 ストライプ背景2 二重線囲み ステッチ風 目次リストのスタイル（番号順、円） 目次を表示・非表示に切り替える ご使用のテーマによって、調整が必要な場合があります。あらゆる場面、状況に対応することは難しいためです。ここで紹介しているコードはあくまでも一例で、各自ご自身の責任の元で調整してください。 目次の挿入方法基本的なことですが、はてなブログで目次を挿入するには記事編集画面上部のツールバーで目次のアイコンをクリックすると挿入できます。 目次デザインパターン集目次のカスタマイズをするには以下のコードをデザインCSSに入れて下さい。テーマによっては調整が必要です。 FontAwesomeの呼び出し目次横のアイコンはFo
ちょっと前からよく見かける「サイト全体を枠で囲む」デザインをはてなブログでやってみました。このブログでもやっています。 webdesign-trends.net カスタマイズ方法 ストライプ柄 背景画像を設定する カスタマイズ方法以下のCSSをデザインCSSに追加します。 /* ブログ全体を枠で囲む */ body { width: 100%; border:20px solid #47a89c;/* 枠線 */ box-sizing:border-box; } @media screen and (max-width: 767px){ body { border: 10px solid #47a89c;/* SP枠線の幅 */ } } ストライプ柄 背景をストライプパターンにすることも出来ます。 以下のカスタマイズは#containerが幅100%のテーマのみ,そのまま使えます。#con
記事下にCTAを設置するカスタマイズを作りましたのでご紹介します。WordPressの有料テーマではよく見かけますね。このカスタマイズははてなブログはもちろん、WordPress、その他のブログサービスでも使えます。 CTAとは 見た目はこんな感じ カスタマイズコード HTML（記事下） CSS スマートフォン用 補足：FontAwesomeの読み込み CTAとはCTAとは「CTA（Call To Action：コールトゥアクション）」の略でWebページ上でユーザーにクリックしてもらうなど行動を起こさせるためのボタンや画像・テキストを意味します。 例えばはてなブログのトップページで言うと この「はてなブログとは」の緑色のボタンがCTAです。 webサイトを作るとき、ユーザーに商品を購入してほしい、お問い合わせしてほしい、など何かしらの目的がある場合が多いと思います。そうしたPRしたいものを
はてなブログの記事下にカード型のプロフィール欄を表示するカスタマイズを作りましたのでご紹介します。 こんな感じ カスタマイズコード HTML CSS こんな感じPCではこんな感じに表示にされます。 スマートフォンではこんな感じです。 デザインはこのブログに合わせているので、背景色やボーダーの色など適宜変更してお使いいただければと思います。 またアイコンははてなブログのアイコンwebフォントを使っているのではてなブログ以外で使うときはFontAwesomeなどに置き換えて下さい。 はてなブログで使えるアイコンwebフォント一覧はしろかいさんの記事をご参照下さい。 shirokai.hatenablog.com カスタマイズコード HTML はてなブログ管理画面>デザイン>カスタマイズ>記事下に以下のコードを追加します。 <div class="entry-footer-profile"> <
この記事ははてなブログ初心者向けの記事です。はてなブログを始めたばかりで、どのテーマを選んだらよいかわからない方のテーマ選びのご参考になれば幸いです。私もテーマを作っていますが、ここでは完全他力本願で、おすすめのカード型レイアウトのはてなブログテーマをご紹介します。 カード型レイアウトとは？ カード型レイアウトのメリット おすすめのカード型はてなブログテーマ UnderShirt マテリアルぽっぷ Creativity ZENO-TEAL カード型のアイキャッチ画像をきれいに表示する カード型未対応のテーマをカード型にする カード型レイアウトとは？カード型とはPinteretで採用されたのきっかけに2015年頃から流行したwebサイトのレイアウトです。（それ以前からもあったと思いますが流行ったのはこのくらいかと）四角いカードにサムネイルとタイトルが入ってるデザインで、2,3列のカードが並ぶ
はてなブログの独自ドメインのHTTPS配信がついに有効になりました。 staff.hatenablog.com ていうかはてなブログの開発ブログがまだHTTPS化されてない(´・ω・`)最近WordPress移転する方が多くて寂しいです。 HTTPS化の手順・やることリスト 修正すべき記事を検索 置換ツール Upgrade Insecure Requestsのメタタグをheadに入れる Mixed Content（混在コンテンツ）の確認 忘れやすいポイント はてなブックマークのシェアボタンをカスタマイズしている場合 jQueryを使ったカスタマイズをしている場合 管理画面（デザイン＞カスタマイズの画面）が崩れている・混在コンテンツになっている場合 【追記】2016年12月以前のブログカード 画像の置換のやり方の詳細 Google Search ConsoleとGoogleアナリティクスの再
今年の4月についに、はてなブログの無料ドメイン(hatenadiary.jp,hateblo.jp.hatenablog.comなど)の全ブログでのHTTPS配信が有効になりましたね。 2018年2月22日以降に新規開設したブログは全てHTTPS配信となっています。 HTTPS化への対応 Mixed Contentのエラーが発生している状態 混在コンテンツへの対処 混在コンテンツの見つけ方 タイトル画像、デザインテーマ オリジナルシェアボタンのカスタマイズをされている方 見たままモードのフォトライフ画像のURLを一括置換する Amazonの画像URLの置換 はてな記法モードで書いてる場合 Upgrade Insecure Requestsで一括置換する Google Search Consoleの再登録も忘れずに HTTPS化への対応画像やCSS・JSなどの参照元がHTTPのままでHTTP
はてなブログを始めたばかりの方向けに入門記事をまとめてみました。 自分の記事や他の方のブログ記事を合わせてまとめています。はてなブログは操作性もよく使いやすいブログサービスだと思いますが、始めたばかりだと「？？？」というところもあるので初心者の方向けにつまづきやすいポイントを重視しています。「はてなブログ入門マニュアル」としてご紹介させていただきます。 はてなアカウント取得～ブログ開設まで 独自ドメインの設定 記事の書き方 より良い記事を書くために はてなブログガイドライン・はてな利用規約 著作権侵害をしないために GoogleAdSense・アフィリエイト収益を得る ブログデザインのカスタマイズ 読者登録をしておくべき公式ブログ はてなブログ Perfect GuideBook はてなアカウント取得～ブログ開設まで「今日はヒトデ祭りだぞ！」でおなじみのヒトデさんがとてもわかりやすいはてな
はてなブログのトップページの先頭に記事を固定できるようになりました。Twitterの「プロフィールに固定表示する」と似たような機能ですね。（と言っても実装は2週間前から既に行われており、正式な告知が今日だったようです。） staff.hatenablog.com 早速このブログでも実装してみました。 管理画面の記事一覧ページから先頭に表示したい記事のタイトル横の「編集」をクリックして「トップページの先頭に表示する」を選びます。 先頭に固定された記事の表示をカスタマイズこのままだと先頭に固定された記事と最新の記事の区別がつかないので、固定記事のタイトル後に「おすすめ記事」「固定された記事」などの”印”を付けることにしました。 （日付見れば時系列はわかると思いますが） 以下のコードをデザインCSSに追加すると固定記事の後ろにマークを付けることが出来ます。このカスタマイズは無料ユーザー、はてなブ
はてなブログカスタマイズ記事一覧です。今までの過去記事をまとめました。 パーツ毎に分けているので、カスタマイズしたいところの記事をご参照下さい。上から順番にヘッダー、グローバルメニュー、記事上・記事下、サイドバー、フッターと辿っていくとはてなブログを一通りフルカスタマイズ出来ます。 はてなブログで本格的にカスタマイズするならはてなブログProを契約するのがおすすめ。独自ドメインが使えてお名前.comなら1年目の料金無料で.workドメインが取得できます。 ヘッダー・タイトル タイトル画像の調整 ヘッダー下におすすめ記事を並べるカスタマイズ グローバルメニュー 見出し・囲み枠 シェアボタン サイドバー サイドバータイトルのデザインカスタマイズ サイドバーの最新記事にリボンラベルを付ける サイドバーに画像（バナーリンク）を貼る 目次のデザイン 記事上・下 日付のカスタマイズ パンくずリスト 読
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デザインの著作権侵害の判例はありません。 類似のデザインの著作権侵害の判例で、とある商品の販促ツールデザインについての著作権侵害訴訟の中で、そのデザインについて制作者側の著作物性が否定された事例があります。 として以下の判例を教えて
最近、はてなブログテーマストアにある物議を醸すデザインテーマが投稿され、炎上し、消えました。 もう終わったことですので、詳しくは言及しませんが、何のことかわからない方は以下のリンクをご参照下さい。 例のテーマが元の有料WordPressテーマの名前に対し悪意のあるテーマ名をつけ元制作者をおちょくるモラルの無さ、有料テーマの「見た目」をパクって自作のオリジナルテーマとして公開していることの是非が問われていたと思います。 togetter.com skyfish25.hatenablog.com ↑のid:skyfish25さんの記事には私のtweetが論旨の補強として引用されています。概ね趣旨は賛同しますが、この記事に対する私の意見は私のブックマークコメントとtweetをご参照下さい。 （ブコメで書いたところは現在は修正されています。） ※デザインは一般的なマテリアルデザインに則ったもので、
平成29年度の確定申告の受付が始まりました。 www.nta.go.jp 私は昨年ココナラでの出品を開始したのですが、ココナラの売上をどう仕訳するか少し迷うところがあり、色々調べたり、ココナラ運営に問い合わせました。ここでは個人事業主として確定申告の際に必要な帳簿付けでのココナラの売上の仕訳について、私が実際に仕訳した例を元に書いてみます。あくまで仕訳の一例ですので、これが必ずしも皆さんにとっても相応しいとは限りません。 ランサーズやクラウドワークスの仕訳のやり方はネット上にも沢山あったのですので、ココナラの例はあまり見かけなかったので参考例として書いてみます。 確定申告が必要かどうか 会社員など給与所得がある方 給与所得がない方 青色申告（65万円控除）をするために必要な帳簿 ココナラでの売上の仕訳例 ココナラでの売上（販売価格から手数料を引かれた額）＝「売上高」 売上高を手数料込とする
ブログなどに表を挿入するとき、面倒なのがtableのコーディング。はてなブログの見たままモードだとExcelなどからコピペしてそのまま貼り付ければOKなようですが、セル結合をしていたりする複雑な表シートだと上手くいかないようです。 普通にHTML書けば良いのですが、tableの入れ子を書くのは結構手間ですよね。 numbersで作った表をはてなに貼り付けると崩れちゃう。 今までは問題なくできてたんだけどなんでだろう。 対処法求む！— エルパ (@elppapr) 2018年2月13日 Twitterでこういうツイートを見かけ以下のツールを使って無事解決されたようなので備忘録として書かせていただきます。 HTMLのtable（表）の基本についてはサルワカさんの記事がわかりやすいので是非ご参照下さい。 saruwakakun.com エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)エ
このブログの独自ドメインをhttp://blog.minimal-green.com/に変更しました。 読者登録されている方やこのブログに言及記事（リンクを貼ってくださっている方）を書いて下さった方は特にリンクの貼り直しや読者登録し直しは必要ありません。 ここでは独自ドメインの変更の影響を最小限に抑えるための施策に付いて書いていきます。具体的には301リダイレクトとGoogle Search Consoleのアドレス変更ツールを正しく設定する方法です。 はてなブログドメイン→独自ドメイン（新規）の場合も同様にアドレス変更ツールを正しく使えば、独自ドメイン変更の影響をあまり受けないはずなので、初めて独自ドメインを設定する方もアドレス変更ツールは是非使用して下さい。 独自ドメインの変更手順 はてなブログの設定→詳細設定で独自ドメインの欄を空欄にする ドメイン登録事業者でDNSレコードの設定 ム
次のページ
このページを最初にブックマークしてみませんか？
『Minimal Green』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
