タグ

ブックマーク / www.yukihy.com (12)

  • 「アプリーチ」をCSSでカスタマイズ iPhoneアプリとAndroidアプリを同時に紹介できるブログパーツ - Yukihy Life

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

    「アプリーチ」をCSSでカスタマイズ iPhoneアプリとAndroidアプリを同時に紹介できるブログパーツ - Yukihy Life
    zaq00555
    zaq00555 2017/03/01
    アプリーチの見た目を変えるカスタマイズ
  • はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2) - Yukihy Life

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

    zaq00555
    zaq00555 2017/03/01
    フラットなソーシャルボタンを表示するカスタマイズ
  • はてなブログデザインカスタマイズ | タイトル・画像のセンタリング・サイドバーや見出しなど - Yukihy Life

    ブログ書いているよりも、ブログカスタマイズをしている方が楽しいゆきひーです。 今までいろいろと小出しに記事にしていましたが、デザインCSSに書かれていることの中で、どのテーマでも共通で使える(かもしれない)ものをまとめて書きました。 他の記事で補完できる部分 【PC版】 フォント トップ画面でのフッターを消去 画像をセンタリングして線でくくる サイドバーのタイトルに青い下線を入れる タイトル付近の色を変える 見出しと記事タイトル リンク色の変更 「続きを読む」の文字を横に広くする 【PC1カラム版】 サイドバーのカスタムHTMLのモジュールを消去 下に回り込んだサイドバーを2分割に 【スマホ版】 全体的な文字を小さく 余白や文字の大きさの調整 2分割サイドバーを解除 まとめ 他の記事で補完できる部分 全て書いていくと長くなってしまうので、他の記事で補完できるところはそちらを見ていただければ

    はてなブログデザインカスタマイズ | タイトル・画像のセンタリング・サイドバーや見出しなど - Yukihy Life
    zaq00555
    zaq00555 2017/03/01
    トップページでの邪魔なフッターを消すカスタマイズ
  • 画像でなくcssで背景をつけてブログ記事を一気に読みやすくする方法 - Yukihy Life

    最近ブログを書くときに、背景色や枠で囲ったりすると一気に見やすくなるなあと思って使い始めています。 それどうやんねん?とのコメントをいただいたので、記事にしてみたいと思います(ネタ提供あざっす!)。 実例 どんな感じかと言うと、例えば下の図は昨日の記事 【お知らせ】当ブログで配布していたSNSボタンに関して重大なミスがありますので修正をお願いします - Yukihy Life なのですが、 ん〜、何か読みづらくないですか?? 普通に記事を書いていくと、改行するタイミングだったり、句読点の位置・太字ぐらいしかアクセントをつけることが無いと思います。 ましてや僕のブログ、誤字脱字がめちゃくちゃ多いんですよね。二ヶ月後ぐらいに「ぎゃーー!!」って気づくことも良くありげ。 そこで以下のように背景にちょっと色をつけてやると… このようにどこがURLでどこが説明なのかの判断が一瞬ででき、分かりやすいよ

    画像でなくcssで背景をつけてブログ記事を一気に読みやすくする方法 - Yukihy Life
    zaq00555
    zaq00555 2017/03/01
    文章を目立たせるためのカスタマイズ
  • はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life

    この間追加されたはてなブログの目次機能。どのモードでも、[:contents]と書き込むだけで目次がつくれるので、「凄い!」って思ったしとっても便利になりましたよね! 今まで目次を自動生成するコードもあったのですが、特定の説明記事やリスト記事にだけ入れたいなと思っていたので、半ば諦めていました( ;´Д`) それにちょっとコードを足すとグッと使いやすくなるので、いろいろとサンプルを紹介したいと思います。 はてなブログユーザー向けの記事になります。 CSSでできるはてなブログ目次のカスタム リスト表示を番号にする 見出しの一部を消す 小見出しを消す 中見出しも消す 「目次」という言葉を入れる 目次部分に背景色をつける 文字の大きさを、少しずつ小さくしている 段の横幅を調整 jQueryでできる目次カスタム スムーズスクロールにする 最初は隠しておいて、クリックしたら表示するようにする まとめ

    はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life
    zaq00555
    zaq00555 2017/02/22
    そのままだとデザインが崩れてしまうので、こちらを元にカスタマイズしました。
  • 【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life

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

    【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life
    zaq00555
    zaq00555 2015/09/16
    コピペだけで無事に変更完了(*´∀`*)
  • Font AwesomeでPocketアイコンが追加されたのでシェアボタンのアイコン変更の仕方 - Yukihy Life

    「Font Awesome」で使えるアイコンないかなあと思ってみたら、Pocketのアイコンが追加されているではないですか! ということで、今まで配布していたシェアボタンでPocketボタンをキチンとしたPocketのアイコンに変更してみました。お知らせです。 実装図 元記事 www.yukihy.com こちらの記事でシェアボタンをつくっていたのですが、Pocketに関してはアイコンがなかったので、下矢印でごまかしてました。笑 こちらが元のボタン。 でしたが、「font awesome」のキチンとしたアイコンを使うとこうなります。 ちゃんとしたのになりました。 変更の仕方 ちなみに元記事の方は全てのボタンでちゃんとしたPocketのボタンが反映されるようにしてありますので、これからの方は元記事の方のやり方で素直にやっていただくとできます。 ただ、今まで使っていただいていた方で変更したい方

    zaq00555
    zaq00555 2015/08/09
    pocketのアイコン、今まで違和感なかったので気づきませんでした(;´∀`) 時間があるときに変更します。
  • はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life

    注:コピペコードを写す前に、元々のhtmlcssをメモ張にコピペするなど、必ずバックアップを取っておいてください!! はてなブログで最近テーマストアを覗いたりしていると、当に面白くオシャレなテーマが増えてきましたよね。 また多くのテーマがレスポンシブ対応をしてますが、現実にレスポンシブにしている方はあまり多くないと思います。 せっかく優秀なレスポンシブテーマがあるのに採用しない理由として、グローバルナビを後付けで行っているため、それがレスポンシブになっていないというのがあるかなあと。 もちろん、はてなデフォルトのスマホ表示が十分オシャレというのもありますが。 そこで今回は、よくあるWordPressのブログのように、グローバルナビをレスポンシブ対応させ、ブラウザ幅が縮んだらトグルメニューになるようなカスタマイズを紹介します。 ちょっと難易度が高いかもしれません。また、注意点として若干遅

    はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life
    zaq00555
    zaq00555 2015/08/08
    思ったより簡単に出来ました。
  • はてなブログシェア数付きSNSボタンカスタマイズで3D風ボタンコピペコードを追加です - Yukihy Life

    7/5追記1:コピペコード2(3)とコピペコード4(3)を修正しました。修正点は 今までブラウザによって見え方が変わる可能性のあるコードだったので、より好ましいものに修正(コード2) リンクの下線が出ている方がいたので「text-decoration: none;」の追加(コード2)。 エラーが出ていたHTMLの修正(そのままでも動くけど)(コード4)。 数字が表示されるまでにグルグル回るようにしました(コード1でFont Awesome を読み込んでる人限定)(コード4)。 7/7追記2:重大な不具合を修正しました。詳しくはこちらをご覧ください 【お知らせ】当ブログで配布していたSNSボタンに関して重大なミスがありますので修正をお願いします - Yukihy Life 注:この記事は元記事の補完的役割をしています。 元記事:コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃ

    zaq00555
    zaq00555 2015/08/07
    実際に設置したのはこちら。
  • コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズ - Yukihy Life

    この記事は9/30より不具合が発生しますので、 www.yukihy.com こちらから設定をお願いします。 以下の説明部分を表示する 5/28追記1:シェア数が表示されない不具合が発生しております。現在検証中です…すみません(汗)と言いつつ僕のは表示されるという 5/28追記2:シェア数が表示されない不具合を解消しました。具体的にはコピペコード1を修正しています。お手数ですがもう一度設定をお願いします。 6/7追記3:元々記事にも書いていましたが、2015/8/30より新しいYahoo Pipesをつくることができなくなるそう(参考:Yahoo Pipes Blog - Pipes End-of-life Announcement)それに伴い、「Google+」と「Pocket」のシェア数が表示されなくなります。 6/29追記4:HTML(4と6)でエラーが発生していたので修正しました。

    コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズ - Yukihy Life
    zaq00555
    zaq00555 2015/08/07
    元記事はこちら。
  • コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life

    9/7追記:全体的にボタンのサイズが大きかったり、他のテーマでやると、円形のフォローボタンのデザインが悪かったりしたので、調整をしました。 また、サイドバーにも馴染むようなフォローボタンサンプルも追加しました。 9/9追記:feedlyのURLが間違っていました!「http://www.yukihy.com/feed」を「自分のブログのURL」に変更ではなく、「http://www.yukihy.com」を「自分のURL」に変更でした。大変失礼いたしましたm(_ _)m 10/2追記:独自ドメインを取得している方は、はてなブログでのドメインを入れないとFeedlyのフォロワー数が違くなるようです。詳しくは「http://www.yukihy.com/entry/feedly-follower-mistake」をどうぞ 10/16追記:はてなのボタンをポップアップにする方法を「その他のカスタ

    コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
    zaq00555
    zaq00555 2015/08/05
    丸いデザインのを使わせて頂いてます。ありがとうございます(*´∀`*)
  • コピペ一発ではてなブログ見出しをカスタマイズ!ちょっとの工夫で印象が格段に変わる! - Yukihy Life

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

    コピペ一発ではてなブログ見出しをカスタマイズ!ちょっとの工夫で印象が格段に変わる! - Yukihy Life
    zaq00555
    zaq00555 2015/08/05
    使っているテーマの見出しが本文と区別がつきにくかったので少し変えてみました。
  • 1