吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - SHIROMAG
2016年10月2日17：53に追記： コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。 2019年12月23日17：20に追記： デザイン、CSSを微調整しました。 CSSとChrome拡張を使って会話形式の記事を書く 今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。 吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。 「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。 最初の設定は少し面倒です。ただ、一度設定してしまえば、後はめちゃ楽ちんになると思います。 見た目はこんな感じ↓↓ 先生、今日は吹き出しを簡単に実装する方法を紹介します。 運動と瞑想の習慣がない者の末路はいつも悲惨だ。恐ろしい恐ろしい。 ・・・
コピペ一発ではてなブログ見出しをカスタマイズ！ちょっとの工夫で印象が格段に変わる！ - Yukihy Life
最近、カスタマイズばかりしているゆきひーです。見よう見まねで一通りやっています。デザインとかかなり難しそうだなと思っていたのですが、最初の数個を理解すると意外と応用範囲が広いことに驚いています。 僕がブログを始めたときに困ったのが、見出しをカスタマイズしたいのに全くできないというものでした。「見出し おしゃれ」とかって検索すると本当に豪華なオシャレなのが出てくるんですよね…。ちょっと線入れたいだけなのに！みたいな。 なので、非常に簡単なものばかりですが、ある意味無機質な見出しコードを10個下に書いていきます。無機質なのでかぶってもOKっす。 基本的にコピペでOKなので活用してみてください！ コードを貼る場所 PC スマホ どの見出しを変える？ 下線 点線下線 上下線 よくあるや〜つ 左だけと背景 四角 角を丸める 影 ぼやかし LIGっぽいかんじ もう少しカスタマイズ 色 文字のサイズ 文
コピペ+αではてなブログに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追記：はてなのボタンをポップアップにする方法を「その他のカスタ
コピペ１発+αではてなブログスマホ画面にトグルメニューをつけるカスタマイズ - Yukihy Life
6/22追記：コピペコードを１つにしました。前回のようにheaderにjQueryを読ませるより、若干スピードが速くなります。またデザイン面でもバランスが悪かったので少しコードを変更しました。その他のカスタマイズも充実させました。 8/7追記：ボタンの反応するところが横幅いっぱいになっていたので、文字の部分のみに修正しました。具体的には24行目を「block」→「inline-block」にしただけなので、今までのから変えたい方はそこのみ変えてください。また、その他のカスタマイズに「ボタンを目立たせる」と「２分割にする」を追加しました。 12/07追記：この記事に書かれているコードだと、「タイトル下」に広告を貼ったときに背景に色がついてしまします。気になる方は、（【改良版】コピペ一発はてなブログにトグルメニューをつけるカスタムを広告の背景に色がつかないようにしました！ - Yukihy L
はてなブログデザインカスタマイズ | タイトル・画像のセンタリング・サイドバーや見出しなど - Yukihy Life
ブログ書いているよりも、ブログカスタマイズをしている方が楽しいゆきひーです。 今までいろいろと小出しに記事にしていましたが、デザインCSSに書かれていることの中で、どのテーマでも共通で使える（かもしれない）ものをまとめて書きました。 他の記事で補完できる部分 【PC版】 フォント トップ画面でのフッターを消去 画像をセンタリングして線でくくる サイドバーのタイトルに青い下線を入れる タイトル付近の色を変える 見出しと記事タイトル リンク色の変更 「続きを読む」の文字を横に広くする 【PC１カラム版】 サイドバーのカスタムHTMLのモジュールを消去 下に回り込んだサイドバーを２分割に 【スマホ版】 全体的な文字を小さく 余白や文字の大きさの調整 ２分割サイドバーを解除 まとめ 他の記事で補完できる部分 全て書いていくと長くなってしまうので、他の記事で補完できるところはそちらを見ていただければ
はてなブログで同じカテゴリの記事をランダム順に表示して関連記事っぽいものを作るカスタマイズ - Yukihy Life
2015/11/11追記１：うまく取得できているかの判断が曖昧だったので、確認方法を追記しました。設置をする際は、うまく取得できているかの確認をお願いします。またCSSをテーマによる崩れを防ぐために若干変更しました。 2015/12/06追記２：数日前に、このプログラムで使用しているGoogle Feed APIのサービスが終了してしまいました。なので表示が安定しない状況です。ただいま代替案を模索中です。お手数おかけしますm(_ _)m2016/3/20追記３：GoogleFeedAPIが復活？しているみたいできちんと表示されるようになりました！ 前回書いた、はてなブログで記事と同じカテゴリを新着順に並べて関連記事っぽくするカスタマイズの続きで、同じカテゴリをランダムに出すのができたので書きたいと思います。 先に言っておきますが、Javascriptを勉強したての者が作っていますので、いろ
Milliard関連記事プラグインのCSSをいじり２列にしてブログになじむようにしてみました - Yukihy Life
関連記事の表記に再びMilliardの関連記事プラグインを使い始めました。 その関連記事のデザインを変更したので書いておきます。（許可はとってあります） Milliard関連記事プラグインとは？ Milliard関連ページプラグインについて | シスウ株式会社 Milliard関連記事プラグインは、はてなブログに搭載されていない関連記事を入れることができるプラグインです。 記事数が増えてくるといちいちリンクを貼るのも面倒なので、関連記事プラグインで回遊率を上げよう！というものです。 かなりオシャレで、表示される記事もしっかり関連したのが出てきます。 導入した結果 この関連記事表記は、パネルとリストと選ぶことができます。パネルの方がおしゃれですが、今回はシンプルにリストにしてみました。 普通に導入するとこんな感じになります。 ですが、何となく無駄なスペースが空いてしまうので、CSSをいじって
関連記事表記にMilliard関連ページプラグインを導入しサイドバーに固定してみました - Yukihy Life
関連記事に関して、以前ははてなブログのブログカードをカテゴリごとに自動生成してくれるという神コードを使っていたのですが、ちょっと新たな気分にするために、Milliardの関連ページプラグインというものにしてみました。 どんなものかを紹介してみたいと思います。 Milliard関連ページプラグイン Milliardでこんな感じで関連記事が表示されます 一般的に導入をすれば、こんな感じで関連記事を表示することができます。 PC画面 PCではこんな感じ（画像は全て「Milliard関連ページのよくあるカスタマイズについて(WordPressプラグイン)」から） パネル表示 画像なのでわかりづらいですが、本当はスクロールできます。 リスト表示 モバイル版 モバイルでのパネル表記 モバイルでのリスト表記 ちなみに僕はPC版はフッターではなくてサイドバーにパネル表記の関連記事を差し込んでみました。モバ
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
はてなブログだけでなく、アマゾンや楽天・ヤフーショッピングの商品を紹介する際にはブロガーのかん吉さんが作ってくださったサービス「ヨメレバ・カエレバ」を使うことで 簡単にリンクを作成することができます。 それらを綺麗に表示させるカスタマイズはもう出ているのですが、先日あるブロガーさんに会ったときにカスタマイズをしたら喜んでいただけたので、紹介したいと思います！ 参考リンク 実装図 カスタマイズの注意点 カスタマイズ PC スマホ レスポンシブ その他のカスタマイズ 最後に 参考リンク 今回のカスタマイズはほとんど今までやってこられていた方をちょっと変更したような形になっているため、あらかじめ参考リンクを貼っておきます。ありがとうございます！ shufulife.com 実装図 実際に導入した様子はこんな感じになります。 PC スマホ PCでバランスよく表示させたのと、スマホではなるべくコンパ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
