前回の記事で、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 アプリー

ブログとWebサービスの間のようなものを作るために、WordPressを使ってWeb開発を行っています。 その際に参考になった本当サイトを紹介したいと思います！対象はHTMLとCSSが分かる程度の人間です。 ローカル環境をつくる WordPressの理解 【記事】はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました 基礎からのWordPress PHPとMySQLの理解 【本】よく分かるPHPの教科書 さらに本を読んでWordPressについて理解を深める WordPressプラグイン開発のバイブル WordPressによるWebアプリケーション開発 まとめ ローカル環境をつくる WordPressはサーバーとドメインが必要になりますが、レンタルサーバーを使うなどすることで費用がかかっていまします。 そこでローカルにWordPressの環境をつくるため、M

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

10/7追記１：「はてブ順」を含めた、５つボタンバージョンを追加しました。 11/16追記２：カテゴリの部分を二列にするやり方を追加しました。 最近、はてなブログは人気記事モジュールのみならば、記事上でもどこでも差し込めることを知りました。 こっ、これは！と思い、以前作ったトグルメニューと組み合わせると、スマホの回遊率が高められる(かもしれない)メニューバーというものを作ることができたので、紹介したいと思います。(レスポンシブ設定の方は、できません) 実装図 実際のカスタマイズ ４つのボタンの場合 １　HOMEボタンにURLを入れる ２　カテゴリにURLと言葉を入れる ５つのボタンの場合 １　HOMEボタンにURLを入れる ２　カテゴリにURLと言葉を入れる その他のカスタマイズ 色を変えたい 人気記事の表示する個数を変えたい はてブ数を表示したい・したくない カテゴリの部分を二列にしたい

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

注：この記事は、元記事の補完的な役割をしています。 元記事：「【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life」「はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2) - Yukihy Life」 昨年の11月に、Twitterがシェア数の表示がなくなりました。 www.yukihy.com 正直Twitterのシェア数は、その記事の人気度を測るものとして役立っていたため、めちゃくちゃ痛かったのですが、実はそれに関する代替案はいろいろ出ていました。 遅れながらもやっとこさ手をつけ、今ではシェア数の表示がほとんど戻ってきたのではないかと思います。 そこで、はてなブログで、さらに当ブログのボタンを使用している方に、シェア数を表示させる方法を書いていき

コピペコードをうつす前に、必ず以前のコードをメモ帳にバックアップしておくなどの対策をしておくようにしてください。 シェアボタンを設置する上で、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします(一応)。 2015/11/21追記：11/20より、ツイッターのシェア数の取得ができなくなりました。(参考：持続的なプラットフォームのための難しい決断)これにより、ツイッターのシェア数の部分を「Twitter」と表示するように変更しました。 2016/1/11追記２：当ブログのシェアボタンを使っているかたのみ、Twitterのシェア数を表示させるようにする記事を書きました。詳しくは「count.jsoonを使って当ブログのシェアボタンを使っている方のTwitterカウント数を取得する方法 - Yukihy Life」をごらんください。 2016/5/18追記３：Faceboo