Simplicityで利用しているSNSロゴをSVGで作った

Simplicityの特徴 フォーラム 管理者宛の問い合わせ・その他 Simplicityで利用しているSNSロゴをSVGで作った

47件の返信スレッドを表示中
  • 投稿者
    投稿
    • #40421 返信
      Hidekichi
      ゲスト

      アドレスはこちら

      サイズは全部 500 x 500 (px) で、twitterのみ公式の仕様通りに、鳥の胸辺りのカーブからなる円を150%にしたスペースを確保したものを500×500に合わせて、ロゴだけセンタリングしてます。
      後のものはだいたいです(笑)

      サイズをあわせるのであれば、全部合わせられますが、それぞれにロゴの線の太さなどが異なるのでまぁ大まかでいいんじゃなかろうかと。

      なぜ作ったかというと、どうやってもfont awesomeとその他では色々調整が面倒くさい大変なので、いっそのことサイズを合わせて同じ仕様で作ったほうがサイズが合うだろうというのが一つと、おそらくfa-twitter-squareのような背景のあるものだとズレが生じることで背景要素とアイコンの隙間に線が入ってしまうため、それなら背景なしの物を全部作ったらいいじゃんと言うことで、作ってみました。

      こうすると、仮に

      <ul>
        <li>
          <a href="#">
            <span class="twitter"></span>
          </a>
        </li>
      </ul>

      こういうhtmlがあるとして、cssでは、

      ul li {
        background-color: #666;
        border-radius: 6px;
        position: relative;
      }
      
      ul li span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
      }

      これでliのど真ん中にアイコンが揃うはずです。で、

      ul li:hover {
        background-color: snsの色;
      }

      などもできます。liに各SNSの背景色を入れて、アイコンフォントに色をつけるということも良いですし、サイズが気にならないというなら、svgを直接htmlに入れても良いかと思ったりも。

      ここらをどうするかはまた色々とアイデアを出しあう必要がありますが、兎にも角にも素材があっての話なので。
      なんなら1枚物にサイズを変更して並べたりもできます。その場合は画像として使うことになりますが、現在33 x 33 のサイズなので、これらが10個程度横に並んでもファイル容量は気にならないのではと思います。

    • #40427 返信
      Hidekichi
      ゲスト

      サンプル: cssスプライトによるfollowボタンサンプル

      先のレスで、不足していたものを追加と、cssスプライト用の.png及び.svgを同じアドレスにアップロードしました(githubで言う所のpushした)。

      スプライト用のpngは最適化後で2.5KBでした。
      これをcssで読み込んでいるのでhttpリクエストを減らすと同時に、使いまわすのでwebfontより軽いかも知れません。

      サンプルでは、その使用例と任意のサイズでどのように表示されるかを表示してあります。
      flexを利用しているのでアイコンの間のスペースは自動調整されています。ここらはflexを使用しないでもできますが、折り返しが発生して余りが出るという様な場合を除きそのままでイケるかとも思います。
      またulに指定しているjustify-contnet: space-betweenを justify-contnet:flex-start;にすれば、例えばfloat:leftや、あるいはdisplay: inline-blockで並べるのと同じように、liのマージン詰めによる横並びになります。

      33×33 pxはcssの値から拾いましたが大きくも出きます。svgの方を直すのが面倒という場合は、background-positionの指定でも修正できるかと思います(数pxなら)。

      スプライト画像は、33 x アイテム数分だけ横幅を取り、それぞれを33x nの間隔で並べてあります。並び順は確認してもらいながらですが、33pxで例を上げると、

      background-position: アイテム番号 x -33px , 0;

      と言うような計算で位置が出せます。0番目のtwitterなら、(0 x -33px = 0), 0 つまり、0,0の位置にあるということです。background-positionは、マイナスの数値を入れると右にずれていきますので、1番目のfacebookなら、-33px, 0というような位置になるという寸法です。
      サンプルでは、計算が面倒なので、scssのfunctionを利用してますが、目的のアイテムが何番目かがわかれば計算で出せます。※アイテムは0番目から12番目までの13個です。

      現在、利用してないpocketも含め13アイテム登録してあります。

    • #40442 返信
      Hidekichi
      ゲスト

      サンプルに、背景カラーを最初からつけるのと、ボーダーをつける場合を追加しました。

    • #40459 返信
      アバター画像わいひら
      キーマスター

      これは、僕の完全な好みになってしまうのですが、InstagramとFlickrはスクエア型にしたく思います。確かにhidekichiさんの方法は、白色がはみ出すことはないので良いのですけど。うーん、今ちょっと、どうしようか悩んでます。慣れの問題もあるのかもしれません。
      というか、スクエア型でも、全て同じ条件でTwitterとかFacebookもSVGを自作してしまえば、背景がはみ出すこともないんじゃないかなと思ったり。
      ただし、ここら辺は実際にやってみないとわからないんですけど。

    • #40464 返信
      Hidekichi
      ゲスト

      > スクエア型でも、全て同じ条件でTwitterとかFacebookも
      > SVGを自作してしまえば、背景がはみ出すこともないんじゃない
      > かなと思ったり。

      例えばsvgの方を少し大きめにして作っておけばスクエア型でもliでoverflow: hidden;でイケます。li自体には色を付けず、svgに色を付けてしまうというのも方法です。

      わいひらさんの「全て同じ条件でTwitterとかFacebookも〜」と言うのは、webフォントに変換してですよね?
      それなら問題ないですが、そのまま使う場合は、hoverで背景色を変えるためには、ロゴ自体に背景があるとマズイんです。

      全体的な問題点としては、font awesomeとその他で若干挙動が違うと言うのと、アイコンフォントを作る時に元の画像のサイズが違う(?)と言う所にあるかと思います。仮に、これらサイズを同じで作って、そこで背景がはみ出したとしても全体的に統一してはみ出すので、微調整が不可能でもそれはそれでデザインかな?と錯覚させることはできると思います(笑)
      逆に正しく表示できてるのがはてブとかなので、むしろfont awesomeの仕様に問題があるんじゃないかと思ってたりもします(おそらくfirefoxとの相性、chromeは特に問題なさそうに思います)。
      なので、元のサイズが同じものを同じようにして全部作ってしまえば仕様が整うので、cssでのスタイルも楽になると思います。

      あるいは、背景色+ロゴのものをもう一段作って、hover時に縦移動させるという事もできますが・・・

      ■■■■■■■ ← 通常表示はこちら
      □□□□□□□ ← hover時にこちらに切り替え

      どちらも1枚の画像に入れておきます。

      サンプルでやってることのメリットは、liに対してborder-radius等を入れてたりしますが、これは任意にできる点です。真四角もできれば円もできる。なんならひし形も可能と言う所でしょうか。カスタマイズやデザインの幅が広がります。
      また、liのサイズを調整して文字を内蔵することもできます。これはスクエア型にしてもできますが、スクエア型にした場合、ロゴの部分は白とかになるので、SNSカラー以外に白でできる何かしらをアイコンの裏に入れるための要素が必要になります。ここらが猥雑になる点です。

      別件でevernoteのロゴもアップしておきました。cssスプライト用には入れてません。あれはfollowボタン用なので。

      ついでにサンプルに、サークル、ダイヤモンド(ノーマル、タイプ2)を追加しました。

    • #40466 返信
      アバター画像わいひら
      キーマスター

      わいひらさんの「全て同じ条件でTwitterとかFacebookも?」と言うのは、webフォントに変換してですよね?

      そうです。全部同じ大きさ、作り方で作ってアイコンフォントに変換します。

      サンプルでやってることのメリットは、liに対してborder-radius等を入れてたりしますが、これは任意にできる点です。

      これは確かにそうなんですよね。後からの加工のしやすさは、断然こっちですよね。実際にシェアボタンは、似たような感じなんで、どんな形でもしやすかったですし。

      うーん、ここら辺はかなり悩みどころです。

    • #40467 返信
      アバター画像わいひら
      キーマスター

      というか、hidekichiさんはSVGファイルを、どんなソフトでどのように作成されたんですか?
      よかったら教えてください。

    • #40468 返信
      Hidekichi
      ゲスト

      inkscapeで、epsを読み込んでサイズ調整と、後はまぁ結合しないといけないパスはし直しました。
      イラストレーターがあったらすぐにできる作業も、かなりめんどくて1時間ぐらいかかりました(笑)

      ロゴ名 eps(あるいはvector image)あたりで検索するとそのまんま出てきたり、たいていのロゴは運営側が公開してます。それをダウンロードしてきてロゴ自体を加工せずに調整するだけです。
      push7はわいひらさんのヤツです(笑)
      簡単なロゴなので1から作ろうと思ったんですが、それすら面倒だったので、あっそういやあるやんと思い出しました。

      例として、twitterの場合、
      twitter logo eps でgoogle検索 → ブランド資産 | About – Twitter → ロゴファイルのダウンロード → epsゲット → (解凍して)brand guideline logos/TwitterLogo_white.eps → はい、いただきって感じです。

    • #40469 返信
      Hidekichi
      ゲスト

      ついでに、背景を入れたいわゆるスクエア型もpushしておきました。
      アドレスはこちら

      真四角なので、これの場合は、webフォントに変換後、liのoverflow:hiddenと、border-radiusで設定する必要がありそうです。
      お試しに、色々とテストしてみる必要はありそうです。

      ひとまず、ロゴだけのsvgでロゴサイズを確認してもらって、もう少し大きくしたほうが良いかどうかなどを決めてから背景ありのsvgにした方が良いかなぁとは思ったんですけれども、テスト環境も必要だろうということで、早速作りました。

      ロゴで背景を抜き取るのが、手間な奴がいくつかありまして(笑)
      Youtubeとか、youtubeとか(笑)

    • #40505 返信
      アバター画像わいひら
      キーマスター

      #40469
      おおー!すごい!
      hidekichiさんて、プログラムだけではなく、こういったことも素早くできてしまうんですね。
      ところで、Flickrと、Instagramは以下のように作ってしまうということは可能でしょうか。(黒色が色がつく部分です)


      それとも、何か不都合が出るからそのようになっているのでしょうか。

    • #40512 返信
      Hidekichi
      ゲスト

      多分それらしいものをver2として追加しました。

      > プログラムだけではなく

      実はこっちが本道で、プログラムは何故か勉強したわけでもないのになんとなしにわかる感じです(笑)
      いや、それらの中間にいてどっちつかずという感じでしょうか(笑)

    • #40533 返信
      アバター画像わいひら
      キーマスター

      すいません、僕の描いた絵が紛らわしかったですね。
      以下の白色の部分と透明な部分を反転したものの事を言いたかったのでした;
      https://github.com/hidekichi/simplicity-1/blob/master/sns%20logo%20svg/Flickr_logo_2.svg
      https://github.com/hidekichi/simplicity-1/blob/master/sns%20logo%20svg/Instagram_logo_2.svg

      実はこっちが本道

      ええっ!てっきり、本業はプログラマの方なのだと思っていました。
      どっちつかずではなくて、どっちともいけるのではないかと思います。

    • #40545 返信
      Hidekichi
      ゲスト

      こちらにそれらしいのをpushしておきました。

      前回同様、SNS名_logo_2_invert.svgとなってます。

    • #40550 返信
      アバター画像わいひら
      キーマスター

      ありがとうございます!
      とりあえず、hidekichiさんの作ってくださったスクエア型でアイコンフォントを作成して、フォローボタンに適用してみたいと思います。

    • #40589 返信
      アバター画像わいひら
      キーマスター

      アイコンフォント化して、フォローボタンにしてみました。
      https://github.com/yhira/simplicity/tree/sns_follow

      ただ、そうするとアイコンフォントの下の部分が切れてしまって、border-radiusとかがおかしくなってしまうようです。

      背景色を黒い色にするとこんな感じです。

      hidekichiさん、これを解消する何か良い方法とかをご存知でしょうか。

    • #40591 返信
      Hidekichi
      ゲスト

      リンク先がまだ無いようなので想像で答えると、htmlの構造が同じなら、span(と、fontまわり)のサイズがliよりも小さいのでそのまま表示されているようです。

      対象がwebfontなら、line-heightが足りないとか、そもそものfont-sizeが足りてないように思います。
      line-height: 1;にしておいて、font-sizeをもう少し大きくするとかはどうでしょうか。liのサイズよりはみ出せばliのoverflow: hiddenが効くかと思います。

    • #40595 返信
      アバター画像わいひら
      キーマスター

      あれ?GitHubからダウンロードできませんでしたか?
      僕はダウンロードできたんですけど、まだ良くGitHubのことがよくわかってないので、ちゃんとなっていないのかも。

      でもとりあえず、テストサーバに適用してCSSなどは見れるようにしてみました。
      http://simplicity.wp.xdomain.jp/

    • #40600 返信
      Hidekichi
      ゲスト

      テストページを見て、既に問題なさそうでしたが、spanよりもliにスタイルしたほうが良いかも知れません。
      機能的なものを別にするという意味合いですけれども、liが背景・サイズを担当していて、aはその色、spanはフォントの表示と言う具合です。

      ul.snsp li {
          display: inline-block;
          margin-right: 5px;
          width: 33px;
          height: 33px;
          overflow: hidden;
          border-radius: 4px;
          background-color: #fff;
          /*border: 1px solid #fff;*/
      }
      
      ul.snsp li a {
          color: #666;
          text-decoration: none;
          display: block;
          width: 100%;
          height: 100%;
      }
      
      ul.snsp li a span {
          font-size: 33px;
      }

      これらに合わせて、例えば、

      li {
        position: relative;
      }
      span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
      }

      これらも入れておくと、例えばliをborder-radiusでサークルにした場合などに、spanのfont-sizeをはみ出さない程度の40pxぐらいまではサイズアップできます。

      更にものは考えようですが、liの背景色をグラデーションにして、

      li {
        background: -webkit-radial-gradient(center ellipse, #ffffff 60%, #000000 100%);
        background: radial-gradient(ellipse at center, #ffffff 60%, #000000 100%);
      }

      (サンプル:グラデーション)こんな感じにしておくとborder-radiusと背景の境界が暗くなるので、背景が暗い場合にコーナーがギザギザになりません。明るい背景の場合も大丈夫かと思います。


      上記radial-gradientを入れて、transformでセンターよせしているやつのFirefoxでの見た目ですがどうでしょうか?

    • #40601 返信
      Hidekichi
      ゲスト

      chromeでも試してみましたが、chromeの場合、position:absoluteでliのborder-radiusが効かないようです。
      なので、最初のliで背景をスタイルするcssと、背景にグラデーション入れるだけで良いかも知れません。

    • #40605 返信
      Hidekichi
      ゲスト

      まぁこれでも、デベロッパーツールのiPadとかで見ると微妙な所がありますが。
      spanの方にfont-size: 34pxとか入れておくのが良いですかね。ただ、どうしてもspanに背景が入っているために、それの微調整が効かない場面がありそうです。
      firefoxは概ね問題ないですが、chrome側に前レスでのcssでは問題が出てくるようです。

    • #40608 返信
      Hidekichi
      ゲスト

      Chromeで色々と試してみた所、aタグの存在が問題っぽいです。例えば、

      ul.snsp li a {
          color: #666;
          text-decoration: none;
          width: 101%;
          height: 101%;
          display: block;
          background: radial-gradient(ellipse at center, #ffffff 60%, #000000 100%);
      }

      こんな感じでaタグに背景も入れてしまう感じで、見た目は解決できそうです。

    • #40615 返信
      Hidekichi
      ゲスト

      背景のサンプルグラデーションをアップデートしました。
      PCのfirefox、chromeでは、liでもaでも良い感じでしたが、iPad等のモバイルデバイスでどう見えるかが検証してみないとわかりません。

      まとめ。

      ul.snsp li {
          display: inline-block;
          margin-right: 5px;
          width: 33px;
          height: 33px;
          overflow: hidden;
          border-radius: 4px;
          background-color: #fff;
          /* A */
      }
      
      ul.snsp li a {
          color: #666;
          text-decoration: none;
          display: block;
          width: 100%;
          height: 100%;
          /* B */
      }
      
      ul.snsp li a span {
          font-size: 33px;
      }

      A、Bいずれかに、以下を追加。
      理由としては、border-radiusのギザギザをより回避するためにはliの背景が白(明るい色)では、アンチエイリアス自体が白っぽくなるため。中央付近を白にした放射状グラデーションで外側を暗くするのが目的。

      background: -webkit-radial-gradient(circle cover, #fff 50%, #000 100%);	
      background: -moz-radial-gradient(circle cover, #fff 50%, #000 100%);
      background: radial-gradient(#fff 50%, #000 100%);


      どちらもPCの見た感じ。

    • #40619 返信
      アバター画像わいひら
      キーマスター

      hidekichiさんのコード通りに修正してみました。
      http://simplicity.wp.xdomain.jp/
      グラデーションの使い方が素晴らしですね。僕には出てこない発想でした。
      また、アイコンフォントが読み込まれる前に、グラデーションのボタン部分が綺麗に表示されるのも良いですね。
      アドバイスありがとうございます!

    • #40638 返信
      アバター画像わいひら
      キーマスター

      それにしても、どうしてもフォローボタンの下が1pxほど消えてしまうのはなんでなんでしょう。
      色付きにすると、黒いのがはみ出してしまいますね;

      これをまず何とかしないことにはと、上の書き込みの一部を削除しておきました。

    • #40648 返信
      Hidekichi
      ゲスト

      ご指定のものアップデートしました。
      Pinterestもおそらくこんな感じで良いのではないでしょうか。

      followボタンの件については、モバイル端末でどう見えるのかをどなたかに確認してもらいたい所ですね。スマホではどうせ非表示ですからヘッダの部分は良いとして、何かしら記事下あたりにウィジェット入れて、背景黒くしておくとかが必要かも知れません。

      iPadが問題です。単に携帯のエミュレーターで見た時に、サイズが小さくなってたりしてにじんでるだけなら良いんですが、iOSの事なので、実際におかしな表示になっているとも限りません。

      実際に計測したわけではないんですけれども、#40427で書いたように、svgをpngのスプライトにした場合2.5KBなんです。

      これをdata URIスキームにしてcssに埋め込んだ場合どれぐらいのサイズになるかにもよりますが、場合によってはより高速に使えるかも知れません。cssになるのでキャッシュとしても問題ないですし。一段落したらここらもテストしてみたい所です。

    • #40651 返信
      Hidekichi
      ゲスト

      色付きのものに関して

      今見た所、貼ってもらった画像のようには見えてないので、何かしら手を入れられたのかも知れませんが、うちでは特に画像ほどはみ出てる感じはしませんけれども、#40608にあるように、若干aを大きくしてはどうでしょうか?
      色情報を入れないようにすればaのサイズはクリックできる範囲でしかありませんから、多少大きくなっても問題ないと思います。

      またaタグに色を入れずにspanに色を入れるほうが良いのではないかと思ったりもします。
      カスタマイズする場合にも、対象は何でどうしたいかを考えると、アイコンの色を変えたいと言う事になったりすると思うので(#666とか)、spanの色を変えても変わらないと言うトピックが立つ恐れが(笑)
      なので、aはもちろん色を付けても良いわけですが、なるべく対象になる部分に色情報をもたせたほうが後々楽かと思います。

      <a href="#">simplicityのダウンロード</a>

      こういうサイドバーでのリンクの使い方で、aをボタン風にしたとして、aしか触るところがないのでカスタマイズする人もわかると思うんですけれども、

      <a href="#">
        <div class="btn download">simplicityのダウンロード</div>
      </a>

      こうなってたら、まさかaにボタンのスタイル情報があるとはパッと思いませんしね。普通は.btnなり、.downloadあたりに何かしらスタイルしてあると思うじゃないですか。まぁ、これぐらいだったら普通は気がつくと思いますけれども(笑)

      ここまで書いて気が付きましたが、style.cssの2468行目でline-heightとfont-sizeが消されてないので、2529行目の(おそらく新しく追加した)プロパティに継承されているようです。特別原因ぽくはないと思うんですが、それらしいものは排除していく感じで。

      ul.snsp li a {
          color: #666; /*これを入れずに*/
          text-decoration: none;
          display: block;
          width: 101%;
          height: 101%;
      }

      のみで大丈夫かと思います。で、前レスの色については、

      ul.snsp li a span {
          font-size: 33px;
          color: #666; /*ここで入れておく*/
      }
      
      ul.snsp li a span:hover {
        color: #55acee; /*hoverで#666を上書き*/
      }

      こういう感じでしょうか。

    • #40655 返信
      Hidekichi
      ゲスト

      リンク先書くの忘れてた

      ここ
      sns logo svg
      sns logo svg invert

      に、それぞれfacebook、google+はサイズ修正のみとpinterestはpinterest_logo_2.svgなどとして別物で入れておきました。pinterest公式によると、ロゴマークは「手を入れないこと」とありますが、まぁ他所でも丸を外してる所があるので問題ないかなぁと。

    • #40658 返信
      Hidekichi
      ゲスト
      [class^="icon-"], [class*=" icon-"] {
        /*line-height: 1;*/
        line-height: 1.005;
      }

      こんな感じでどうでしょう?
      これでもダメなら、背景付きは止めて、背景無しのアイコンでやる方が建設的だと思います。
      画像ならより簡単にセンタリングはできるはずです。

      一応サンプル: SVGをimgタグで直接読み込む

    • #40668 返信
      Hidekichi
      ゲスト

      さっきチラリと見てみたら、SVGのいくつかがファイルサイズがおかしかったので、作りなおしました。

    • #40670 返信
      Hidekichi
      ゲスト

      svgのサイズが正常になったので、背景画像としてみ込むのもサンプルとして出しておきます。

      サンプル: SVGをbackgroundで読み込む | codepen

      しかしこれよりも確実に速いのは、cssスプライトです。

    • #40691 返信
      アバター画像わいひら
      キーマスター

      ありがとうございます。
      すいません、まだ読んでおられないかなと、書き込みを削除してしまいました;

      CSSを試してみたんですが、うまくいかないようです。
      アイコンフォント化すると下が切れてしまうのだろうか。
      できれば、実装方法は統一したいので、もう少し粘ってみようと思います。

    • #40699 返信
      アバター画像わいひら
      キーマスター

      アイコンフォントの方は何とかなりそうです。
      なので、またSVGの微調整をお願いしてよろしいでしょうか?

    • #40701 返信
      Hidekichi
      ゲスト

      > アイコンフォント化すると下が切れてしまうのだろうか。

      icomoonを見てきましたが登録して書き出すときの設定で

      em square height(power of 2)

      という値が1024とかだとすると32^2だと思うんですよ。
      2の累乗(?)と言う意味なら、1024は2^10なので。1emの時のsquareで表示した時の高さということなら、32 !!

      ということで僕は気がついてしまった。32pxに全体を設定するのが正しいのではなかろうかと。

      ul.snsp li {
          display: inline-block;
          margin-right: 5px;
          width: 32px;  /* 33 → 32 */
          height: 32px;  /* 33 → 32 */
          overflow: hidden;
          border-radius: 4px;
      }
      ul.snsp li a {
          color: #666;
          text-decoration: none;
          display: block;
          width: 100%;
          height: 100%;
      }
      ul.snsp li a span {
          font-size: 2rem;  /* 2rem から場合によって33px */
          background: -webkit-radial-gradient(circle cover, #fff 50%, #000 100%);
          background: -moz-radial-gradient(circle cover, #fff 50%, #000 100%);
          background: radial-gradient(#fff 50%, #000 100%); /* 50%→70%推奨 */
          /* background-color: #fff; */
      }

      そしてこれでどうだろうかと。ブラウザ表示を120%に拡大したら若干左側に1pxのズレっぽいのがでますが、その場合は縦が1px足りなくなるのを逆手に取って、spanのfont-sizeを33pxにしてはどうかと思ったりも(本来は32pxなのでデフォルトのfont-sizeの2倍で2remにしてあります)。
      またspanの背景はbackground-color: #fff;だとしても大きく目立たないのではなかろうかと思います。

      このコーナーの僅かな白のジャギー(アンチエイリアスかと思う)も気になるという場合は、spanでradial-gradient(円形グラデーション)を利用すると完全に無くなります。今度は逆に白い背景の場合に少しコーナーに黒いのが見えますが、これは気にならないかと思います。

      また上記は50%から100%の位置にかけて黒にしていくグラデーションですが、instagram等の他よりちょっと大きめと言うか外側まで表示できるアイコンだとわずかに黒グラデが見えていたので、

      background: radial-gradient(#fff 70%, #000 100%);

      これぐらいにしたらグラデーションが見えなくなるかと思います。
      これでどうでしょうか!?

    • #40736 返信
      アバター画像わいひら
      キーマスター

      SVGを細工して、新たにアイコンフォントを作成したら、背景色がはみ出す問題は解決できたと思います。多分。
      次のバージョンで、適用したいと思います。

    • #40825 返信
      Hidekichi
      ゲスト

      instagramが新しいブランドロゴを出したので、svgを作りました。

      こちらのInstagram_logo_3_2016.svgがそれです。

      背景ありの方はまだ作ってません。と言うか、背景アリだとするとどのようにしようか考えますね。中央のレンズ部分あたりだけを残すとアレだしで。

    • #40845 返信
      アバター画像わいひら
      キーマスター

      ありがとうございます!
      それにしても、せっかくフォローボタンのインスタグラムのロゴをいい感じに表示できた途端に変更…。
      それにしても、反転させた場合の表示方法が難しいですね;
      うーん、この微妙なカーブ…。

      とりあえず、Font Awesomeは、このロゴをどのようにアイコンフォント化するんだろう。
      それを見てから、どうするか考えたいと思います。

    • #40998 返信
      三日坊主
      ゲスト

      Simplicityバージョンアップに際して、このトピックのお話を拝見しております。

      hidekichiさん、わいひらさん、お二人の熱意で私たちはこんなにも簡単に使わせてもらっているんだというのを、
      改めて実感しました。

      また、hidekichiさんがプログラマーではなく、こっちが本道なんて、さらっとおっしゃているのを伺って、
      わいひらさんと同じぐらいの衝動を受けました(笑)

      SNSのロゴを一つ手直しするだけで、ご両人がどれほどの時間を注いでいらっしゃるかを見まして
      改めて感謝いたします。

      私たちは、「あっ、ここにあれがあればいいのにな」とか、ダッシュボードからちょこちょこと設定をするくらいですが、
      ロゴマーク一つを綺麗に表示するために、こんなにもややこしいことしないといけないんですね(驚き)

      改めて感謝とお礼を言いたくて書きました。

      私もようやく画面が真っ白になる事にも対処できるようになりましたし(笑)
      つい先日は、プラグインの干渉でしょうか、どうしてもサイトトップにインフォメーションを表示したくて、
      あれこれしていたら、自分の見る分はキャッシュが残っていたんんでしょう、見えているのですが、
      訪問者からは、無限ループのような状態になりサイトが読み込めないとの状態を起こしてみたりと。

      そんな時でも、このフォーラムや、「Simplicity ◯◯◯」と、ネット上で検索すれば、
      たくさんの方が解決方法を示してくれています。

      これも、使用されている方がたくさんいて、それを維持向上させようというhidekichiさんの
      ような方がいらっしゃるからだと改めて感謝いたしました。

      今後も素敵なテーマとして世界に発信していただければと思っています。

      WPを最初にインストールした時に、いくつかテーマが入ってますが、あれがSimplicityだったら
      やったぜ!って、私は思うんですけどね(笑)

      わいひらさん、お体無理せずライフワークを続けてください。
      次のバージョンアップをお待ちしております。

      いつも、ありがとうございます。

    • #41008 返信
      アバター画像わいひら
      キーマスター

      このSNSのボタンに関しては、いろいろとややこしかったです。
      普通にやろうとすればはみ出すし、反転させると思い通りの表示にならないしで。
      普段はもう少しすんなりと解決はできるんですけど。
      それでも、何とかできたのは、hidekichiさんがロゴを作ってくれたからです。
      僕が1人で、ロゴを作るところからやっていたら、多分手をつけていなかったと思います。

      Simplicityは残念ながら、Wordpressが考えるテーマの域を逸脱しているため、Wordpressディレクトリへの登録すらできなかったりします;
      自作テーマをWordpress公式ディレクトリに登録するつもりなら作成時やってはいけないこと
      僕も開発後、結構してから気づいたんですが(笑)

      これからも、なるべく無理をしないで、続けていければと思います。
      ありがとうございます。

    • #41009 返信
      三日坊主
      ゲスト

      >Simplicityは残念ながら、Wordpressが考えるテーマの域を逸脱しているため、Wordpressディレクトリへの登録すらできなかったりします

      なるほど… でも、わいひらさんのSimplicityは世界一ですよ。少なくとも私はそう思います。わいひらさんの制作に対する熱意と、ライフワークへの姿勢が共感できるから、おそらくhidekichiさんも、あれこれサポートされていると感じています。逆にワールドプレスの方が歩み寄って欲しいと思いますね。

      >※おそらく、当然レビューアーと英語でやりとりしなければならないのも中学英語レベル僕にはかなりの障壁

      私も中学生レベルなんで、プログラムファイルを見ただけで嫌になります。そこから先に進まない…

      >ということで、Simplicityは、これまで通り「野良テーマ」で配布していきたいと思います。

      いやいや、きっとSimplicityが完成形を迎えた時、次の作成テーマに「軽い目のSimplicity」を作っていただいてもいいのではないかと思います。そうすることによって、わいひらさんのライフワークが充実したものになれば、私たちも嬉しいですし、その発展先を見届けたい思いもあります。
      私たちが望む形を提供してくださっているからこそ、素人でも使いやすい。わかりやすいんだと思います。それと、hidekichiさんの優しさにも感謝です。

      今後も、これまでのスキルを活かした未来を目指していただければと思いますし、その先にWPの歴史に一石を投じることができれば素敵だなと、勝手に思っています(笑)

      今後もよろしくお願いいたしますm(_ _)m

    • #41011 返信
      アバター画像わいひら
      キーマスター

      Simplicityはそこまで大層なものではないです(笑)
      でもありがとうございます。
      こちらこそよろしくお願いいたします。

    • #41065 返信
      Hidekichi
      ゲスト

      font-awesomeにinstagramの新しいアイコンが登録された模様です。
      また、Simplicityには直接関係ないかも知れませんが、これまでのCDNが何やらちょっと変わった模様。

      いや、CDN自体は動作してるっぽいので、何かしら新しい方法が導入されたのかな。

    • #41072 返信
      アバター画像わいひら
      キーマスター

      Font Awesomeは僕も先程見てました。そのまんまでしたね。
      CDNはどう変わったのかまでは見てませんが。

      新しいロゴで、こういうのは作れますか?

      ※黒色の部分が色がつく部分。白色が透過色。

      これでやってみようかと思っています。(※実際にボタンを作ってみてイマイチだったら没にする可能性もあります。)

    • #41909 返信
      Hidekichi
      ゲスト

      レスもらってたの全然気が付きませんでした。

      ということで早速作ってみました。
      該当ロゴ

      ついでに色々見て良さそうなサービスがあったのでついでに報告しておきます。
      fontelloを使ってfont-awesomeと互換のLINEのアイコンを作成する | cupOF

      icomoonの設定の問題とかもあるかと思うので、font awesomeと互換しているならこれもありかと。
      一度テストがてらお試し下さい。

    • #41922 返信
      アバター画像わいひら
      キーマスター

      ありがとうございます!
      早速試してみようと思います。

      Fontelloで、こういったことができるとは知りませんでした。便利そうですねこのサービスも。

    • #41927 返信
      アバター画像わいひら
      キーマスター

      そのままの大きさでアイコン化すると以下のように、

      少し大きくすると以下のようになりました。

      やっぱり、このデザインスクエア型で利用するのにはなかなか難しいですね。

    • #41932 返信
      アバター画像わいひら
      キーマスター

      位置を調節したら、ちょっとはマシになったけど、使用するとInstagramから怒られてしまうかもしれません(デザイン変更とみなされて)。

      やっぱり、使うとしたら以下を反転させるしかないのかも。
      http://fontawesome.io/icon/instagram/

    • #41937 返信
      Hidekichi
      ゲスト

      白色部分の面積が大きいので、feedlyぐらいのサイズ感で表示するぐらいでないとボッテリしますね。

      普通のを単純に反転してみました。
      リンク

    • #41984 返信
      アバター画像わいひら
      キーマスター

      確かにぼってりしますよね。
      他のサイトが、新しいロゴ使うようになってきたら、こっそりと#41937のやつに入れ替えようと思います。
      ありがとうございます。

47件の返信スレッドを表示中
返信先: Simplicityで利用しているSNSロゴをSVGで作った
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)