タグ

デザインに関するlemonpanicのブックマーク (34)

  • http://www.north-geek.com/entry/heading-css

    http://www.north-geek.com/entry/heading-css
  • CSSマーカー線(蛍光ペン風)の解説【42色のサンプル付き】

    この記事ではブログで使用する蛍光ペン風マーカー線について ・「カラーの使い方」 ・「カラーが相手に与えるイメージ」 ・「線の太さによる印象の違い」 ・「フォントによる見え方の違い」 などをサンプルコードを使いながら細かく解説しています。 そんなのいいから、さっさとマーカー線を引きたいという方は、一番下にコピペで使えるカラー別コードを載せているので、目次から飛んでください。 ただしマーカー線1つでサイトのイメージが変わったり、センスが出てしまうのでカラーだけでなく、基は押さえておくことをオススメします。

    CSSマーカー線(蛍光ペン風)の解説【42色のサンプル付き】
  • はてなブログで使える、箇条書き部分をオシャレにデザインしてみよう! | ワーキングノート

    どうも、たつとら(@tatsutora6) です。 はてなブログで記事を書いていて、「箇条書き」や「番号付きリスト」の部分ってデフォルトの設定だったら余り目立たなくないですか?(ボクは「はてなブログ」で記事を書いているので「はてなブログ」の場合で載せています) 特に注目して欲しい時などにそのまま素通りされたら悲しいですよね… そういう時は、枠をつけたりして目立つ書き方にしてみましょう。 デフォルトのデザインは味気ない 「箇条書き」部分というのは「はてなブログ」で書く場合は下記の赤枠で使用する部分。 「番号付きリスト」部分というのは「はてなブログ」で書く場合は下記の赤枠で使用する部分。 普通に入れると「箇条書き」このように味気がないデザインになります。(ブログのテーマによって変わってくると思いますが) これだとパッと見普通の文章と区別がつかないかもしれません。 そこで、【ダッシュボード】>【

    はてなブログで使える、箇条書き部分をオシャレにデザインしてみよう! | ワーキングノート
  • 【これはすごい!】LEGOで作られたジブリ作品が素晴らしい! - ー世界へのDOORー

    みなさん、こんにちはこんばんは!Rinです。 今日から11月ですね!あと2ヶ月で今年も終わりですが、残りの日もほぼ毎日投稿できたらなと思います!(*^_^*) 突然ですが、皆さんはLEGOで遊んだことはありますか? LEGOとは、デンマークの玩具会社で、パーツを組み立てて遊ぶおもちゃですが、一回は目にしたり、小さい頃に遊んだり、また子どもが遊んでいるのをみたりしたことはあるのではないでしょうか? 私も小さい時、LEGOでお城や船などを弟と一緒に組み立てるのが大好きでした。 今回は、そんなLEGOを使って、なんとジブリ作品を作り上げてしまった、Iain Heathというアーティストの作品を紹介します。 どの作品も巧みに作られていて、感動するものばかりです! 【これはすごい!】LEGOで作られたジブリ作品が素晴らしい! 千と千尋の神隠し 天空の城のラピュタ もののけ姫 風の谷のナウシカ となり

    【これはすごい!】LEGOで作られたジブリ作品が素晴らしい! - ー世界へのDOORー
  • はてなブログ初心者がDUDEカスタマイズに挑戦してみた - Enjoy!America

    前回記事でスマホカスタムをし、スマホ画面については少し見やすくなったのかなと思う。 www.natsutravel.com まだまだですが、、、今日はもともと多少カスタマイズしているPCサイトの方を頑張ってさらにかっこよくしていきたいと思います!!しかし初心者なので先人の知恵を存分にお借りします。 外部リンクを別窓で開かせる Amazonに直接リンクさせる。 ヘッダーのカスタマイズ SNSデザインをおしゃれにしたい! 文章を読みやすくするためのカスタマイズ 見出しを変えてみた 文字色変えてみた 囲み枠を設置してみた。 おしゃれなボックスデザインを追加してみた 外部リンクを別窓で開かせる <ダッシュボード→設定→詳細設定→headに要素を追加> 下のコードを書くことで、amazonへのリンクなど、ブログの外部へのリンクを別窓で開くように設定します。 --- <script type="tex

    はてなブログ初心者がDUDEカスタマイズに挑戦してみた - Enjoy!America
  • コピペで始めるはてなブログテーマDUDEのカスタマイズ集!フォント・色から自分らしく

    余裕があれば、ついでに色コードの仕組みもカラーコードの仕組みをしろう! | +ぷちカスタマイズ日記+こちらのサイトで理解しておくと、自分で色コードをいじって色の微調整ができて楽しい。 コードを綺麗に 参考程度に、フォント変更と色変更をまとめて #title a { font-family: フォント名; /*ブログタイトルのフォント変更*/ color: 色コード; /*ブログタイトルの色コード変更*/ } こんな感じに書くこともできる。cssでは改行は無視されるので、コードが見やすいように適宜改行を入れてかまわない。コードを綺麗にしたい人はこの書き方で書いてもいい。 使用した色コードをメモしておく 無事色の設定が終わったら、ここで使用した色コードをメモ帳か何かに保存しておくことをオススメする。 今後ブログ内のいろいろな要素の色を変更していくことになるが、一つのブログで使用する色はなるべく

    コピペで始めるはてなブログテーマDUDEのカスタマイズ集!フォント・色から自分らしく
  • ごちゃごちゃした配線は全部まとめてケーブルボックスに入れて視界のノイズを減らす | mozlog

    こんにちは。まずはこちらの写真をご覧ください。  我が家のリビングのコンセント周辺の様子です。配線が多すぎて最悪。 NURO光ONUスマート電球Hueの親機AirPlay対応スピーカーの電源ルンバの充電アダプタ電源タップなどが密集していてごちゃごちゃしてて目に入るたびに「あらゆる配線がワイヤレス化されている世界線に生まれたかった」という気持ちになってしまって精神衛生上よろしくない。解決しましょう。  勝利。 一発で見た目スッキリ。ケーブルにホコリが付着しなくなるのもいい。  ちなみに中身はこんな感じ。アダプタとかの大きいものも雑にガンガン放り込めるLサイズがおすすめです。  うん、いい。もう1個買ってスタジオ部屋にも導入しよう。

    ごちゃごちゃした配線は全部まとめてケーブルボックスに入れて視界のノイズを減らす | mozlog
    lemonpanic
    lemonpanic 2019/09/02
    おー、これいいな
  • ikkiyakou.com

  • スマホOK!LINEスタンプの作り方と12万個売れたアイデアの出し方 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    LINEのやり取りにかかせないスタンプ。自分でオリジナルのスタンプを作ってみたい、家族や友人と楽しめるスタンプを作りたいと思っている人も多いのではないでしょうか。 今回はスマホでも作れるLINEスタンプの作り方や12万個売れたLINEスタンプを作ったコツを紹介します! デザインの世界に飛び込んでみませんか? Illustratorが使えるようになりたい、クリエイティブな仕事がしたい……という方は「スクールでの勉強」もおすすめです。弊社のスクールでは、未経験から6ヶ月でWebデザイナーを目指せます。スクールでどんな内容が学べるのか、ぜひ一度詳細をチェックしてみてください! 👉「デジタルハリウッドSTUDIO by LIG」詳細へ ※この記事は2022年8月に編集部が情報を更新しました LINEでオリジナルスタンプを作成する方法 さっそくLINEスタンプ作成の流れを紹介します。 オリジナルス

    スマホOK!LINEスタンプの作り方と12万個売れたアイデアの出し方 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • Amazon prime dayで買ったもの&構築的なデザインのバッグが気になる - glasstruct log

    最近アマゾンが何やらひんぱんにメールを送ってきていたのが気になっていました:「プライムデー始まる!とにかく安い!」…翌日「プライムデーで買うべきアイテム!お客様におすすめなのはコレ!」…1週間後「プライムデーついに明日!」… おうおう、そんなに安いのかい?と思いつつ、合わせ買い対象でカートに入れっぱなしの日用品も買ってしまいたいと思っていたので、何か良さげなものはないかな~とアマゾンを徘徊してみました。 日23:59までということで、時間帯別に色々とタイムセールやってるみたいです。個人的にこの後の時間帯で気になっているのは、多分21時台のYチェア。いくらになるのかなー? 七掛け以下なら買いです。 カール・ハンセン&サン CH24 Yチェア ビーチ材 オイルフィニッシュ ナチュラルペーパーコード 出版社/メーカー: カール・ハンセン&サン メディア: ホーム&キッチン この商品を含むブログ

    Amazon prime dayで買ったもの&構築的なデザインのバッグが気になる - glasstruct log
  • 「積読整理術」ブックタワーを購入しました。 - サラリーマン行政書士の読書日記

    今月のBEST BUY、「ブックタワー」 積読用棚、ブックタワー ブックタワーによる積読整理術 積読整理術-未読と読了を分ける 積読整理術-ジャンルを分ける 積読整理術-優先順位付けする 積読整理術-やはり見た目が大事 まとめ的なもの 今月のBEST BUY、「ブックタワー」 どうも、読書家サラリーマン行政書士の物欲ブログです。 先日のエントリーで、2018年のBEST BUYを紹介させていただきました。 www.co-idealblog.com 今回は、まだ月初にもかかわらず今月のBEST BUYを紹介させていただきます。 こちらもまだ手に入れたばかりですが、当に買ってよかった!と思える一品。 日々手に取ったりしてガシガシ使うものではないですが、ひっそりと読書ライフを支えてくれる一品です。 それがこちら、オークス ブックタワーです。 オークス ブックタワー ロータイプ L53DA ダ

    「積読整理術」ブックタワーを購入しました。 - サラリーマン行政書士の読書日記
    lemonpanic
    lemonpanic 2018/12/08
    こんなのあるんだ!
  • cssで作るあのサイトのあのボタンみたいなボタン - FOXISM

    前回の記事で基的なことは書いたので、次は模倣。いくつかのサイトにある、実際に使われているボタンに似たものを作ってみます。 実際に使うかどうかは別として、cssの練習にはこういうのが良いんじゃないでしょうか。 基的に、以下のaタグのみのごく簡単なhtmlを使って作っていきます。クラス名や中の言葉は変わっていきます。いろいろ察してください。 <a href="#" class="btn">ボタン</a> また、いつものことですが、使っているテーマなどによっては、そちらのcssが優先されてここでの指定がきかない場合もあります。!important付ければ大抵なんとかなりますが、あまり美しくはないですね。 ではでは、いってみましょー。 Amazon(サインイン) 元となるボタン できたもの css Amazon(アカウントを作成) できたもの css はてなブログ(写真を投稿) 元となるボタン

    cssで作るあのサイトのあのボタンみたいなボタン - FOXISM
  • レビューブログに使ってほしい はてなブログカスタマイズ その2:自分の評価を星で表示 - FOXISM

    html <table class="star-rating1"> <tr><th>価格:</th><td style="color:#ccc;"><span style="color:#f90;">★★</span>★★★</td></tr> <tr><th>見た目:</th><td style="color:#ccc;"><span style="color:#f90;">★★★★★</span></td></tr> <tr><th>耐久性:</th><td style="color:#ccc;"><span style="color:#f90;">★★★</span>★★</td></tr> </table> ちょっとした解説 とくに何の工夫もなく、単にテキストで星(★)を表示して、点数分の星だけ<span style="color:#f90;"> ~ </span>で色を変えていま

    レビューブログに使ってほしい はてなブログカスタマイズ その2:自分の評価を星で表示 - FOXISM
    lemonpanic
    lemonpanic 2018/11/30
    星評価ってどうやってするんだろうと思っていた
  • レビューブログに使ってほしい はてなブログカスタマイズ その1:良い点・悪い点のリスト - FOXISM

    私のこのブログはレビュー系ではありませんが、メインサイトの方ではスマホや周辺機器のレビューをやっています。そこで使っていたり、ほかのレビューブログでもこういうのがあるといいな、というカスタマイズを残しておきます。 まず今回の「あるといいな」は「その製品の良い点・悪い点を端的にまとめたリスト」です。 はじめに まず、レビューとか言いつつ自分では実物を手にせずにネット上のスペックだけをコピペしているだけでそれを見て「コスパ抜群です」とか言ってるようなブログ、スペックレビューとか言って当にスペックしか書かれていない公式サイトでわかる情報以外が無いようなブログは滅んでください。よろしくお願いします。 レビューとか言って、開封の様子を順番に写真を載せただけで記事の9割が埋まっているブログもありますが、それもかなり残念な気持ちになります。開封レビューとかで、それぞれの写真にちゃんと有用なコメントつけ

    レビューブログに使ってほしい はてなブログカスタマイズ その1:良い点・悪い点のリスト - FOXISM
  • 【CSS】よく使う矢印アイコンの備忘録だよ〜 - blog.kuroan.net

    2015-12-06 / category-web 【CSS】よく使う矢印アイコンの備忘録だよ〜 よく使う矢印アイコンの備忘録だよ。 基的に自分用なので、コピペして使う時は位置とか変えてちょんまげ〜。 普通の三角形アイコン 文中のリンクとかでよく使うやつ。 html <span class="arrow1">三角矢印アイコン</span> css .arrow1 { position: relative; display: inline-block; padding-left: 12px; } .arrow1:before { content: ''; width: 0; height: 0; border: solid 4px transparent; border-left: solid 6px #ff69b4; position: absolute; top: 50%; left:

    【CSS】よく使う矢印アイコンの備忘録だよ〜 - blog.kuroan.net
  • 画像を使わない!CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説

    画像を使わない!CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説 初心者向けにCSSだけで矢印のアイコンを作る方法について解説しています。画像を使わずにCSSで矢印を作れるようになればサイト制作にも役立つはずです。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査 今回はCSSで矢印を作る方法を説明します。 今まで画像を使って矢印をつけていたという方も、自

    画像を使わない!CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説
  • ファクタリング 安心

    【PR】 ファクタリングのメリット キャッシュフローの改善 ファクタリングは、未収金の売掛金を現金化する手段として機能します。企業は売掛金を換金することで、迅速なキャッシュフローの改善を図ることができます。これにより、経営資金の不足による支払い遅延や資金繰りの問題を回避できます。 資金調達の多様化 ファクタリングは従来の融資以外の資金調達手段として利用できます。企業が銀行融資などの伝統的な手法に頼らずとも、売掛金の割引によって資金を調達できます。この多様化は、企業の資金調達の柔軟性を高め、事業の成長にとって重要です。 信用リスクの軽減 ファクタリング会社は、売掛金の回収リスクを負うことが一般的です。このため、企業は売掛金を換金することで、売掛金の回収リスクを軽減することができます。特に新興企業や信用力の低い顧客に対する取引において、ファクタリングは信用リスクの管理に役立ちます。 財務指標の

    ファクタリング 安心
    lemonpanic
    lemonpanic 2018/11/17
    やってみたい!!!!!
  • クリック率が上がる!?光るボタンをAFFINGER以外でも使うCSSカスタマイズ│アズノキ

    どうも、こんにちはっ!あずさんち管理人のちゃぴ(@oyakocreate)です(゚∀三゚三∀゚) Twitterでこんなツイートを見かけました。 AFFINGER5 の "キラリと光るボタン" を使ったら、 クリック数が 30 % 増えた。 AFFINGER5 (アフィンガー5) を1ヶ月使ってみたレビューhttps://t.co/kpSqAoLMTa pic.twitter.com/gT0XCzAxVg — てっぺ (@teppesmn) May 15, 2018 AFFINGER5に採用されている「光るボタンリンク」を使うと、クリック率が30%も上がる…だと!? しかし、私はAFFINGER5を持っていませんし、今のところ購入予定もありません。

    クリック率が上がる!?光るボタンをAFFINGER以外でも使うCSSカスタマイズ│アズノキ
    lemonpanic
    lemonpanic 2018/11/17
    光るリンクボタン
  • iiie.nagoya

    lemonpanic
    lemonpanic 2018/11/14
    Nakedだったとは。素晴らしい。スライドとかは、いつかやってみたい憧れカスタマイズ…
  • はてなブログでカテゴリーを階層化する方法を確認してやってみた|unico fun life

    現在はてなブログでこのブログを書いているのですが、先日デザインテーマを「Minimalism」に変えてみました。 ※追記:2018年6月下旬に、はてなブログからWordPressに移行したため、現在は当ブログのデザインが異なっています。 そのついでに前から思っていた「カテゴリを階層化したい」という要望をやってしまうことに。 ここでポイントがまず2つ。 カテゴリー階層化は、はてなブログ公式は対応していない 対応するには「パンくずリストを作成するブログパーツ」を使用すればいける というわけで、ブログパーツ使わせてもらい早速設定してみました。 これまでのカテゴリーの状態。 整理して設定したのがこちら。ちょっとすっきりしました。 ▶の部分を押すと下の階層が現れるようになっています。 これこれ〜!こんな風にしたかったんですよね。 今回使用したブログパーツを作成してくださったサイトさんはこちら。 bl

    はてなブログでカテゴリーを階層化する方法を確認してやってみた|unico fun life