はてなブログに初の解説書が出たので、著者と編集者にブログの良さについて聞いてみました！ 『はてなブログPerfect GuideBook』プレゼント企画 - 週刊はてなブログ
※キャンペーンは終了しました。たくさんのご応募、ありがとうございました。 はてなブログとして初の解説書『はてなブログPerfect GuideBook』がソーテック社から刊行されました。 執筆されたのは、人気のデザインテーマ「CONTENTS」の作者であり、ブログのカスタマイズやデザインについての情報を自身のブログでも発信しているJOE AOTO (id:dreamark) さん。 私の執筆した本の発表と予約開始。はてなブログPerfectGuideBook - DREAMARK JOEさんはサブアカウントで、文房具など自身が好きなものを紹介するブログ スキナモノート も運営されています。 「スタンダードな解説書」とソーテック社の編集者さんに聞いてはいましたが、設定やデザインの手順がスクリーンショットとともに300ページ近くたっぷりと解説された内容を、送ってもらった見本ではじめて拝見し、こ
はてなブログカスタマイズ公式コピペ設置方法まとめ - 太陽がまぶしかったから
photo by P4BLoX 公式コピペ設置方法をまとめておきます はてなブログのカスタマイズ記事が季節ごとに新規ユーザー同士で流行るのは風物詩なのですが、http://bulldra.github.io ドメインから配布している自作のブログパーツを直接的に呼び出すコードが別の人からのコピペで紹介されているのを何度か見かけました。 （フィッティングした上での）転載自体は仕方ないのですが、孫引きされて元記事へのリンクや著作物者の情報が消えた状態で紹介されるのはバイラルメディアの直リンク画像問題に近しいものを感じます。 とはいえ利用者からの視点で見ればこちらの解説記事にも問題があったので、能書きはさておいてコピペで簡単に設置できるように公式でまとめておきますね。なお自分のブログにソースコードの転載する場合には必ず著作者を明記し、全文転載はご遠慮ください。孫引きは禁止します。 パンくずリストを
はてなブログのヘッダメニュー消すやつ - すなばいじり
なんどめだこのネタというハック。 ちゃんとロードしているので「表示が早くなった！」といった感想は気のせいかと思いますよ。そもそも後ろの方で処理が開始されるので、その差が分からない事もありますね。 詳細設定のヘッダ・フッタ設定で非表示に設定しても、色々な事情で中身がロードされる為、ヘッダ内にCSSを置く方法がお勧めです。(はてなブログProのみ) → ブログの詳細設定を開く #globalheader-container { display: none; } スマホ版でも消えます。 上部に隙間が出来て見栄えが！という場合は #container { padding-top: 0px; } containerの余白を消すことで上手い事できます。(はてなブログProのみ) 設定と上手く組み合わせると幸せになれそうです。 enjoy :) suzukidesu23.hateblo.jp その他：や
不可能を可能に！はてなブログのプロフィールページをカスタムできるJavaScriptプラグインを自作した - 移転→hapilaki.net
はてなブログのプロフィールページをカスタムできるよ。PCとスマホの両方で自分の好きな内容を表示できる。初心者でも使えるようにプラグインにした。「Custom Profile for Hatena Blog」と命名。 概要 Custom Profile for Hatena Blogの特徴や導入/カスタム方法を説明する。はてなに無課金ならPC表示だけ、課金していたらPCとスマホの両方を編集可能。はてなブログの管理画面でコードをコピペするだけ。 そもそもプロフィールページって何？ プロフィールページとは URLの末尾がaboutになっているページのことだ。 当ブログであれば次のページがプロフィールページ。 http://www.hapilaki.net/about このページを説明すると次のとおり。 ブログ開設時に自動生成されたページのひとつ。 ページタイトルは「このブログについて」。 ブログ
RAD v0.0.3 - Random Access Diaries
2014-03-22 RAD v0.0.3 ライフハック ブックマークや☆をくれて、気に入ってくれている方々がいるようなので、逐一報告していきます。 ランダムのやつ、v0.0.3です。 見つけられるエントリurlは全部取りました。400万ぐらい。 そいで、潜る深さとか変えれるようにしました。 http://219.94.245.80:3000/recent ←一週間以内でランダム http://219.94.245.80:3000/since_blog ←はてなブログ開始(2011-11-07)以降でランダム http://219.94.245.80:3000/since_diary ←はてなダイアリー開始(2003-01-16)以降でランダム デフォルト(http://219.94.245.80:3000/)は、since_blog。 お好みの深さのやつをブックマークバーに追加してポチポ
はてなブログのカテゴリーや記事一覧にアドセンスなどを表示させるやつ - すなばいじり
一覧ページに「固定ページ」のリンクとか貼りたい 記事のヘッダやフッタ、サイドバーに色々リンクを付ける事ができるけど、記事一覧の中に入れたいよね。ランキング表示とか時々そういうやつ有るじゃない。 どうやるの？ やってみよう、大はてな実験 で。 こちらの記事が上がっていて、「出来るけど無くても良いかな？」と思っていましたが、 多分できるけど、adsenseの広告コードをいじった時のペナルティが見えないので手を出してない部分。Amazonとかa8とかの画像単純リンクなら安全にできるかな。 / “はてなブログでカテゴリーページ等にアドセンスを表示させる方法…” http://t.co/UzhK7GBi9T — 池田仮名 (@bulldra) 2014, 11月 5 id:bulldra (池田仮名)氏が反応したので、 @bulldra 書きますか/書きましょう — PSN(psne.jp) (@p
大はてな実験 - すなばいじり
大はてな実験とは 「あれ？これってどうやればいいの？」「この機能はあったかな？」 はてなブログで大実験。 はてなブログをちょっとリッチに。 お役立ちモノから実験レベルまで、はてなブログで使えるスクリプトのご紹介。 基本的に数行入れるだけで完了する設計になっています。 どうぞご利用ください。 (投げ銭)ポイントを送信できます この砂場、砂が漏れてる。*1 全部試してみよう 大はてな実験とは 記事一覧の中にHTMLを挿入したい！(記事リンクなどを挿入) 曜日を表示させたい！ 検索結果にカテゴリを表示させたい！(パンくずリスト) 画像のタイトルを変えたい！(SEO対策) 検索結果にプロフィールを表示させたい！(SEO対策) いつか「検索するボックス」を表示を出したい！(SEO対策) はてなブログの画像を拡大表示しないようにしたい ブログ記事のコピー対策をしたい リンクのボタンを作りたい！ お賽銭
オススメ本の参照から購入までをブログ内で完結できるAmazonインスタントストアをオープンしてセレクトショップ運営ごっこ - 太陽がまぶしかったから
Amazonインスタントストアをブログ内にオープン このブログ内にAmazonインスタントストアを『ikedakana.書店 - このブログで紹介した書籍』にオープンしました。記事内にAmazonインスタントストアを埋め込んであるので、オススメ商品の参照から購入までをブログ内で完結させることができます。書店なのにゲームや雑貨を置くのはヴィレヴァンのリスペクト。 『書くことなし日記：インスタントストア編 - 何かのヒント』を読んで面白いと思い、指定した商品を陳列するインスタントストアを作成したのですが、これを雑貨やゲームなどを含めてブログ内のコンテンツとして常設したいと考えました。このブログでも商品を紹介する機会は多いですし、ひとつにまとまっていると便利です。 アマゾンの「くるくるウィジェット」を作るのも少し飽きてきたので、今度は「インスタントストア」という形で、お勧めの本を並べる作業をやっ
コピペでOK！はてなブログのカエレバをcssでカスタマイズする - AIUEO Lab2
はてなブログはAmazonにある商品ならブラウザの移動などしなくても直接検索して紹介できるようになってるけど、Amazonにない商品は簡単には紹介できません。 楽天市場や、セブンネットなんかの商品も紹介したい！ そんな時に使えるのが「カエレバ」です。ブログやアフィリエイトを長くやってる方なら知っている便利なツール。 スポンサーリンク こんな広告が作れる カエレバを使うと、上の画像みたいな商品紹介リンクが簡単に作れます。ただ、そのまま使うとあまりいい見栄えじゃないんですよね。そこで、私がやっているカスタマイズをここにメモしておきます。 参考にさせてもらったのはこちらのサイト ここのcssをはてなブログでも使えるように、PC表示用とスマホ表示用に分けただけです。レスポンシブデザインのテーマを使用している方は、上のサイトに書かれているものをそのままコピペすればこのサイトと同じ表示になります。 こ
人生のヒント 人生の悩みごとへの解答、ヒント、答え。哲学や倫理に関する話をまとめています｜
おわりに 夢を叶える５つのコツまとめ ここまでお読み頂きありがとうございます。 最後に話をまとめます。 夢を叶えるために必要なことは… 迷いを断ち切ること。 …
はてなブログのサイドバーにあるプロフィールから詳細プロフィールへの導線を作るプラグイン - 太陽がまぶしかったから
詳細プロフィールへのリンクが欲しい はてなブログのプロフィールページには文言を追加する事ができないため、詳細プロフィールページを固定URLのエントリーとして作成し、グローバルメニュー等からリンクさせる手法がよく使われています。このブログにも詳細プロフィールページが存在します。 しかし、詳細プロフィールページを作ったのであれば、サイドバーにあるプロフィールモジュールから表示できるようにするのが自然です。 もともと最新記事や注目記事モジュールについてはタイトルに一覧ページへのリンクが付与される仕様となっているため、これにあわせてプロフィールモジュールについてもタイトルに詳細プロフィールへのリンクを追加するプラグインを作りました。 https://vine.co/v/OhIHr9M1uWZ またサイドバーモジュールのタイトルから詳細ページや一覧を表示できる仕様についての認知度が低く、目立たない状
他人のブログに勝手に感想一覧の表示機能を拡張するブックマークレットを作りました - 太陽がまぶしかったから
感想書き放題ブックマークレットの向こう側へ 他人のブログに感想書き放題にする機能を追加するのが流行っています。実行すると自身のブログからこのエントリに言及するエントリの編集画面に飛ぶ機能です。 感想を書き放題にする機能については既に言及一覧を表示させるブログパーツで利用している事もあるし、他人のブログを勝手に感想を書き放題にするなら、他人のブログに勝手に感想の一覧表示もさせてしまえば捗ると思って作りました。 ブックマークレットで勝手に感想一覧表示機能を拡張 以下のブックマークレットによって他人のブログでも感想を読み放題にできる機能を勝手に動かせます。本体のソースコードは『bulldra.github.io/trackbackbm.js at master · bulldra/bulldra.github.io · GitHub』にあります。一応ちゃんと動いているっぽいけど、結構無茶してる。
はてなブログでGoogleにパンくずリストを認識させるブログパーツ - 太陽がまぶしかったから
photo by keso こちらのカスタマイズは使用しないでください data-vocabulary.org のサポートが終了されるため、こちらのカスタマイズは利用できません。はてなブログ公式の機能を利用したり、リンク先で紹介されている方法への差し替えをお願いします。 Googleにパンくずリストを認識させるプラグイン 最近のGoogle検索ではブログ内のカテゴリを認識して、検索結果がサイト上のどこに位置付けられているかを表示するようになっているのですが、breadcrumbタグを利用したマークアップをしていないとGoogleから認識してもらえません。 このためJavaScriptでパンくずリストを生成してGoogleにカテゴリを認識させるスクリプトを開発しました。現在のGoogleではJavaScriptの実行時に生成されたリンクやマークアップを解釈しています。『Google Sear
はてなブログにグローバルナビゲーションを設置しました - へっぽこ主婦カメラマンの日常
2014-10-18 はてなブログにグローバルナビゲーションを設置しました はてなブログ どうも。cssは少しわかる程度のこりのろっさです。 昨日一日かけてスマホ用とPC用にグローバルナビゲーションを設置しました。 グローバルナビゲーションって何？ サイト内の各コンテンツへ案内するメニューのことです。 このようなメニューがあれば、初めてアクセスしてきた方にこのブログの概要を知っていただけますし、私のブログのように色々な内容を載せている場合でも、アクセスしてきた人にスムーズに興味のあるページへたどりついてもらえます。 以前にも増して書く記事の内容がバラバラになってきたので、早めにメニューを設置したかったんですが…時間が…時間が… 設置するのに参考にさせていただいたサイト 私は少ーしcssがわかる程度ですので設置するのにはすっごく苦労しました。主に助けていただいたのは以下のサイトです。 スマ
【はてなブログ】記事中に挿入した画像の拡大機能を一括で解除する方法 - NO LIMIT
おはようございます@chihayuu_です。 今日は久しぶり？にブログカスタマイズ記事です。カスタマイズって言っていいのか不安になる内容ですが。さっそく書いていきます。 行ったカスタマイズは、タイトルにも書いた通り、画像の拡大機能を解除しました。やみくもに解除したのではなく、ちゃんと理由があります。 画像の上にマウスを持っていくと、カーソルが指マークになりますよね？ これだと、画像にリンクがあると誤解されてしまうかもしれません。クリックしても出てくるのは拡大された画像だけです。あれ？これって、見てる側からしたら紛らわしいだけじゃない？と思い拡大機能を解除しました。 解除の仕方は至って簡単！！このコードを追加するだけです。 .hatena-fotolife{ pointer-events: none; }試しにクリックしてみてください。 このコードを追加することで拡張機能は解除されます。これ
はてなブログのタイトルタグの重複に関する重要な問題 - 非天マザー by B-CHAN
ウェブマスターツールでのタイトルタグの警告 みなさん、こんにちは！ B-CHANです。 はてなブログのアクセス数に関わってきそうな内容を書きます。 もし良かったら読んでみてください。 先日、Googleウェブマスターツールでのタイトルタグの重複について、こんな記事を書きました。 Googleがタイトルタグの重複と見なす具体例 - 非天マザー by B-CHAN 複数の異なるページで、似たようなタイトルを付けると重複とみなされるんだな〜という内容です。 しかし、その後の研究で、ボクは重大かつ大きな勘違いをしていることに気付きました。 まず、次の図を見てください。これは、この非天マザーに関する、Googleウェブマスターツールの「重複するタイトルタグ」の状態です。 2つの赤枠で囲んだ部分、どちらでもいいんですが、例えば下の赤枠。 「iPhone史上最高の…」がタイトルタグの内容です。 そして、
書くことなし日記：動く☆編 - 何かのヒント
はてなスターのことを書いたら妙に反応があったので、以前少しだけ考えた、はてなスターに関するアイディアのことを思い出した。 今回はそれを書いてみよう。 以前どこかで「はてなスターの譲渡」という言葉を見かけたのだが、どうもこれは「特定の誰かに、自分が購入したスターを贈る」というシステムのことらしい。 しかし、私は誰かから特別高価な青い☆や赤い☆を百個や千個プレゼントされても、使う当てがないのでさほど嬉しくない（気前よくばらまいても悪い意味で目立つだけなので、使いたくない）。毎回このブログを気にかけてくれている人や、時々でも☆をつけてくれる人の☆は、タダでも心がこもっていると思うからこそ嬉しいのである。 いずれにせよ今の☆は、カラーであれ無料のものであれ、 「つける側→つけられる側」 へと一つだけ矢印を描くとそこで寿命が終わりになってしまう。 この儚いといえば儚い、片道通行どまりの☆以外に、もっ
はてなブログのカテゴリをGoogleに認識させるやつ - すなばいじり
確かに構造化されてないですねぇ。 という事で、個人的には簡易的なもので良いかな？と感じたので数行書き足すことで済むやつを書いた。 使い方 psn.hatenablog.jp こちらへどうぞ。 構造化データ テスト ツールではこのような認識をするようです。 (このツールではスクリプトを読まないので、生成済みのHTMLコードにてテストを行った結果です。) テストでは、カテゴリを付けた順番に表示されます。 ソースコード hatenablog-modules/breadcrumb.js at gh-pages · niyari/hatenablog-modules · GitHub わりと適当に書いたので色々と回りくどい。 TODO: 外部コードから読み込まれているスクリプトの場合 の確認。 埋め込み時の挙動が考えた通りに動いているので効率を上げる。 あいつ…糞コード書いてない？ どうする兄ちゃん
はてなブログでパンくずリストを認識させたよ - 太陽がまぶしかったから
修正版のご連絡 以下に紹介しているスクリプトは古いので、上記をご覧ください。 はてなブログのカテゴリ構造をGoogleに認識させる シブヤタクトさんの『カテゴリー構造の最適化とバックリンクのチェックでPVアップを目指しましょう | 日常ぴよぴよ』を読んで、「うちのブログもカテゴリ分けを意識しないといけないなー」とつぶやいていたのですが、はてなブログのカテゴリではパンくずリストのマークアップが実現されていない事を教えて頂きました。 せっかくカテゴリー構造を最適化しても、それをGoogleが確認できないんじゃーもったいないです。 必ずパンくずリストを設定し、マイクロデータ形式でマークアップしてあげましょう。 Wordpressで言うと、SEOに強いと謳っているテーマのStinger3やGush、principleはマークアップがデフォルトで実装されております。 カテゴリー構造の最適化とバックリ
はてなブログのスマホ表示にグローバルナビゲーションを設置する - AIUEO Lab2
はてなブログにはPC表示用にもスマホ表示用にも、グローバルナビゲーションが純正では用意されていません。 スマホにもグローバルナビを設置したいなーという人は多いのでしょうか？昨日、吉本ユータヌキさんからこんなツイートをもらいました。 @aiueolab ひ！非常に嬉しいです！！全然関係ないんですが、スマホ用ヘッダーのカテゴリーボタンの配置方法記事お願いします！！あれすごく良いです！！！— 吉本ユータヌキ (@gonnakill_uta) 2014, 9月 18 私は恥ずかしながら、かなりテキトーにカテゴリを並べていただけですが、ユータヌキさんからリクエストをいただいたので、書いてみることにしました。 はてなブログはスマホでもヘッダーにJavaScript書けるんでしたっけ？調べるのちょっと面倒だったので、今回は使わずに設置してみます。 用例画像は、吉本ユータヌキさんのブログ「タヌキ部屋」より
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
