※当テーマの紹介する際は、テーマ配布ページではなくこの記事のURLを使用してください。 ※追記あり：デザインのアップデートについて+ 元のデザインに戻す方法 当ブログ「ひつじの雑記帳」を開設して間もなく、フラットデザイン風のおしゃれな自作テーマ「Codomisu Flat」を公開しました。 レイアウト的に少し扱いにくいテーマでしたが、思っていたよりたくさんの方に使ってもらえました。 力こそパワー　+ログ　ゼロから始めるビットコイン さんなど特におしゃれにカスタマイズされているので是非見てみてください。 あれから約2ヵ月経った今、オリジナルのはてなブログテーマ第二弾「Minimalism」を公開しました！ Minimalism（ミニマリズム）の特徴 このテーマは、テーマ名「Minimalism」にある通り、デザインは最小限のみに抑えてあり、「美」をとことん追求しました。 こどみすフラットとは

ブログテーマを『Minimalism』に変更 昨日ブログテーマを変えましたって投稿を書いていたら、書いている途中からもう次のテーマに変えたくなってました。ちょっとカスタマイズするところ多すぎ問題にアウトプットすることで気付いてしまったのです。 ojigatari.com で、昨日の記事の最後には「多分すぐ違うテーマにする」ということを書いてから投稿したのですが、その次の瞬間から作業に取り掛かりました。『Natural』は結果的に3日くらいしか使わなかった短命のテーマとなりました。思い立ったらやらないと気になってしょうがないのです。ごめんねNatural。 それで、どのデザインテーマにしようかとまた色々と見てみたのですが、基本方針は変わらないです。 シンプルで飾りが少ないものに、自分の好きなカスタマイズを入れる。ただし、カスタマイズはちょろっと。ということで探しました。 結果的に行き着いたの

はてなブログのテーマ変更って大変ですよね。 ある時私は、人気テーマの一つである「Minimalism」へテーマ変更を行いました！ 実際に行ったカスタマイズなどを自分の備忘録も兼ねて書き連ねておこうと思います。 ブログは記事の内容が一番！と言われていますが、もちろんブログ自体のデザインも大事です！！ これからはてなブログのデザインを変更しようかな？Minimalismにしようかな？と考えている方は是非ご覧ください。 ※「コードを表示する」もしくは「表示する」ボタンを押してもらうと実際に私が使用しているコードと同一内容のものを表示することが出来ます。コピペしてもらって構いません。 ※現在絶賛リライト中なので、全てのコードを表示することが出来ていません。リライトが全て終わるまでもう少々お待ちください。 なぜはてなブログのテーマを「Minimalism」へ変更？？ 「Minimalism」などのは

はてなブログでは，デフォルトで読み込まれるCSS「globalheader.css」で，79種類のアイコンWebフォントを読み込んでいます．これらのアイコンで間に合うのならわざわざ「Font Awesome」を読み込む必要もなく，ページの軽量化が期待できます．そこで，本記事では，それらのアイコンの一覧と使い方をまとめました． はてなブログのアイコンWebフォント一覧 とりあえず，どんなアイコンが使えるのか見てみましょう． よく使いそうなアイコンはひと通り揃ってそうな気がしますね！ しろかい！でも，一部のソーシャルメディアのアイコンを除き，基本的にはこのWebフォントしか使用していません．Font Awesomeは一切使用していません． では，使い方を見ていきます． 使い方その1：<i>タグを使う アイコンを表示したい部分に，以下のように記述すればOKです． <i class="(使用したい

できるだけ表示スピードの速いSNSシェアボタンを設置したくて、いろいろやってみました。 とはいえ私はド素人なんで、偉大な先人たちの仕事を参考にしまくった感じです。 先人たちに感謝！ 【2019年4月6日追記】 何故かいつの間にか、シェアボタン内のアイコンの上下位置が若干ズレていた（特に「はてブ」と「フェイスブック」のアイコンのズレが気持ち悪かった）ので、なんとなくほぼ同じ位置になるように修正しました。 CSSの部分の赤いテキスト部分が、今回修正した部分です。ボタン内のアイコンの位置に関する指定は、だいたいこのへんですので、もしも違和感がある方は、自分なりにちょっといじってみてはいかがでしょうか。 自分でゼロから作り上げるほどの知識はございませんので、いろいろ参考にさせていただきました。感謝です！ まず、はてなブログにデフォルトで用意されているSNSシェアボタンって、こんな感じなんですよね。

こんにちは。かまぼこです 最近、カスタマイズばかりしてて記事が進みません……。 デザインって着せ替えゲームみたいで、反映させながら試行錯誤するのが止まらないっ！ 情報を探そうと色々なサイト物色してると、よさげなものがたくさんありました。見つけた中で、役に立ったり、面白かった、導入している人が少ないものをいくつかご紹介していきます。 細かいデザインを変えると少しでも見栄えがよくなります。こだわるとキリがないけど、来てくれた人も楽しめるはず。 では、いってみよう！ はてなスターのデザイン パンくずリストのデザイン 404 Not Found 画面カスタマイズ トップページからはてなスターを削除する パンくずリストを記事下に移す リンクの色を変える 画像をタッチ(クリック)したとき拡大させない コメントボタンのデザインを変える ふい字にカスタマイズ Proの表示を消す 翻訳リストの設置 スマホ版

みなさんこんにちは！ いきなりですが、あなたははてなプロ？　それともはてなアマチュア？？ 私、最近になって気づいたんですが、自分が読んでいるブログの殆どの方がはてなPROでした。　ほとんど玄人！！　みんなPRO表示ついてるやん・・・！ このマークのことですよ→はてなブログPro やはり、PROの表示がついてると「みんなやってるよ？あなたはやらないの？」と言う感じがしてきて、私もPROになりたい・・・！　と思わせてきます。 ・・・が。　そんな中、わざわざPRO表示を消したがる人も現れました。 azulitchi.hatenablog.jp ヒミツ基地のらいちさん(id:AzuLitchi)は殴り飛ばしたくなるくらいにPRO表示がお嫌いらしく、隠れPROになったようです。 私の憧れのPRO表示を消しちゃうなんて・・・！ と、そこで気づきます。　表示をつけたり消したり・・・・？ はっ・・・！　そ

Google Adsenseの審査に合格したら、まず行うことは広告の設置ですね。この記事ではアドセンス広告を設置する方法、必要なスクリプトを自動的に作成できるツールを提供しています。 このスクリプトでは、はてなブログを利用中で記事中やフッターにGoogle Adsense（アドセンス）を設置・自動挿入しつつ、ポイントサイト記事など特定カテゴリでは広告を非表示にすることが可能です。 目的の機能 本記事が目指すのは次の2つの機能です。 Google Adsense 広告を記事中に自動挿入する 特定の記事でGoogle Adsense 広告を非表示にする この2つを同時に実現するのがいかに大変かを既にご存知のブロガーさんも多いかと思います。なぜなら、1と2はそれぞれ別の人たちが作ってくださったスクリプト（JavaScript）のため、同時に利用することを前提として作られていないからです。 そのた

はてなブログカードというのがあります。 ↓　こういうのですね。 www.yahoo.co.jp 結構便利というか、記事などの概要やサムネイル写真が入ったりして便利です。はてなブログでは、リンクのURLを記事にペーストすると選べるようになっています。 しかし、このブログカードのHTMLを見てみると、「iframe」で書かれていて、Googleにとってはリンクにはなっていないという話もあります。まあどうなのかはわかりませんが。 ということなどが理由で、はてなブログカードのiframeなしを作ってみました。もう一つ理由があってWordPressなど他のブログサービスだと、ブログカードがいまいちだったり、使えなかったりするので、そういうことから一応作ってみました。 こちらのリンクからどうぞ はてなブログカード iframなしに 動作を保証するわけではないので、使ってみてうまく表示されないようなら、

はてなブログで広告の本文中への自動挿入を実現できるこの記事、いろんな方に言及していただいて、コメント等をいただいて応用例を随時増やしてたりしております。 でもですね、ずっと心配してたんですよ。みなさま、実はこんなことを思ってるんじゃないのかなって。 コピペで簡単って！全然コピペで簡単じゃねえよ！scriptをscripにするというわけわからん手順はあるし、なかなかうまく動かねえし！ 応用例追加するのはいいんだけど、どの部分がどこのコードに対応してるのかよくわかんねえからカスタマイズできねんだよ。だれもがプログラマだと思ってんじゃねえ ってね。いや、みんなくちには出さないけどそう思ってるはずだ、と。そんな被害妄想で夜も眠れない日々を過ごしていたわけです。 そんなわけで！ つくりましたよ！ マジでコピペで簡単なやつを！ あなたがやるのは、アドセンスのコードをはっつけて、作成！ボタンを押すだけで

こんにちは、つばさ（@tsubasa123）です。 結構温めていたカスタマイズネタです。二週間ほど寝かせて様子を見ましたが問題なさそうなのでご紹介。これはぜひ皆さまに使っていただきたい。 【2017/03/27 追記】アップデートしました WordPressにはプラグインがあるけれど 仕様と実装と設定 JavaScriptの追記 CSSの追記（PC） CSSの追記（SP） 課題と懸念点 後から知ったこと AMPバージョンも一応作成 さいごに 関連記事 【2017/03/27 追記】アップデートしました www.tsubasa-note.blog レスポンシブデザインのテーマを利用していると表示が崩れる問題がありましたので、アップデート版を公開しました。上記記事を参照してください。 WordPressにはプラグインがあるけれど はてなブログの標準機能では更新日を自動で表示することができないみ

※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢

俳句投稿用ブログテーマです。1エントリにつき1つ俳句を投稿するような日記に向いています。 俳句の下には普通の文章を書くことができますので、普通にブログとして使いたい方もお使いいただけます。 はてな記法モード エントリの最初に、以下のようにリストを書くと俳句として表示されます。 - 柿くへば - 鐘が鳴るなり - 法隆寺 リストの前に画像を置くと、俳句の背景画像として表示されます。 <img src="horyuji.png"/> - 柿くへば - 鐘が鳴るなり - 法隆寺画像はimgタグの他、フォトライフ記法、Instagram画像などすべての形式に対応しているつもりです。 俳句の後には制約なく文章を書くことができます。また、最初にリスト表示がない場合はその他のブログテーマと同じです。 俳句だけでなく、短歌にも対応しています。

例：自分のブログが http://anisma.hatenablog.jp/ であれば、 http://anisma.hatenablog.com/ を作成します。これで他の人がそのURLを使うことはできません。同じようなURLだと紛らわしくなることがあるので、そういったものは先に取ってしまって保護したほうがいいという考えもあります。 ブログをコピー テストブログを作成したら、メインブログのcssや加えたhtml、設定などをそっくりコピーしてきます。基本的には設定画面を2つとも開いてコピペです。 続いて、ブログの記事をすべて取り込みます。 まずはダッシュボードから設定→詳細設定→エクスポート（記事のバックアップと製本サービス ）と進み、ブログの記事をエクスポートします。テキストファイルでダウンロードできるので、PCの適当なところに保存します。 続いてダッシュボードのインポートからブログデー

昨日紹介したFontpainterでフォントを作成したのでフリーフォントにしちゃいます！ 漢字を追加しました。(2017.12.27) コンセプト 収録している文字 収録している記号など（93文字） 利用規約 OK NG ダウンロード(2017.12.27追加) 変更点 WordPressのブログもやってます！ 関連する記事 コンセプト しろくまの肉球をイメージした手書きフォントです。 有料フォントみたいに整ったフォントではないので、フリーフォントとして配布するかどうか迷っていました。ですが、逆に整っていないのがフリーフォントのデメリットでありメリットなのでは？？？？と開き直りました。 収録している文字 ひらがな・カタカナ・半角アルファベット・半角数字・第一水準漢字（多分）・記号など 収録している記号など（93文字） ¢$€£￥~=≡∇>¬⊙%+☂★☆♡♥♩♪♫♬✪✿⌒@&©§°^′″●◑

2017 - 02 - 03 グーグルアドセンスから警告が来た。コンテンツなし？何それ？ グーグルアドセンス お金の話 テクノロジー 下ネタなし とうとうアドセンスからポリシー違反の警告メールが届きました。 あれだけみなさまから「下ネタ止めた方がいい」とアドバイスを頂いていたにもかかわらず、性懲りもなく下らんオナニー話を書き続けていたので「とうとう年貢の納め時か」と言うのが正直な感想でした。 ポリシー違反しているページのURLがメールに書かれてあったので「どの記事がポリシー違反だったんだろう」と、そのURLをクリックすると、それは以下のように私がすでに削除してしまっていた記事でした。 私はご存知のように下らん記事ばっかり書いているので、アップした直後は「名作やで」と自画自賛なのですが、寝て起きて読み返したら、あまりの下らなさに恥ずかしくなって自己嫌悪に陥り、記事を削除してしまう事が度々あり

はてなブログのカスタマイズって本当に難しいですよね？ でも、読んでくれる人の為に読みやすく、わかりやすく「いい記事や商品の紹介」をしてあげたいですよね？ 私もブログを始める前は探す立場、検索ばかりする立場だったので、「いい記事、いい商品を紹介」してくれていると本当にありがとう！！って思っていました。 ３ヵ月私が続けてこられたのも、今、素敵なブログが出来上がっているのもこの方たちのお陰だと言っても過言ではありません。 パソコン言語？タグを見てると若干目まいを感じるので出来るなら、コピーして貼り付けして私は記事だけを書きたいタイプです。 私が参考にした人を紹介しているのでこちらのページへ行くと私が使っているテンプレートや枠、マーカーなどを紹介してくれているので参考にしてみて下さいね(o^―^o) はてなブログカスタマイズ はてなブログカスタマイズのページは検索すればたくさんあると思うのですが、

2017 - 01 - 10 はてなブログカスタマイズを加速させるガイドPC版（中級者向け） お仕事、レッスン、募集中！ 塩尻市ヨガinカルチャーセンター 茅野市ヨガinサロン 茅野市呼吸法inふたば玉川薬局 諏訪市発出張ヨガレッスン ブログコンサルティング 広告掲載募集中！ Bookmark! Facebook Twitter 吹き出しを作って喋らせたり ブルブルさせたり 背景をグレーにしたり 箇条書きを こんなふうに 変えられます さまざまなカスタマイズが可能です。そう、はてなブログならね。 初歩レベルのカスタマイズはこちらの記事で紹介しています。  yuta.ituyoga.com 注意すべきこと【重要】 レスポンシブデザインに設定する【任意】 メリット デメリット 記事を読みやすくしてみよう【重要】 ブログ編集を楽にするChrome拡張機能【重要】 目次を使いやすくしよう 吹き出し

最終更新：7月25日 カードリンクが重かったのでテキストリンクに変更しました。 はてなブログのカスタマイズ方法まとめ 今回ははてなブログユーザー向けに、はてなブログのカスタマイズ方法を紹介した記事をまとめました。 もしかしたらあなたの知らないカスタマイズがあるかもしれませんので、ぜひぜひご覧ください。おそらく、この手の記事で一番カスタマイズを網羅したんじゃないかと思ってます。 目次を見れば、はてなブログでどんなカスタマイズができるか把握できますね。 カスタマイズの前に注意事項 カスタマイズを行う前に頭に入れておいて欲しいことがありますので、それを先に読んでおいていただくと、非常に助かります。 動作チェックを必ずする カスタマイズをする上で、とても重要なことがあります。それは、かならずPCとスマホで動作確認をすることです。 PCではちゃんと表示されていても、手違いでスマホだと表示されていない