久しぶりにブログデザインのリニューアルをしてみました！以前書いたブログリニューアル記事 www.yukihy.com なんだかんだ後から自分で見返すことが多かったので、自分用メモもかねて書いてみたいと思います。 完成図 リニューアルポイント レイアウト 全体の色 左上のアイコン ヘッダー部分に検索を追加 アマゾンリンクは強引にボタンをつくりました 大見出しをスクロールで固定に（IEはおそらく非対応） タブレット・スマホはスライドメニューに 一言 完成図 今回大きく変更したのはPCサイズです。 はてなブログではほとんど見ることのない、3カラムのデザインです。（PCでも低解像度の場合、2カラムになっているかもしれません） 記事の内容に集中しやすい1カラムのブログが増える中、あえて3カラムにしてみました。 リニューアルポイント レイアウト はてなブログのもともとのHTMLは、3カラムにつくるよう

昨日、Googleデータスタジオのレポート作成数の上限が撤廃され、6個以上でも作成できるようになりました。 参考リンク：Google マーケティング プラットフォーム 日本版 公式ブログ: Google データスタジオを皆様に無料でご提供を開始 この記事を読んだとき「Googleデータスタジオって何？」と思ったのですが、調べてみるとめちゃくちゃ便利なことに気づきました。 Web担当者はこれを駆使すれば、日々の業務の殆ど減らせるんじゃないか？ということで、いろいろいじって使ってみました。 Googleデータスタジオとは？ 接続できるデータ サンプル 作成するデータ データソースを作成する レポートを作成する まとめ Googleデータスタジオとは？ そもそもGoogleデータスタジオとは何なのかというと、Googleのツールで集められる様々なデータを、一箇所のレポートにまとめて表示することが

iMacを買ってから、椅子に座ってパソコンとにらめっこしている時間が増えてきました。そうするとどうしても腰が痛い・・・。 まだ年齢的には若いのに今からこんなん嫌だな(´Д` )と思っていたので、MTGボディメイクシートスタイルという商品を購入してみたのでレビュー！ MTGボディメイクシートスタイル商品レビュー 購入したものはこちらです。 [asin:B00LNZ7EBE:detail] アマゾンを見る限り、色はレッドとブラウンがあるみたいです。 値段は9000円弱と若干高めですが、友人の家で見つけて座って一目惚れ。長く使うものだし良いかなーと思って購入しました！ ということで到着！ 袋を開けて椅子にセットするとこんな感じになります。 椅子にセットせずに直接座椅子のような使い方もできますが、形的にやっぱり椅子にセットして使うのが良いと思います。 普段から椅子に浅く座れる体力がある人は良いと思

前回の記事で、jQueryを本で調べたりしながらWordPressのように目次を隠したり表示したりするようにしました。 それを記事内の好きな場所にできたらなあと思っていじってみたので、紹介です。 実装図 実際にやるとこんな感じになります。下のボタンを押してみてください。 以下の部分を表示する こんな感じで、自分があらかじめ隠したい場所を設定することができます。 長い文章になってしまうとき、特に重要はないかなあといったところを隠したりするのに使えるのではないかなと思います。グロい内容を書いたりするときとかも面白いかも。 一旦コード１と２を設定してしまえば、好きな部分に手軽に何度も入れられるのが特徴です。 やりかた 実際のやり方です。 コード１ コードの一つ目はこんな感じです。 <script> //クリックすると表示されるボタン $(function(){ $(".show-button")

はてなブログの新しいテーマを作りました！ついに完成です！ テーマの概要 全体のデザイン PC（768pxより大きいサイズ） タブレット（768px以下のサイズ） スマホ（680px以下のサイズ） 作成コンセプト デザイン詳細 背景色・背景画像 例 コードが必要なカスタム ヘッダーのメニュー フッターをつくりこむ コピーライトを表示 まとめ テーマの概要 全体のデザイン レスポンシブ対応のテーマ「Naked」を作成しました。 全体のデザインはこのようになっています。 デモブログはこちら theme-naked.hatenablog.jp こちらでは、ブログ全体のデザインが見れるだけでなく、今後のカスタマイズ情報も更新していきます。興味のある方は、ぜひこちらも購読をお願いします。 インストールは、テーマストアからどうぞ（注：インストールをすると、デザインCSSの内容が破棄されます。必ずバックア

アプリを紹介するサービス「アプリーチ」 ブロガーであるまなしばさんのご主人が作成したアプリを紹介するサービス「アプリーチ」。 アプリーチ | iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。 上の方の検索窓にアプリの名前を入れることで、綺麗なリンクを、しかもiPhoneとアンドロイド両方つくることができます。とっても便利なので僕も使わせていただいています。ありあとうございます！ アプリーチをCSSでデザインを変更！ 実装図 そんなアプリーチを、ほんの若干ですがCSSを書いて若干デザインを変更してみました。 イメージとしてはこんな感じです。 ほんの若干ですが統一感を出せるようにしました。今後変わるかもしれませんが実際にはこんな感じ。 Pinterest（ピンタレスト） 開発元:Pinterest, Inc. 無料 posted with アプリー

はてなブログだけでなく、アマゾンや楽天・ヤフーショッピングの商品を紹介する際にはブロガーのかん吉さんが作ってくださったサービス「ヨメレバ・カエレバ」を使うことで 簡単にリンクを作成することができます。 それらを綺麗に表示させるカスタマイズはもう出ているのですが、先日あるブロガーさんに会ったときにカスタマイズをしたら喜んでいただけたので、紹介したいと思います！ 参考リンク 実装図 カスタマイズの注意点 カスタマイズ PC スマホ レスポンシブ その他のカスタマイズ 最後に 参考リンク 今回のカスタマイズはほとんど今までやってこられていた方をちょっと変更したような形になっているため、あらかじめ参考リンクを貼っておきます。ありがとうございます！ shufulife.com 実装図 実際に導入した様子はこんな感じになります。 PC スマホ PCでバランスよく表示させたのと、スマホではなるべくコンパ

以前、メニューバーをトグルメニューと両立してレスポンシブスタイルにするカスタムを書きました。 www.yukihy.com トグルメニューは、ボタンを押すと上下にスライドするようなものでしたが、　現在このブログでやっているみたいに、横からのスライドにして、なおかつPC版では子メニューも設定できるようにしてみたいと思います！ カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。 実装図 注意点 カスタマイズ CSS HTML&jQuery HTMLにリンクを入れる その他のカスタマイズ 色を変える グローバルメニューの横幅を変えたい グローバルメニューとトグルメニューの変えるタイミングを変えたい まとめ 実装図 完成図はこんな感じです。ブラウザのサイズが広いときには、子メニューまで出せれる一般的なグローバルメニューで、 ブラウザサイズが狭くなると

ちょっと内容が飛びましたが、Evernote連載の３つ目です。僕がブログ執筆をEvernoteで行っている理由と、その方法を書いていきたいと思います。 連載目次 Evernote整理術&活用法 整理しやすい環境づくりでマメじゃなくてもでもできる活用方法 - Yukihy Life Evernoteでタグを使ったおすすめの整理術&活用法 - Yukihy Life Evernoteでブログを書く利点とEvernoteを使ったブログの書き方（今ここ！） Evernote小技集・他とのサービス連携などちょっとした工夫で圧倒的に使いやすくする - Yukihy Life Evernoteでブログ執筆をする理由 はてなブログのエディターはオンラインでしかできない はてなブログはEvernote連携ができる Evernoteコンテキスト機能で、記事を深められる Evernoteを使ってのブログ執筆の仕

今日はクリスマスですね！まあそれは置いといて、どうしようか迷っていたのですが、今後もしばらく続けることを考えてFacebookのページをつくってみました！ 本当はもっと前から作ってみたかったのですが、ブログとリアルな世界を繋げたくなかったので、実名でしか使えないフェイスブックは諦めていたんですよね。本名以外でフェイスブックのアカウントをつくるのはアウトですし。 Facebookのページ機能 Facebookページの作り方 ページをブログに埋め込む 自分の投稿をシェアする まとめ Facebookのページ機能 そう思っていたら、フェイスブックには昔から「ページ」機能というものがあることを知って、どうやらこの機能を使えば、アカウントは自分のままで自分のアカウントと繋げないものんを作れるみたいです。 個人アカウントとは繋げずに、こういったページをつくることが可能。記念すべき0いいね！ もともとこ

本日２記事目！ いろんなところで回っているハイパーリンクチャレンジ。 うおー、なんか面白そうなイベントだ！だけど自分には無縁だよなといった感じで見ていたら、最近稼ぎまくっているワロリンスさんからバトンがっ！ http://www.warorince.com/entry/blog-thank-you-for-everythingwww.warorince.com ワロリンスさん、ありがとうございます！！っということで、書いてみたいと思います！ ハイパーリンクチャレンジとは？ もういろんなところで回っているのでご存知の方もいると思いますが、ハイパーリンクチャレンジというのは、鳥井さん（隠居系男子）が考案したものです。 その年（前年12月〜本年11月）までに公開されたウェブコンテンツから印象に残った記事を2本だけピックアップする。1本は自らが執筆・制作に関わった記事、もう1本は他媒体で公開された

最近、カスタマイズばかりしているゆきひーです。見よう見まねで一通りやっています。デザインとかかなり難しそうだなと思っていたのですが、最初の数個を理解すると意外と応用範囲が広いことに驚いています。 僕がブログを始めたときに困ったのが、見出しをカスタマイズしたいのに全くできないというものでした。「見出し　おしゃれ」とかって検索すると本当に豪華なオシャレなのが出てくるんですよね…。ちょっと線入れたいだけなのに！みたいな。 なので、非常に簡単なものばかりですが、ある意味無機質な見出しコードを10個下に書いていきます。無機質なのでかぶってもOKっす。 基本的にコピペでOKなので活用してみてください！ コードを貼る場所 PC スマホ どの見出しを変える？ 下線 点線下線 上下線 よくあるや〜つ 左だけと背景 四角 角を丸める 影 ぼやかし LIGっぽいかんじ もう少しカスタマイズ 色 文字のサイズ 文

今年の春にMacを買ってから、一番使ってきたアプリがEvernoteです。 ただEvernoteって高機能すぎるんですよね。高機能すぎて、結局は整理できないみたいなことが起こりがちで、実際僕もノートを一回削除したりしました。 Evernote整理術のようなものもググってみましたが、めちゃくちゃマメさが必要じゃないですか‥。 そこで、まめでもない僕でもEvernoteをどんなふうに使っているのかを、連載てきな感じで数回に分けて書いてみたいと思います。 連載の内容は Evernoteを整理して管理できる仕組み作り（今回はここ！） Evernoteでタグを使ったおすすめの整理術&活用法 - Yukihy Life Evernoteでブログを書く利点とEvernoteを使ったブログの書き方 - Yukihy Life Evernote小技集・他とのサービス連携などちょっとした工夫で圧倒的に使いやす

6/22追記：コピペコードを１つにしました。前回のようにheaderにjQueryを読ませるより、若干スピードが速くなります。またデザイン面でもバランスが悪かったので少しコードを変更しました。その他のカスタマイズも充実させました。 8/7追記：ボタンの反応するところが横幅いっぱいになっていたので、文字の部分のみに修正しました。具体的には24行目を「block」→「inline-block」にしただけなので、今までのから変えたい方はそこのみ変えてください。また、その他のカスタマイズに「ボタンを目立たせる」と「２分割にする」を追加しました。 12/07追記：この記事に書かれているコードだと、「タイトル下」に広告を貼ったときに背景に色がついてしまします。気になる方は、（【改良版】コピペ一発はてなブログにトグルメニューをつけるカスタムを広告の背景に色がつかないようにしました！ - Yukihy L

12/07：その他のカスタマイズを充実させました。 以前、グローバルメニューとトグルメニューを両立してレスポンシブスタイルにするメニューバーを作りました。 以前の記事 www.yukihy.com このメニューバー、CSSを勉強したてに作ったものなので、若干の不満な点などが残ったりしていました。例えば「タイトル下」の部分に広告を入れるとトグルメニューのときにデザインが崩れたりすることです。 また、メニューバーにドロップダウンメニューにできないかとのご質問もいただいたので、合わせて修正版のやり方を記事にしたいと思います。 はてなブログ向けですが、全く同じコードで他のブログサービスでも使えるのではないかと思います。 カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。 実装図 注意点 カスタマイズ CSS HTML&jQuery HTMLの中にリン

シェア数付き自作シェアボタンを配布していたのですが、それらのTwitterでのツイート数を取得するサービスが昨日(11/20)で終了してしまったので、その原因と対処法を書きたいと思います。 症状 直し方 HTMLを直す Before Before After jQuery Before After 原因 まとめ 症状 このブログで配布していて、結構多くの方に使っていただいているシェアボタン www.yukihy.com www.yukihy.com ですが、ツイート数が取得できなくなってしまいました‥。 ただ取得できないだけでなく、このシェアボタンは表示されるまでぐるぐる回るようになっているので、あたかも表示されるかのように思わせてしまいます^^;。 純粋にサイトが重いと思われてしまうので、お手数ですが対応をお願いします。 ちなみにこのボタンのみでの現象ではなく、デフォルトのシェアボタンも

2015/11/11追記１：うまく取得できているかの判断が曖昧だったので、確認方法を追記しました。設置をする際は、うまく取得できているかの確認をお願いします。またCSSをテーマによる崩れを防ぐために若干変更しました。 2015/12/06追記２：数日前に、このプログラムで使用しているGoogle Feed APIのサービスが終了してしまいました。なので表示が安定しない状況です。ただいま代替案を模索中です。お手数おかけしますm(_ _)m2016/3/20追記３：GoogleFeedAPIが復活？しているみたいできちんと表示されるようになりました！ 前回書いた、はてなブログで記事と同じカテゴリを新着順に並べて関連記事っぽくするカスタマイズの続きで、同じカテゴリをランダムに出すのができたので書きたいと思います。 先に言っておきますが、Javascriptを勉強したての者が作っていますので、いろ

12/06追記２：数日前に、このプログラムで使用しているGoogle Feed APIのサービスが終了してしまいました。なので表示が安定しない状況です。ただいま代替案を模索中です。お手数おかけしますm(_ _)m はてなブログは標準で記事下に関連記事が出てこなく、何とかできないかなと考えていました。 ものすごくざっくりとしたものですが作ってみたので、ここまでのを一旦公開したいと思います。 完成図と仕様 コード 手順１ Javascript 手順２　HTML 手順３　CSS 手順４　調整 構造を簡単に まとめ 参考記事 完成図と仕様 完成図は現在記事下にやっているように、こんな感じで表示されます。 PCではこんな感じ スマホでは、こんなふうに一列になってレスポンシブ対応をしています。 肝心の表示されているものですが、仕組み的には現在開いている記事の１つ目のカテゴリと同じ記事を、新着順に並べ替