つっちーさんのブログ「非アクティビズム。」のレビュー商品一覧ページを作らせてもらいました！ - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 自分のブログより人のブログのソースコードを覗く方が楽しいというちょっとアレな性格の持ち主である私ですが、先日、とある人気ブログのカスタマイズのお手伝いをさせていただきました。 そちらの記事でもご紹介いただきましたが、私も作り手としてちょっと書き残して置きたいことがありまして。技術的にこだわったところや今後の展望なんかを簡単にご紹介です。よければお付き合いください。 面白いことへの探求メディア レビューの一覧を 私的なこだわり レスポンシブ対応 タブ切り替えと配色 コンテンツの半自動生成 今後の展望 さいごに 面白いことへの探求メディア www.in-activism.com ご存知の方も多いと思います。つっちーさんが運営されている「非アクティビズム。」（。ついてるの知らなかったです、某アイドルグループかな？） ガジェットのレビューをメイン
目指せ最速！はてなブログで表示を高速化するために行った7つの施策 - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 ちょっと前に私のブログのデザインを変更したのですが、どうもトップページの表示が遅い（気がする）。右半分ははてなブログの仕様上ちらついちゃうのは仕方ないと許容していましたが、なんか全体的に遅い（気がする）。というわけで、本日のテーマはタイトル通り高速化になります。地味な内容ではございますが、よろしくお付き合いください。 早いは正義？ 大袈裟に言いましたが… 画像の圧縮 不要な外部リソースの排除 不要なカスタマイズの排除 カスタマイズコードの位置を調整 ライブラリの遅延読み込み jQueryコードの排除 DNSプリフェッチの導入 一連の施策を終えて 具体的なコードも1つご紹介 今後の展望と課題を CSSのインライン化 はてなスターどうしよう 広告も遅い部類 さいごに 早いは正義？ だと個人的には考えています。SEOとか専門的なことは知りません
はてなブログのトップページ一覧表示機能を利用してカード型っぽいレイアウトにするカスタマイズ - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 若干出遅れましたが、タイトル通り、私もカスタマイズコードをご用意しました。まだちょっと課題があるんですけど、水物といいますか、旬を逃したくないので見切り発車でご紹介します。 ごめん、バグってた 詳細は公式ブログを 現時点での出来栄え ソースコードはこちら JavaScript CSS 把握している課題 さいごに ごめん、バグってた www.tsubasa-note.blog ごめんなさい記事書きました。上記ページのコードをご利用いただけますようお願いします。 詳細は公式ブログを staff.hatenablog.com どうぞ。特に説明は必要ないと思いますので割愛。/archiveに飛ばす必要がなくなりましたね、やったぜ。 現時点での出来栄え キャプチャでドン。 うん、カード。 www.foxism.jp 本日、先に記事を公開されたore
コピペでどうぞ。はてなブログのカテゴリー別記事一覧におすすめ記事のリストを表示するカスタマイズ - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 本日、はてなブログの新機能としてカテゴリー別記事一覧に説明文を設定できる機能が実装されたみたいです。HTMLが入力できるらしいのでここは1つカスタマイズ記事でも書いてみようかと思い筆をとりました。記事のリスト表示とかベタかもしれませんが、お時間がある方はお付き合いください。 詳細は公式ブログを レッツカスタマイズ HTMLとCSSの追加 HTMLコードの例 CSSコード HTMLの準備がめんどくさい さいごに 詳細は公式ブログを staff.hatenablog.com どうぞ。ざっくり説明すると、 タイトルを表示できるようにしたよ 説明文を表示できるようにしたよ ってことだと思います。 レッツカスタマイズ 何を表示しようか考えたんですが、各カテゴリの中でおススメ記事を表示させるのが無難かな、と思ったのでサムネ付きの一覧表示エリアを作って
ZENO-TEALでシェアボタンがずれちゃっている方、よければお試しください - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 タイトル通りですが、今日はちょっとおせっかいなカスタマイズネタ、対象となる方は「ZENO-TEAL」というテーマを使われていて、さらに特定のシェアボタンカスタマイズをご利用中の方になります。お心当たりのある方がいらっしゃいましたら少しお付き合いください。 一応お断りしておきますが シェアボタン、ずれちゃっているような CSS追記してみてください おまけ さいごに 一応お断りしておきますが テーマやシェアボタンのカスタマイズに文句を言う気はサラサラございません。ただ、色々なカスタマイズを組み合わせたことでなんかずれちゃっている人がいて、自力で直せずに困っている人がいるのかもしれない、と思ってこの記事を書いています。やらない善よりやる偽善ってことです。 問題の原因を突き止めようかとも思いましたが、別にちゃんと表示されるようになればそれでいいん
はてなブログのトップページに表示されるアイキャッチ画像にリンクを設定したい - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 今日はささいなカスタマイズですが、結構気になっていた部分を修正しました。同じ条件に当てはまる方、もしよろしければ参考にしてみてください。 トップページの運用パターン アイキャッチの画像、クリックしたくなりません？ リンクつけてあげれば解消できるよね さいごに トップページの運用パターン はてなブログにおいてトップページの管理というか、運用方法って何パターンかあると思います。 記事を途中で区切って（続きを読む）複数件表示 記事を途中で区切らずに全文表示（1件だけ） 記事を途中で区切らずに全文表示（複数件表示） 一覧ページ（/archiveページ）へリダイレクト こんな感じでしょうか。もっと細かいバリエーションがあるかもですが、大体の人はこの中のどれかの方式でトップページを管理していると思います。私のブログは1つ目の続きを読むを使ったパターン
Re：ブログ記事の画像を圧縮して差し替える作業を外注したい - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 今日は雑記、というかちょっとした自慢？記事になります。はてなブログネタ、プログラム要素高め、そしてコードは載せない、なので最後まで読んでもあまり得るものがない記事かもしれません。それでも良い方はよろしくお付き合いください。 タイトル通りなんですけど、記事の画像を圧縮して差し替える作業を外注したい、というツイートをお見かけしまして。これ、私が受注してシステム化して自動でできるようにしたら大儲けじゃね？ってのが事の発端です。 そもそも圧縮してます？ なぜ圧縮するのか でもめんどくさいよね はてな運営はAPIを用意してくれている （たぶん）できた！ さて、ほんとに効果はあるのかな 公開したいけどできないジレンマ 把握している問題や課題 技術的な補足も少しだけ さいごに そもそも圧縮してます？ 皆さん、ブログに画像を掲載する時にちゃんと圧縮したも
「GIRLY DROP」ってフリーの写真素材サイトがオシャレで見ているだけで楽しいです - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 結構有名？なフリーの写真素材サイト、「GIRLY DROP」さんのご紹介です。割とWEBにどっぷりな私ですが、こちらのサービスは今まで使ったことなかったなーと。ちょっとオシャレすぎて私の手に負えないものもあったりなかったり。 最近、はてなブログ界隈では美少女ブロガーが流行っているみたいなので、美少女な方にはピッタリなサービスだと思います。美少女ブロガーといえばやっぱり月無ことのはさんなのかな？よろしければ使ってみてください。 GIRLY DROPとは？ 使いかたで困ることはないかと 特に不満はございませんが ガーリーってなによ？ そのほかにも さいごに GIRLY DROPとは？ こちら！ girlydrop.com サイトからの引用です。 クレジット不要・商用利用可能なフリー写真素材サイトです。 おしゃれでガーリーな写真を配布しています
無料で使えるWordPressテーマ 「yStandard」がカスタマイズフレンドリーでいい感じ - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 最近流行っているっぽいので、ちょろっとWordPress界隈の情報収集をしていたら新しいテーマを見つけたのでご紹介です。まだ公開されたばかりのようで、あまりメジャーじゃないかもしれませんが、個人的にはかなりグッときたテーマです。 というか、WordPressのテーマって無料でも高機能なテーマがあるものなんですね、シラナカッタヨ。 テーマの作者はよっひー(@yosiakatsuki)さん 速いは正義 基本的な機能はそろっているみたい 「自分だけのサイトを作る楽しさ」なにそれ、楽しそう 設定も簡単そう ウィジェットはサイドバーとフッターに対応 おまけ さいごに テーマの作者はよっひー(@yosiakatsuki)さん tarahako.com こちらの記事でお見かけしました。「yStandard」というテーマを作られた方で、よっひーさんのブロ
カエレバ・ヨメレバCSSジェネレーター - つばさのーと
【対象端末】 PC スマホ レスポンシブ 【枠線】 色 種類 太さ ブレイクポイント px 【商品名】 色 文字サイズ 【詳細】 色 文字サイズ 【ボタンの種類】 【ボタンの装飾】 角を丸める テキストに影をつける ボタンに影をつける [▼ボタンの色を変更する] 色を変更した後でボタンの種類を切り替えると変更がリセットされます。 【Amazon】 枠線 文字 背景 【楽天市場・楽天ブックス】 枠線 文字 背景 【Yahoo!】 枠線 文字 背景 【7net】 枠線 文字 背景 【ベルメゾン】 枠線 文字 背景 【セシール】 枠線 文字 背景 【価格.com】 枠線 文字 背景 【Kindle】 枠線
カエレバ・ヨメレバのデザインCSSジェネレーターを作りました - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 www.tsubasa-note.blog 年明けから暇な時間を利用してちょっと遊び心のあるページを作成しました。とりあえず完成としましたが、もうちょっとだけ機能にこだわりたいなと思っています。カエレバ・ヨメレバを利用している方、もしよければ遊んでいってください。 まず最初におことわりが カスタマイズCSSをカスタマイズしよう！ 使い方 なぜこのサービスを作ったのか 懸念している問題 今後の展望 さいごに まず最初におことわりが 本記事投稿時点で、IEでは意図したとおりに動かないことを確認しています。推奨環境はGoogle Chromeの最新版となっております。遊んでいただける方はChromeで閲覧していただけますようお願いします。Fire Foxも多分大丈夫だと思います。Operaは確認していません。 本サービスはPCブラウザから閲覧さ
Re：何故、はてなブログのカスタマイズが楽しいのか - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 nasust.hatenablog.com 先日のナスさんの記事に便乗した記事です。私もカスタマイズ好きとして少し思うところがあったのでまとめてみたいと思います。 なぜカスタマイズするのか Re：自己満足なカスタマイズ Re：読者のためのカスタマイズ 承認欲求を満たすためのカスタマイズ スキルアップのためのカスタマイズ コミュニケーションのためのカスタマイズ さいごに なぜカスタマイズするのか 過去記事でも何度か申し上げてきましたが、はてなブログってデフォルトのデザインでも十分キレイだし、先人の方々が機能豊富なテーマもたくさん提供してくれています。見出しとか好みに合わせるくらいはありかもですが、ブログで記事を書きたいだけなら今更独自のカスタマイズなんてする必要はないと思います。 それでもナスさんや私はカスタマイズに勤しんでいます。なぜか、
ページのトップへ戻るボタン、少し見直してみませんか？ - つばさのーと
こんにちは、つばさ（@_tsubasa123_）です。 先日、いわゆる「ページのトップへ戻る」ボタンをオリジナルで作成したのですが、その時に個人的に気になったところをメモしておきます。 basanote.hatenablog.com ちょっとプログラムよりの意識高い系な内容です。プログラムとか興味ないし、って方にはおもしろくない記事だと思います、ごめんなさい。 JavaScriptでスクロールしている スクロールをチェックするのがキライ そうだ、タイマーにしよう これ意味あるの？ さいごに JavaScriptでスクロールしている 「ページのトップに戻るボタン」については特に説明はいらないと思いますので省略。あると便利ですよね。 当ブログに設置するにあたっていくつか参考になる記事を拝見したのですが、どこも同じようなJavaScriptコードを記述していました。やはり皆さん使い回したりされて
特定のタグ（カテゴリ）のときだけ何かを表示したり隠したりするカスタマイズ - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 どうやってご本人にお伝えしたらいいかわからなかったので記事化しました。ヒトデさん、お時間がありましたら試してみてください。 CSSだけでOK JavaScriptでももちろんできる さいごに CSSだけでOK そんな意識してないつもりだったけど、やっぱ無意識化でブレーキはかかってたんだなーって思いました とはいえこれはブクマ含めて拡散してほしいなーって記事も出て来たから難しいところ 誰か「ブクマ不要」のタグでブクマボタン隠せるようなの作ってお願い— ☆←ヒトデ@はてなブログ (@hitodeblog) 2016年12月29日 元ネタはこれ。「タグ」って書かれてるけどきっと「カテゴリ」のことだよね。 body.category-ブクマ不要 #shareButton .hatena-bookmark-button { display: non
コピペでどうぞ。CSSでカエレバ・ヨメレバのデザインカスタマイズ2案目 - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 そろそろ本格的にカエレバの導入を検討している私ですが、カエレバの導入よりもカエレバ用のCSSカスタマイズに夢中です。 先日、暇だったのでCSSの勉強も兼ねていくつか案を作ってみました。というわけで、今日は2案目、明日は3案目、明後日は4案目をご紹介していきたいと思います。まだはやいですが、メリークリスマスです。 今回もPC、スマホ、レスポンシブと3つコードを用意しております。お気に召した方がいらっしゃいましたら是非一度お試しください。 対応状況と取得コード PC版 スマホ版 レスポンシブ版 さいごに 関連記事 対応状況と取得コード 前回と条件は同じです。取得コードは「amazlet風-2」を選択してください。 本記事投稿時点では「Amazon」「楽天市場」「Kindle」「楽天ブックス」の4つだけになります。需要がありましたら他のものも対
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
