どうも！LSSです！！ 昨日の記事、 のコメント欄に、 なる(id:narutabi) ドットを箇条書きの前に色でつくるとかも勿論可能ですかね？ LSSさんの記事をみてると想像力が膨らみます(#^^#) とのコメントをいただきました。 なる様、ありがとうございます^^ というわけで、今回は「箇条書きのドットに色をつける」方法を試してみたいと思います！！ まず、「箇条書き」とは 箇条書きのHTMLコード CSSで色をつけてみます！ list-style-image について マークを色付きの丸にするには？ とても残念なことに… 応用篇 45degの角度で２色使ってみた例 謎のマーク 円の中心位置をずらして半円 あとがき まず、「箇条書き」とは はてなブログの場合、「記事を書く」の「編集　見たまま」画面に こう、適当に数行、文章を入力したとします。 で、 「見出し　▼」の右あたりにある、 ↑こ

こんにちは、ヨシタカです！みなさん、ブログ楽しんでますか？ 前回はブログ記事にLINE風吹き出しを載せる方法をご紹介しました。 smatech.hatenablog.com いろいろなブログをみてみると、四角い枠で文章を囲んでいるものがあって、わたしもやってみたかったのですが、、、 はてなブログではワンクリックで囲み枠にするアイコンってないんですよね。。。 そこで今回はコピペするだけでブログ記事に囲み枠をかんたんに追加する方法をまとめましたので、ご紹介したいと思います。 えっ、ほんとうにコピペするだけなの？ そうですね、コピペするだけです。ただ、基本色を赤（#fc4a1a）にしているので、色を変えたい場合はこの部分を変更してください。 カラーコードはWEB色見本 原色大辞典 - HTMLカラーコードのサイトさんがまとめていただいているので参考にしてくださいね。代表となる色を一部記載します。

こんにちは、ヨシタカです！ みなさん、ブログ楽しんでますか？ 今回は、箇条書き（リスト）や囲み枠（ボックス）についてCSSを活用したカスタマイズにトライしてみましたのでご紹介したいと思います。 【Webアイコン】、【箇条書き（リスト）】、【囲み枠（ボックス）】のトリプル活用で、こんな感じになります。 文章ばかりのブログ記事をどうにかしたい人 箇条書き（リスト）や囲み枠（ボックス）をカスタマイズしてみたい人 CSSを少しさわってみたい人 はじめの作業が少し大変ですが、一度CSSに設定してしまえばあとはラクラクです♪ さっそくやってみましょう！ そもそもCSSってなに？ CSSを活用してリストやボックスをカスタマイズする方法 箇条書き（リスト）をカスタマイズ 丸数字つきリスト 付箋風番号付きリスト POINT付き箇条書きリスト POINTなし箇条書きリスト 囲み枠（ボックス）にアイコン付きリス

こんにちは。いつもブログを見ていただいてありがとうございます！ 今回はブログカスタマイズで、３つの囲み枠についてご紹介させていただきます。 私も使っているはてなブログのリンク用ブログカードを囲むおしゃれな枠になります。 こんな感じです。 参考にさせていただいたのは、サルワカさんのサイトです。 では、早速ご紹介していきます！ ブログカードをよりおしゃれに Font Awesomeのコード デザインCSSに貼るコード HTMLで貼り付けするコード さいごに ブログカードをよりおしゃれに ブログ記事を書いていく中で、自身のブログの過去記事を貼って内部リンクを作ったり、参考にしたブログの外部リンクを貼ったりすることはありませんか？ はてなブログで実装されているブログカードはこんな感じですが meipapa.info ここに、少しの作業を加えるだけでこのような感じになります。 いかがでしょうか？ 普

どうも！LSSです！ 今回は「HTML超入門！…のさわりだけ！！」と題して、 「はてなブログ書いてるけど、HTMLは全く知らない。広告挿入のためにHTML編集画面を開くとドン引きする。」 という方に向けてちょっとだけ、HTMLってどういうものかを知る入口になったらいいな、って記事を書いてみます。 HTML編集画面を開いてみます HTMLとは？ タグとオプション タグの種類と、それぞれオプションの種類…は割愛します^^; はてなブログで即効で使えるHTMLタグ例２つ！ <hr>タグ＝区切り線 <table>タグ＝表 余録：HTMLと組んでWebページを賑やかにするお友達 CSS JavaScript PHP まとめ HTML編集画面を開いてみます 「編集　見たまま」画面で冒頭の文章を書いてから、適当に数回Enterキーを叩いて、HTML編集画面を開くと↑のような感じになります。 自分の書いた

どうも！LSSです！！ 先日の記事、「【CSS】はためく【実用性ある？？】」の応用ですが、 「カードをめくる」 という動作を、実は以前からやってみたいと思っていました。 実際に作れる事は知っていましたが、今回ちょっと挑戦してみたのです。 カードをめくるサンプル コード 解説…とまでいかないですが、とりあえず理屈だけ とりあえず、めくる動作は出来ていますが カードをめくるサンプル 割とリアルな動きでしょ^^ めくる ↑「めくる」をクリックしてみてください^^ コード <style><!-- .card{ position:relative; width:150px; height:200px; } .a{ position:absolute; border:1px solid black; border-radius:15px; width:150px; height:200px; padd