今回は、画像を使わずにHTMLとCSSだけで作るで吹き出しのデザインサンプルを紹介します。シンプルなものから、円形、会話形式、LINE風のものまで一挙にまとめました。HTMLとCSSはコピペして使うことができます。 レスポンシブ対応 以下で紹介する吹き出しデザインは（円形のものを除き）、文字が右端まで達すると、次の行へ折り返すようなレスポンシブ対応になっています。 使い方（初心者向け） CSSが反映されないときはこちら シンプルな四角い吹き出し4つ 最もシンプルな形です。三角形の位置を上下左右に配置したサンプルをそれぞれ紹介します。コードを見てもらうと「#e9edff」と書かれた部分が2カ所あると思いますが、これが背景色を指定するコードです。お好みで変えて頂ければと思います。 ちなみに下から伸びる三角形は疑似要素（before）で表現しています。興味のある方は下の記事に目を通してみてくださ

かなり前に書いた記事で www.fair-skinned-monster.com というのを書きましたが、今回「はてなダイアリーPlus」の機能が停止になるということで、この方法が使えなくなります。 staff.hatenablog.com ご自分でレンタルサーバーなどを用意するか、DropBoxを使う方法もあるそうです。 www.foxism.jp CSSの反映に時間がかかっても（２４時間くらい）よいと言う方は www.fair-skinned-monster.com みたいな方法もあります。 万が一「はてなダイアリーPlus」のファイルアップロードでCSSを外部ファイル化されている方がいらっしゃれば、早急の対応をお願いします。 パワフルで高速なピュアSSDクラウドレンタルサーバー「MixHost」

どうも皆さんこんにちは、ケンヂです。 先日Amazonアソシエイトのレポートをみていたらオナホが購入されていました。誰ですかうちのリンクからオナホを買った素敵な紳士は、怒らないから使い心地を説明しなさい。 おっと話がそれました。 最近ふと気づいたんですが、はてなブログを使ってる人たちってあまりスライダーを使っている感じないですよね。（これといって使う理由もないですが） まぁ、そもそもスライダーの設置って多少なりとも知識がないと設置しづらいので仕方のない事だとは思いますが、レイアウトを充実させる為の選択肢としては是非知っておきたいところだと思いませんか？ というわけで今回は、コピペだけでスライダーを設置する方法を紹介していくぞ～(‘ω‘ ) 今回紹介するスライダーの見本 各セクションに貼り付けるコード スライダーを読み込むためのコードを挿入 任意の場所にHTMLを挿入 デザイン調整用のCSS

こんばんは、夜中たわしです。 今回は主にはてなブロガー向けの記事です。 前回の記事のためにLINE風の表現ができるCSSを作ったんですが、それのやり方が知りたいという熱い声（1件）があったので、公開することにしました。 他のサービスでも使用可能ですが、はてなブログ向けの導入方法として紹介します。 紹介するCSSでできること できないこと 制作背景・前置き 注意事項 CSSにコードを追加（その1） CSSにコードを追加（その2） 会話形式CSSを導入している場合 使用方法 おわりに 紹介するCSSでできること これから紹介するCSSでできる表現はこんな感じです なるほど しいたけ　しいたけ そのしいたけの人は一体？ わかりません なんか料理が出てきた このようにLINEのグループ会話、に近い表現ができます。 補足：このしいたけは私が撮影したものです 一応、画像じゃないですよ。テキスト部分など

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

2017 - 03 - 01 ブログのアイキャッチの文字 フリーターの暇つぶし 人気記事 石田祐希公認LINEクリエイターズスタンプ「いしだのスタンプ」販売開始! 【本音】彼氏に男目線での街コンの感想をインタビューしてみた。 フリーターの市場価値はいかに？MIIDAS（ミーダス）で診断してみた。 フリーターはブログの雑所得も確定申告で申請するのか？！雑所得の話をまとめてみた ブログを時々ヲチするんですけど、これ最近良く見るんですよね！ 名前は「 たぬき油性マジック 」というフリーフォントです。 皆さ、何でこぞって使ってるんだろう？思ったんですけど、見やすく、可愛いだけじゃなく 読者を煽ったときに煽り感が減るからじゃないかと思いました。 ブログもといwebライティングは、人の感情を動かさないと読者には響きません。しかし、感情を逆撫ですると炎上することもあります。そのさじ加減を調整するのが、ア

For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.

2017 - 02 - 10 ブログをカスタマイズしてみた やってみた ブログ こんにちは、なんだか嬉しいことが重なりすぎてテンションが変なはんぺん（ @ hanpen_005 ）です。 ついにブログのカスタマイズに手を出しました。 「やり始めると止まらない」「記事が書けない」ってホントですね。 HTMLや CSS の知識が著しく少ないので時間がかかる。そして楽しすぎる。 今回は超初心者の私でもわかりやすいカスタマイズと、参考にさせていただいたサイトをご紹介します。 最初に 一気にブログがおしゃれになるテーマ「DUDE」 レスポンシブに対応させる SNSのフォロー・シェアボタン フォローボタン シェアボタン 会話吹き出し まとめ 最初に www.monochromen.com 一番最初に参考にさせていただいたサイトです。 項目ごとに見させていただいてとても参考になりました！ ここから下は個

どうも、ことのは(@tukinasikotonoh)です。 今回は久しぶりにはてなブログのちょっとした簡単なカスタマイズを紹介していく！ 僕がはてなブログを始めたばかりの頃に一番最初にまよったのがデザインテンプレートの選択だ。 ブログというのは人によっては長文になる可能性が高いので、文字の可読性や余白のバランスなどが重要になってくる。 いろんな人のブログを見ていた気付いたのは、今はてなブログ界隈でかなり流行っているデザインテンプレートは「Brooklyn」だということ！※もしかしてもうブームすぎた？ｗｗすぎてないよね？？ カスタマイズも簡単でレスポンシブ表示にも対応していることから、使用している人はとても多い。 例を挙げると、ブログアドバイザーで有名なポジ熊さん (id:pojihiguma)や、僕の師匠的存在の（ブログカスタマイズの）タイラケンヂ氏 (id:bumpmania)がこの「B

ヨメレバ・カエレバ・トマレバをメディアクエリ無しでスマホにも対応できるようにflexboxを使って作ってみました。「続きを読む」にあるような動きのあるエフェクトはつけていません。 動作は大丈夫だと思いますが、不要な指定などが入っているかもしれませんのでご了承ください。 もしも表示崩れなどございましたら、コメント欄にて指摘していただけるとありがたいです。 ボタンにエフェクトがついているヨメレバカエレバトマレバはこちら mshitech.hatenablog.com 修正 ・10月29日 wordpressで表示されない問題を一部ではありますが解決しました。引き続き改良をして行きます。 ・2016年11月2日 yahooのフォントサイズを10pxから9pxに変更しました。 ・2017年6月10日 影などの要素を取り、シンプルになるようにデザインを変更しました。 はじめに 完成図 コピペする場所

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

こんにちは、えむしです。今日はブログのフォントをWEBフォントへ変更する方法を見て行こうと思います。 *表示がかなり遅くなってしまったので、一旦フォントを元に戻しました・・・ 現在はgoogleのNoto Sans Japaneseを使っています。 はじめに 完成図 使用するWEBフォントは「みんなの文字」さん 設定方法 CSSをコピペする場所 はじめに きっかけはこちらのエントリー。 medium.com カッコイイ！でも細かな調節は面倒だし難しい、ならお手軽な方法で雰囲気を変える事は出来ないか・・・と日本語のウェブフォントを検索しました。 「みんなの文字」を導入する事によって、iOSやアンドロイド、MacOS、Windowsなどの環境に関係なく、表示を統一できます。 デメリットは日本語フォントを読み込む分の通信が発生しますので、ページの表示が重くなるかもしれません。 また、フォントを変

どうも、沖縄在住ニートブロガーのケンヂ（@neetblogman）です。 実は最近、僕のブログで使用しているとある機能について問い合わせを受けることがちょくちょく出てきました。 まぁ既にタイトルにも記載しているんですが、文字が震える機能のことです。 これとか！ これね！！！ この機能が僕のブログに独自性を持たせていたともいえるため、この方法を周りのブロガーに紹介してしまうと僕の存在が消えてしまうのではないかという恐れがありますが、今回はそこについて気にしない方向で行きたいと思います。 何故なら、一度はIT業界に携わった身ですからアウトプットの大切さを僕は知っているのです。アウトプットがあるから新たなインプットが生まれる、これの繰り返して人間という生き物は成長していくのですよ。 というわけで！！誰でもサクッと簡単に使うための方法を教えちゃうよ―(‘ω‘ ) CSSなどの導入方法はこちらのペー

こんにちは。おはるです。 以前webデザイン初心者向けの記事を書きましたが、そのときはこれから勉強する前提の記事だったので今回はもう少しすぐに使える！な内容を書いてみようかなと思います。 （※以前の記事はこちら） itjoshi.hatenablog.jp さて今回の内容ですが、 デザインテンプレートを入れてみたけど、ここの文字サイズだけ変更したい！コンテンツ幅を調整したい！でもどこを変えたらいいのか分からない… こんな時に使えるかもしれないコツを紹介しようと思います！ ※今回ははてなブログでカスタマイズをする前提としています。 基本的な考え方 テンプレートで設定しているCSSは外部ファイル化されている 変えたい部分を上書きするイメージ もしも外部ファイル化されていない時は 実際に自分でやってみる！ デベロッパーツールで変更したい箇所を探す デベロッパーツールを表示させる CSSを確認 該