はてなブログで独自ドメインを設定している場合に、追加でサブドメインの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アナリティクスの再

はてなブログを始めたばかりの方向けに入門記事をまとめてみました。 自分の記事や他の方のブログ記事を合わせてまとめています。はてなブログは操作性もよく使いやすいブログサービスだと思いますが、始めたばかりだと「？？？」というところもあるので初心者の方向けにつまづきやすいポイントを重視しています。「はてなブログ入門マニュアル」としてご紹介させていただきます。 はてなアカウント取得～ブログ開設まで 独自ドメインの設定 記事の書き方 より良い記事を書くために はてなブログガイドライン・はてな利用規約 著作権侵害をしないために 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万円控除）をするために必要な帳簿 ココナラでの売上の仕訳例 ココナラでの売上（販売価格から手数料を引かれた額）＝「売上高」 売上高を手数料込とする