2016 - 11 - 16 ブログカード風アフィリエイトリンクCSSを作ってみた はてな スポンサーリンク シェアする Twitter Google+ Pocket ちょっと「バナーどん！！」とか「テキストリンクそっと」とかでは芸がないのでブログカード風アフィリエイトリンクCSSを作ってみました。 ブログカード風アフィリエイトリンクCSS 作ったCSSは以下のもの。 .ad_box{ width : 95% ; margin : 10px ; padding : 10px ; border : dashed 1px #0000ff ; } .ad_box br { display : none ; } .ad_title : before { content : " \f046 " ; font-family : FontAwesome; top : 8px ; line-height

私はデザインの仕事に携わって早15年になりますが、コーディングも10年以上経験しています。 そんな私がよく遭遇する、htmlやcssをコーディングしている時のあるあるネタのひとつをご紹介したいと思います。 Webデザインでは、複数あるdivなどのボックスの高さを（高さ指定なしの可変）揃えたい場合があります。そんな時には、いつもこちらのjsを利用させてもらっています。 コーディングされている方なら知ってると思いますが、これかなり便利です！ blog.webcreativepark.net では、このheightLine.jsについてまとめてみたいと思います。 高さを揃えたい時の対処法 コーディングしていると、テキストの量がブロックごとに違う場合などありますが、どんな要素が入っても高さを揃えたいデザインを数多く見かけます。 そんな場合、ぱっと思い浮かぶのが… 文字数を合わせる 画像にする 高さ

2016年10月2日17：53に追記： コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。 2019年12月23日17：20に追記： デザイン、CSSを微調整しました。 CSSとChrome拡張を使って会話形式の記事を書く 今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。 吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。 「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。 最初の設定は少し面倒です。ただ、一度設定してしまえば、後はめちゃ楽ちんになると思います。 見た目はこんな感じ↓↓ 先生、今日は吹き出しを簡単に実装する方法を紹介します。 運動と瞑想の習慣がない者の末路はいつも悲惨だ。恐ろしい恐ろしい。 ・・・

今回はレスポンシブデザインに便利なcssについてのお話です。 レスポンシブデザインに対応するためにはまず、ビューポートをヘッダーに記述して、メディアクエリのブレイクポイントによってデバイスごとにcssを切り替えます。 WordPressの場合だと、すでにテンプレートの時点でレスポンシブデザインが導入されていて、ご自分でカスタマイズする必要がないものもありますよね。 しかし、そういったCMSを使用していない静的なWebサイトの場合だと、自身でスマホ対応するためにレスポンシブデザインを導入する必要があります。（レスポンシブデザインとは、スマホに対応する色々な手段のうちのひとつです。） その際、レスポンシブデザインに対応するために、特に便利なcssを個人的にまとめてご紹介したいと思います。 display:none; PCとスマホでどうしても異なる画像やコンテンツを表示したい場合に指定します。

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

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

どうも、よしまです。 昨日ブログのスマホ表示を少しいじってみました。 スマホからのアクセスが多いので媚売ってやろうという魂胆です（こら ネット上には自作のHTMLコードやCSSコードを作られている方がたくさんいらっしゃいますよね。 本当に尊敬します。 画像貼り付けタグしか知らない私でも本読んだらできるようになるんだろうか。 それよりまともな文章を書けるようになるのが先だな。 今回はその凄い方々のコードをお借りしてカスタマイズしてみました。 見出し スマホ版の見出しは字の大きさと太さが変わるだけだったので、線を引いてみました。 コピペさせていただいたのはこちらのブログ。 www.yukihy.com ここからh2は「四角」、h3は「よくあるやつ」、h4は「点線」を使わせていただいてます。 （PC版も「上下線」「よくあるやつ」「下線」を使ってます） コード内の「border-bottom:～」

記事タイトルにはてブボタンを設置 記事タイトルにシェアボタンを設置しているブログも多いのですが、表示処理が目線に追いついてなかったり、記事を読むまえからズラズラっとボタンや広告が表示されると萎えてしまうことがあります。個人の感想ですが。 そうはいっても、「あとで読む」ためにブクマをしておきたいとか、タイトルだけで大喜利をしたくなるという用途もわかるので、タイトル部分にアイコンフォントではてなブックマークへのリンクを設置する方法を考えました。 ネイティブアドのようにさりげなく 以前につくった、バイラルメデイア風シェアボタンと基本的には同じ構造なのですが、記事タイトル自体にまぎれさせるようにしています。 タイトルの一部のように見えるので、「あとで読む」と思ったときにしか気にならないし、それでいて明示的なアイコンなので誤クリックもないと思われます。 「B!」ボタンの設置方法 デザイン画面の「記事

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

はてなブログカスタマイズ 今朝、読者登録しているブロガーさん達の記事を読んでいたら、鈴木こあら (id:suzukidesu23)さんが「はてなブログ」のヘッダーとフッターを非表示にされていました。 はてなスターも通知が多過ぎて困り、非表示にされるとか。 この辺の調整はブロガーさんに任されている部分なので全然良いと思います。 ただ気になったのは、スマホで見たら ヘッダーは出ているし フッターも見えていたので パソコン表示のヘッダーとフッターも消すなら、どうせなら「スマホのヘッダーとフッターも消したら良いのでは？」とブクマで書きました。 はてなブログの標準ヘッダ＆フッタを消して、はてなスターを非表示にしました。 - 鈴木です。 スマホ表示のヘッダーとフッターが残ってますよ(^_^)vどうせ消す時はこちらも消した方が良いのでは(^_−)−☆2015/06/11 05:04 そしたらば「 id:

僕はいつも、記事の最後に「あとがき」をつけているのですが、画像から吹き出し付きで書くようにしています。 ですが、これ、モバイル版ではちゃんと表示されていないのを分かっていながら放置してたんです。 CSSを利用した吹き出しなので、仕組みがなかなか難しく、後回しになってしまっていました。 この仕組を理解しないことには、放置しているモバイル版の対応もできないまま。 それはまずいので、ようやく重い腰をあげて勉強してみました。 あとがきの表示 PC版ではこんな感じの表示になってます。 それに対して、モバイル版はこんな感じでした。 吹き出しになってませんね。 最初はこちらの記事を参考に吹き出しを設置したのですが、 PC版だとスペースが広いので、画像の右側に吹き出しをおけるのですが、モバイル版は横幅が狭くなるので下側に吹き出しを置いたほうが見やすくなります。 ですが、そうすると、吹き出し特有の三角部分（