読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

WordPressテーマ制作中…

しばらく放置していたWordpressの勉強を再開しました。 練習用にテーマを作りました。 デモページ: store.syofuso.comもう少し直してから、公開予定です。 OGPの設定はテーマに組み込むべきなのか、否か。個別にユーザーが設定した方がいいのかな。HTMLの知…

「持病があっても入れる保険」に入れなかった話

別にがっかりもしていないけれど、なんだか理不尽だなと思った個人的な話です。 勧誘があって周りに勧められたこともあり、申し込もうとしていたのですが、某「持病があっても入れる系」保険(いわゆる引受緩和型医療保険)に入れませんでした。 正確な理由…

「stripe」のページャ(次へボタン)のスタイルを変更しました(ピンクカスタマイズされた方へ)

余白の取り方がおかしいところがあったので、「stripe」のページャ(次へボタン)のスタイルを変更しました。色を変更してない人はとくに何もしなくて大丈夫です。design.syofuso.com 前回の記事で紹介したカスタマイズでピンクに色を変更された方は、コード…

ピンクストライプでガーリーにカスタマイズ(訂正あり)

新しく投稿したはてなブログテーマ「stripe」の当初デザインはピンクのストライプでした。このブログも気分転換にしばらくピンクストライプでいきます。 お色直しのカスタマイズ用CSSコードをまとめました。

はてなブログテーマ「stripe」を公開しました。

stripe - テーマ ストア新しいはてなブログテーマ「stripe」をテーマストアに公開しました。2カラム。レスポンシブデザイン。紺を基調とし、ストライプの下線をアクセントにデザインしました。レイアウトはこのブログとほとんど同じです。デモブログ: blog-…

コードをコピペする前に HTMLの基本 a アンカータグ

ブログをカスタマイズする際に、カスタマイズの解説記事からソースコードをコピペすることがありますよね。 このブログのカスタマイズ記事も参考にして下さってありがたいのですが、時々間違って記事そのままをコピペされてる方を見かけます…。 design.syofu…

自作テーマのススメ/はてなブログテーマ制作の流れなど

テーマ制作のきっかけ 私はid:shiromatakumiさんの記事を読んだことがきっかけで、自分のブログ用の自作テーマを作り、それからはてなブログのテーマストアで公開するテーマ作りを始めました。 CSSではてなブログをカスタマイズしてみよう - NO TITLE自作CSS…

jQueryライブラリのパスの統一

このブログで紹介しているカスタマイズの中にはjQueryを使用しているものがいくつかあるのですが、その紹介の際にjQueryライブラリの読み込み先をはてな版CDNにしていました。(その理由は後述) <script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.9.1" type="text/javascript"></script> これです。(以前の記事のもの)これを本家のjQuery CDNに…

カテゴリーの数が多くてデザインが崩れる場合の対処と読者になるボタンの設置

テーマ「Minimal Green」をお使いの場合に、記事に設定したカテゴリーの数が多くて被ってデザインが崩れる事があります。 個別にコメント欄などで対応してましたが、質問を下さった方がいらっしゃるのでここで記事にしたいと思います。↓こういう状態のことで…

はてなブログテーマ「Minimal Green」のブログタイトル、エントリータイトルの:hoverの色を変えました

細かい変更なんですが、テーマCSSのブログタイトル、エントリータイトルのオンマウス時(ホバーエフェクト)の色を変えました。 具体的には以下のコードを追加しました。 #title a:hover { color: #666; opacity: 0.7; } .entry-title a:hover { color: #666…

見せたいメニューのみ表示して残りをドロップダウンにするレスポンシブナビゲーション(追記あり)

レスポンシブデザインではナビゲーション・メニューのスマートフォン表示に三本バーのハンバーガーメニューを設置している場合が多いと思います。 私もこのブログや他のサイトでハンバーガーメニューを使用しています。 ハンバーガーメニューは使いにくい… …

将棋ソフト不正使用疑惑問題と一致率の統計的有意性について

将棋棋士三浦弘行九段のソフト使用疑惑が取り沙汰され、色々な人が色々意見を述べています。gattolibero.hatenablog.com id:gattoliberoさんのブログ記事に以下のブックマークコメントを残しました。【99.9%クロ】三浦九段の将棋ソフト不正使用疑惑と将棋連…

勉強お休み中・・・

ちょっと仕事が立て込んで、ブログ更新もwordpressの勉強もお休み中です。ここしばらくテキストエディターではなく会計ソフトとexcelと戦っております。来週明けには落ち着いてるかな。日報エントリでした。

WordPress勉強中…参考テキストなど

WordPressのオリジナルテーマを作りたくて今更ながら勉強中です。 WordPressでブログ作ったりカスタマイズはしていたけれど、WordPressテーマは触ってなかったので基礎からやっています。

はてなサポート窓口からのメールを見落としてブログが非表示になった話

以前、以下のカスタマイズ記事を投稿したのですが、内容についてはてなブログに問い合わせしました。 design.syofuso.com ↓↓修正前の記事: スクロールするとメニューがトップ固定されるカスタマイズです。カスタマイズはこんな感じです。スクロールするとこ…

ロリポップでサブドメインのhttpsリダイレクト除外設定をする

澄風荘のサイトはロリポップを使っているのですが、独自SSLを導入し常時https接続にしています。 ルートディレクトリに以下のように記述した.htaccessを置いています。 httpsへリダイレクトする例 RewriteEngine on RewriteCond %{HTTPS} off RewriteRule ^(…

Facebookシェアボタンのぐるぐる回る不具合について

最新エントリのFacebookシェアボタンのカウント部分が「ぐるぐる回る」不具合について修正があります。 シロマティ (id:shiromatakumi)さんの記事にて解説・修正コードが公開されています。 オリジナルのシェアボタンを使っている方は確認してください。 shi…

HTMLテンプレート「white base」のHTML構造

旅館・飲食店向けの無料HTMLテンプレート「white base」の各パーツごとのHTML構造について説明します。 テンプレートのデモページはこちら↓↓ base.syofuso.com skeletonのグリッド・システム ヘッダーナビゲーション

クレジットカードを導入するかどうかはお店が決めること

一部はてなブログ界隈でクレジットカード決済の実店舗にかかる手数料について話題になっていますね。 cards.hateblo.jp www.kikkafe.nagoya クレジットカードを使うのは「お店に負担だから」… クレジットカード手数料を価格に上乗せするのは規約違反 「~円…

旅館・飲食店向けの無料HTMLテンプレート「white base」

旅館・飲食店向けの無料HTMLテンプレート「white base」 ローカルビジネスに使えるHTMLテンプレートを作りました。 レスポンシブシングルカラムのHTMLテンプレートです。 旅館や飲食店向けに、縦書きのナビゲーション、日本語がきれいに表示されるデザインに…

はてなブログのaboutページをカスタマイズしました。

シロマティ (id:shiromatakumi) さんのaboutページが素敵だったので真似してみました。 shiromatakumi.hatenablog.com 1カラムにするアイデアいただきました。ありがとうございました。↓↓澄風荘Aboutページ↓↓blog.syofuso.com

食べログの点数リセット問題/じゃらん・楽天トラベルのクチコミはどうか

あちらに書くと支障があるかもしれないのでサブブログに書きます。 食べログの点数リセット問題 buzz-plus.com 食べログの点数リセット問題 じゃらん・楽天トラベルのクチコミはどうか クチコミサイトがたどる道

スクロールするとトップに固定するメニュー(はてなブログPro向け)

注意:このカスタマイズははてなブログPro向けです。無料ユーザーがはてなグローバルヘッダーを隠すと規約違反ですのでこのカスタマイズはできません。 スクロールするとトップに固定するメニュー スクロールするとトップにメニューを固定するには以下の①と②…

はてなブログの「記事を書く」「管理画面」へのリンク

はてなブログのグローバルヘッダーにはお知らせや「記事を書く」「管理画面(ダッシュボード)」へのリンクがあって地味に便利ですよね。 ただちょっと遅くなるし、自分のブログらしさを出したいときやデザインの点で邪魔になることがあります。 はてなブロ…

太陽がまぶしかったから さんのパンくずリストプラグインを使っている方向けのCSS調整

(懐かしい組み合わせの素材ですね) デザインテーマ「Minimal Green」を使って下さっている方で、JavaScript版のパンくずリストを導入されてて、カテゴリー表示が崩れているブログをいくつか見ました。 パンくずリストを導入した場合の調整について書きます…

個人事業主のためのホームページ更新方法 FFFTPの使い方

香住で但馬の地域観光やお店のコンサルティングや山陰海岸ジオパークのPRをされている今井ひろこさんのブログで面白い記事が書かれています。 imaihiroko.com 「業者に言ってるんですが、なかなか替えてくれなくて。何回も電話しないと替えてくれないんです…

schema.orgで構造化データマークアップしてGoogleにローカルビジネス情報を伝える

Googleでお店や会社の名前を検索すると検索結果にビジネス情報のパネルが表示されますよね。ナレッジパネルといいます。 ↓これです。 Googleの検索結果に実店舗の所在地や営業時間、メニュー、クチコミ情報、店舗の外観が表示されたらユーザーにとって便利で…

カスタマイズしたFacebookのシェアボタンのカウントコードを修正して下さい

Facebookのシェア数をカウントするAPIの旧バージョンが利用できなくなったため、カスタマイズしたシェアボタンを貼っている方はシェア数が0になっているようです。 シロマティ (id:shiromatakumi) さんが修正を喚起する記事を書かれています。 Facebookの開…

はてなブログの記事幅・レイアウトを変更する

デザインテーマ「Minimal Green」では記事とサイドバー以外を可変にした2カラムになっています。 「Minimal Green」のレイアウト /*content幅 PC*/ #container #content { width: 1000px;} /* 2カラムレイアウト */ #main { width: 624px; float: left; } #b…

囲み枠・デザインボックスCSSでブログ記事にアクセントを

記事本文にアクセントを付けたい時に便利な枠付きボックスのCSSです。 それぞれclassにtext-box1~5を適応し以下のようにdivでくくってお使い下さい。 HTML編集(見たままモード、はてな記法、MarkDownモードでも使えます) <div class="text-box1">この中に記述</div> 記事中だけでなく、…

html要素を移動・置換・挿入させるjQueryコード

design.syofuso.com はてなブログの公式パンくずリストを記事上、下に移動させるカスタマイズについての記事を書きましたが、 前回では空のdivを用意してその中のhtmlを既に記述されたhtml(サイドバーの関連モジュール)から取得し変更するという方法でした…

はてなブログ「コメントを書く」ボタンのカスタマイズ

はてなブログの「コメントを書く」ボタンってデフォルトだとシンプルで少し小さめですよね。場合によってはどこにあるか気づきにくいことも。 コメントボタンの文字を大きくしたり、デザインを変えるなら.leave-comment-titleのcssで指定します。このブログ…

見出しのデザイン CSS

デザインテーマ「Minimal Green」の見出しのデザインh1からh4までのCSSh1見出し .entry-content h1 { font-size: 160%; padding: .75em 0; border-top: 2px solid #454545; border-bottom: 2px solid #454545; }

はてなブログの記事上下にレスポンシブなカウント付きシェアボタンをつけるカスタマイズ(修正あり)

このシェアボタンはid:hiroseyonakaさんのコードを参考にしています。ありがとうございました。 www.hiroseyonaka.com [追記]2017/01/20:はてなブログのブログアイコンWebフォントが使えなくなっています。 こんな感じのデザイン はてなブックマーク、Faceb…

はてなブログ公式パンくずリストを記事上、記事下に表示するカスタマイズ

はてなブログ公式のパンくずリスト機能がリリースされましたが、design.syofuso.com普通にパンくずリストを表示させるとページ上部に出ますよね。デザインによってはページ上部ではなく記事下に表示させたいこともあるかと思います。 そこで、「はてなブログ…

はてなブログのフッター、フッターメニューまわりのカスタマイズ

はてなブログのフッター部分のカスタマイズについてあまり解説を見かけないので自分でできる範囲で書いてみました。良かったら参考にして下さい。 はてなグローバルナビゲーションは残し、フッターのみ消す(はてなブログProのみ) フッターとボトムエリアの…

はてなブログ公式機能のパンくずリストを表示したときの余白(margin)について

psn.hatenablog.jp ぽけっとしすてむ (id:psne)さんの記事で知ったのですが、はてなブログの公式機能で記事個別ページにパンくずリストを表示させることができるようになったそうです。 2日ほどはてなブログ触ってなかったので気づきませんでした。遅いです…

まとめて色を変更するCSSコード、ピンク、水色

まとめて色を変更するコード、ピンク、水色を用意しました。デザインCSSに貼り付けてお使い下さい。 ピンク系 #E9546B薔薇色 水色系 #89C3EB勿忘草(わすれなぐさ) ピンク系 #E9546B薔薇色

まとめて色を変更する 黒系カスタマイズ一例[訂正あり]

まとめてリンク文字や メニューバー、ページャー、続きを読む、サイドバーの色を変更するコードを書きました。 デザインCSSに追加でコピペして下さい。 他の色にもコードを参考に変更してみてください。 追記:セレクタごとに分けました。必要なところをお使…

グローバルメニューの設置と色変更

手引にも書いたのですが、こちらでも詳しく書きます。 共通作業:タイトル下に貼り付けるHTML ドロップダウンメニューのHTML構造について 黒背景のグローバルメニューCSS 白背景に黒文字のグローバルメニューCSS メニューに表示するアイコンを変える

はてなブログのヘッダー、タイトル画像の設定について

ヘッダー、タイトル画像の設定について説明します。他のデザインテーマのカスタマイズにも応用できます。 タイトル画像の設定(はてなブログのタイトル画像機能を使う場合) タイトル画像の上下の余白を取る タイトル名の文字の色、中央寄せ cssで直接指定す…

フォントを変える Google web font Noto Sans Japaneseの導入

フォントの指定は全体を変えるならbodyに body { font-family:'“Lucida Grande”', '“segoe UI”', '“ヒラギノ丸ゴ ProN W4”', '“Hiragino Maru Gothic ProN”', “メイリオ”, Meiryo, Verdana, Arial, sans-serif;} このように指定します。 フォントは環境によ…

サンプルエントリー1

大見出しh3 それは前同時にこの所有ようというはずのために思い切っあっです。とにかく結果が懊悩帰りはとうていこの把持たますだけにきめているですをも病気なるなけれでて、あまりとは叫びたらでですた。 国民に伴った事は人知れず一番にすでにうありでし…

デザインテーマ「Minimal Green」のカスタマイズの手引

この「Minimal Green」テーマのCSSは自由に改変してくださって構いません。 Minimal Green - テーマ ストア 背景画像や背景色を変えるとこんな感じになります。 メニューやリンク文字の色を変えるとこんな感じになります。 [注意] グローバルメニューとペー…

サンプルエントリー2

プライバシーポリシー

当サイトに掲載されている広告について 当サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net、Amazonアソシエイト)を利用しています。 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや…