はてなブックマーク

旅館・飲食店向けの無料HTMLテンプレート「white base」 ローカルビジネスに使えるHTMLテンプレートを作りました。 レスポンシブシングルカラムのHTMLテンプレートです。 旅館や飲食店向けに、縦書きのナビゲーション、日本語がきれいに表示されるデザインにしました。 ※このテンプレートはWordPressテーマではありません。WordPressにそのままインストールしては使えません。 テンプレートファイルのダウンロードはこちら→HTMLテンプレートファイル（zip） [追記]デモページがレスポンシブになってませんでした。修正しました。 わかりやすくするためにサンプルのタイトルロゴを日本語にしました。 [訂正] メールフォームプログラムを一緒に同梱してました。メールフォームプログラムはご自分で導入してください。theme2.0.zipが最新です。 base.syofuso.com 海

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

はてなブックマークで時々ホッテントリに上がっていたはてなブログが、突然検索流入が無くなったという事例がありました。 head内にnoindexメタタグを強制的に入れられる措置にあったようです。 どのブログのことか、はてブのホッテントリ見れば分かると思いますのでリンクは貼りません。 【追記】ブックマークへのリンクを貼っておきます。 はてなブックマーク - Googleが、はてなブログ運営に指示→noindexをつけたから検索流入０に - しろログ～ネタバレ感想ブログ～ noindexとは <meta name="robots" content="noindex" /> という構文を入れることで検索エンジンのロボットに、検索結果にインデックス登録しなくて良いと伝える意味があります。 <meta name="robots" content="noindex,nofollow"/> とメタタグが入

ガーリーデザインシリーズです。見出しのデザインに使えるコピペCSSを用意しました。ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます - Minimal Greenとあわせてお使いいただくと良いかと存じます。 以下ははてなブログの大見出し（h3）のclass指定にあわせていますが、セレクタを変更すれば他のブログなどでも使えます。 ポイント 文字や背景の色・font-sizeはお好みで変えて下さい。 コピペで上手くいかないときはリセットCSSを。 はてなブログの大見出しはh3ですが、もちろんh2やh4にも使えます リセット用CSS リボン風見出し 上下ステッチ ななめストライプ背景+左ライン 縦ストライプ背景+左ライン 吹き出し 上下ギザギザ 手書き風枠+ずれた背景色 角丸＋ダイヤアイコン 参考 リセット用CSSテーマのCSSと被ってうまく上書きできないときは

ヘッダー、タイトル画像の設定について説明します。他のデザインテーマのカスタマイズにも応用できます。 タイトル画像の設定（はてなブログのタイトル画像機能を使う場合） タイトル画像の上下の余白を取る タイトル名の文字の色変更、中央寄せ cssで直接指定する ヘッダーの背景に横幅いっぱいに画像を設定する #blog-titleに横幅いっぱいに背景画像を指定する スマートフォンでもヘッダーが見切れないよう調整する 【追記】Media Queriesで画面サイズによってタイトル背景画像を切り替える はてなグローバルヘッダの変更 タイトル画像の設定（はてなブログのタイトル画像機能を使う場合） はてなの管理画面＞デザイン＞カスタマイズ＞ヘッダ＞よりタイトル画像を設定する. このように1000x200pxで表示されます。 タイトル画像の上下の余白を取る タイトル画像の上下の余白が気になる場合は、デザインC

私は有償のカスタマイズサービスをさせていただいておりますが、昨日びっくりすることがありました。 以前ココナラで受けたアメブロカスタマイズのご依頼で制作・納品したヘッダー画像とブログデザインをその依頼されたクライアント様自身の有償カスタマイズサービスの宣伝・自身の作品例として使われていたのです。 どうもご自身でもアメブロカスタマイズの有償サービスを始められたようです。その事自体は問題ないのですが、作品例として私が制作したヘッダーやブログデザインを使用されるのは困ります。 （そもそも自身でカスタマイズ可能なら何故私に依頼してきたのか意味不明ですが…） しかも他の作品例としてあがっている別のブログのCSSを見たところ、私が納品したCSSに入れていたクレジットの /* ----------------------------------------- Designed by Minimalgree

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

カスタマイズ記事を主に書いてるこのブログですが、今回はカスタマイズのやり過ぎについて警告する記事を書きます。 ※カスタマイズご依頼の新規受注は条件が合えばお受けしております。お気軽にご相談下さい。 カスタマイズのやり過ぎにはご注意を過剰なカスタマイズを施したために、ページ表示速度が遅くなったり、いろんなブログ記事のコピペを重ねるうちにデザインが崩れてしまったり、といった不具合が出てきます。 ・本当に必要なカスタマイズなのか ・読者にとって有益なカスタマイズなのか 上記の2点を念頭に置いてどういったカスタマイズするか決めるべきです。もちろん自分のブログですから、お気に入りのデザインで全て自己満足でも構わないという方もいらっしゃるでしょう。それはそれでありです。 ですが、読者目線で有益なブログを目指すなら自己満足ではダメです。 ブログデザインにお金をかける前に考えて欲しいこと私は有料でカスタマ

色白おばけ (id:lightgauge) さんのブログ記事で使われていた”黒板風囲み枠”にインスパイア（笑）され、私も黒板風囲み枠のCSSを作ってみました。 はてなブログで独自のWEBフォントを利用する方法 - 攻めは飛車角銀桂守りは金銀三枚 CSSは参考せず自分で組みました。borderで太枠囲んでるだけですけど。 HTML&CSS HTML&CSS ポイント 黒板風囲み枠CSSです。 はてなブログで使うには、ダッシュボード→デザイン→カスタマイズ→デザインCSSに以下のコードを貼り付けて下さい。 @font-face { font-family: 'HuiFontP109'; src:url('/fonts/public/HuiFont/HuiFontP109.eot'); src:url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix')

Twitterでちょろっと書いたのですが、はてなブログでもWordPressの固定フロントページっぽくビジネスサイト風のトップページを作ることができます。これではてなブログをビジネスサイトやホームページのように活用することができます。 まずはDEMOページをご覧ください。（PC向け） [:contents] DEMOページ ※このカスタマイズはdisplay:noneを多用しているため、SEOの観点からはあまりおすすめはできません。どうしてもはてなブログから移転したくなくてはてなブログでホームページが作りたい方向けです。出来れば普通にWordPressでやりましょうｗ seopack.jp 別のやり方を書きました。 blog.minimal-green.com ==== トップページ用の記事を作る トップページからサイドバー・日付などを消してシングルカラムにする サイドバーの最新記事やアー

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

以前「stripe」というはてなブログテーマを作ったのですが、その時に使ったストライプ背景のCSS（グラデーション）を応用してマスキングテープ風デザインやドット柄、チェック柄背景パターンのCSSをご紹介します。 ブログ記事は白背景に文字が続くと、特に長文では読む方は単調に感じてしまいます。 ガーリーなデザインでブログ記事にアクセントを入れ、記事にメリハリを付けましょう。 ブログだけでなく、女性向けのサイトデザインにも使えると思います。 class名は適当に作ったのでお好きなものに変えて下さい。 おすすめポイント 女性向けサイトのデザインに ブログ記事のアクセントにコピペで使えます ↑このボックスのデザインはあざらしっく.net – Webデザイン、コーディングの素人が楽しくネットで生きてるサイトさんのブログを見て、「かわいい！」と一目惚れし、色・デザインを参考にさせていただきました。CSS

最近アメブロカスタマイズのお仕事もご依頼いただくようになってきました。アメブロはサロン経営者の方や女性個人事業主が運営されていることが多く、女性向けの「きれい・かわいい」デザインが求められます。 アメブロカスタマイズの紹介は別記事で改めてさせていただきますが、この記事でははてなブログでも使えるガーリーデザインのための画像を使ったCSSテクニックをご紹介したいと思います。 基本的な内容なので、初心者向けとなります。 ガーリーデザインの画像素材を使おう こどみすさんの新テーマ「Minimalism」をガーリーにカスタマイズ！ background-imageプロパティを使う ::before疑似要素に画像を指定する ガーリーデザインの画像素材を使おう ガーリーデザインのサイトを作るときにはどうしても画像を使うことが多くなります。CSSで全部表現出来たら良いんですが、手描きのかすれた感じとか繊細

先日読んだid:codomisu さんの記事が素晴らしかったので、自分も本業ブログのリデザイン、スマホ版のカスタマイズしました。 スマホ版のデザインもPC版とあわせてリニューアルしました。 夏らしさを意識しましたがいかがでしょうか？ スマホ版もPC版と同様、class指定を調べてカスタマイズしていくんですが、先人の知恵を借りたほうが楽に素早く完成できます。今回は自分では記事を書かず、人様の役立つ記事を紹介します。 オリジナルのヘッダーデザイン スマホ版をスッキリおしゃれに見せるには スマホ版に固定フッタメニューをつける はてなブログスマホ版をカスタマイズするときに気をつけること オリジナルのヘッダーデザインスマートフォン版のはてなブログをヘッダー含めオリジナルに作り込むなら、id:codomisu さんのこの記事が丁寧に詳細に書かれています。はてなブログ標準のヘッダーのHTMLで表示される

はてなブログで固定ページをサイトっぽくカスタマイズするにはどうすればよいか、という話題がTwitterでありました。はてなブログProの固定ページを使えば、WordPressの固定ページのようなデザインも可能です。 ただ、そのままではできないので、やり方をここで解説してみます。今回は、グリッドレイアウトにするためにsiimpleというCSSフレームワークを使います。 siimple.juanes.xyz [:contents] 固定ページを作る はてなブログの管理画面左のメニュー「固定ページ」から固定ページを作成します。 固定ページの編集画面の左横の「編集オプション」ではサイドバー有り無しのレイアウトが選べます。但しサイドバーがなくなるだけで調整が必要です。 floatを解除しシングルカラムの真ん中寄せのレイアウトにするはてなブログの2カラムのテーマでは#mainと#box2がfloatさ

PCでは横並びのドロップダウンメニューで、スマートフォンではトグルボタンでドロワーメニューが横から出てくるグローバルメニューをはてなブログ向けに作りました。（はてなブログ以外でも使えます） PCではマウスオーバーするとドロップダウンメニューが表示され、スマートフォンでも2階層目のサブメニューが表示されます。 使用ライブラリ： ドロワーメニュー用のテンプレートを作りました | ザリガニデザインオフィス github.com こちらのザリガニデザインオフィスさんのテンプレートをベースに作らせていただきました。 デモ HTML・JS CSS 【追記】 改良版を作りました。 blog.minimal-green.com デモ出来上がりはこんな感じです。スマートフォンではメニュー項目の他、プロフィール欄やフォローボタンも表示されます。PC非表示フリースペースはアレンジして作り込んでみて下さい。PC版

記事下のシェアボタンの下にバイラルメディア風の「この記事が気に入ったらフォロー」バナーを置いてみました。 よくWordPressでは見かけますよね。そのデザインを応用して「この記事が気に入ったらフォロー」バナーにアレンジしました。 Facebookページは持っていない方も多いでしょうし、フォローボタンの方が使いやすいかなと。コピペで使えるので是非はてなブログにも導入してみて下さい。 こんな感じのデザイン HTML&jQuery 注意点 CSS 「この記事が気に入ったらいいね！」の導入は こんな感じのデザイン HTML&jQuery 記事下に以下のコードを追記してください。 <div class="p-entry__push"> <div class="p-entry__pushThumb" style="background-image: url('アイキャッチ用画像URL')"></di

はてなブログテーマストアに新しいブログテーマを投稿しました。 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

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

Yumekawa - テーマ ストア Twitterでちょこっと予告してたのですが、夢かわいい配色の新しいデザインテーマを作りました。新しく作ったというより以前作った「stripe」の配色を変えただけなんですけど…。手抜きですみません。あ、でもメニューとかちょっと変えてます。こちらの方が使いやすくかわいいと思います。 デモブログ トップページはカード型（はてなブログProのみ） 色は変えられます スマートフォンはスライドメニュー デモブログ デモブログはこちら↓。グローバルメニューやオリジナルシェアボタンの設置方法も書いています。 Yumekawa トップページはカード型（はてなブログProのみ） はてなブログProの方は設定＞詳細設定からトップページの表示形式（PC版） を「一覧形式」に変更していただければ、OKです。記事にはアイキャッチ画像を設定して下さい。 はてなブログProじゃなく

将棋棋士三浦弘行九段のソフト使用疑惑が取り沙汰され、色々な人が色々意見を述べています。 http://gattolibero.hatenablog.com/entry/%E4%B8%89%E6%B5%A6%E4%B9%9D%E6%AE%B5%E3%81%AE%E3%82%BD%E3%83%95%E3%83%88%E4%B8%8D%E6%AD%A3%E7%96%91%E6%83%91%E3%81%A8%E5%B0%86%E6%A3%8B%E9%80%A3%E7%9B%9F%E3%81%AE%E5%AF%BE%E5%BF%9Cgattolibero.hatenablog.com id:gattoliberoさん 自由ネコさんのブログは楽しい記事が多く、いつも面白く読ませていただいていますが、今回の記事には確証もなく三浦九段を黒と断定して中傷しており、疑問に感じました。 また、当然ながらこの記事

2018-03-21 はてなブログカスタマイズ記事のまとめ はてなブログ ブログカスタマイズ はてなブログカスタマイズ記事一覧です。今までの過去記事をまとめました。 パーツ毎に分けているので、カスタマイズしたいところの記事をご参照下さい。上から順番にヘッダー、グローバルメニュー、記事上・記事下、サイドバー、フッターと辿っていくとはて… 2021-07-16 はてなブログのヘッダー右上に突如出現した「読者になる」ボタンと崩れたスマホ版ヘッダー画像の修正方法 はてなブログ ブログカスタマイズ-ヘッダ周り CSS こんにちは。久しぶりにはてなブログのカスタマイズ記事書きます。 追記：はてなでは表示位置の変更を検討中 はてなブログのヘッダー右上に「読者になる」ボタンが突如出現 「読者になる」ボタンを消す方法（はてなブログProユーザー限定） 無料ユーザーの方… #はてなブログ　カスタマイズ #不具

ブログのヘッダー下におすすめ記事を4つ（PC）並べるカスタマイズをしました。過去の記事で読んで欲しいおすすめ記事やブログに初めて訪れた人にまず読んで欲しい記事をピックアップしてファーストビューに表示することが出来ます。「Page Analytics」によるとそこそこクリックされているようなので、直帰率を下げるのに役立つかもしれません。 はてなブログのサイドバーモジュールを使って自動的に人気エントリーを表示する方法もありますが、この方法は手動で記事を選びHTMLコードを貼り付けています。 レスポンシブ表示 flexboxで横並び ヘッダー下におすすめ記事を並べるカスタマイズ 余白などの調整 自動的に人気記事をまとめブログ風に表示するには↓の半月さんの記事をご参照下さい。 moonnote.hateblo.jp レスポンシブ表示 PC スマートフォン このようにレスポンシブに表示されます。タブ