CSS/HTML/ホームページ作成

• [PR]
  
  • 2025/11/04 13:21
  • コメントをする
  http://bbjack.blog.shinobi.jp[PR]
  ×

  [PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

  
  
  • 2025/11/04 13:21
• もっと簡単に透明処理ができるか！？
  
  • CSS/HTML/ホームページ作成
  • 2012/08/17 10:31
  • コメントをする0
  http://bbjack.blog.shinobi.jp/css-html-%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E6%88%90/%E3%82%82%E3%81%A3%E3%81%A8%E7%B0%A1%E5%8D%98%E3%81%AB%E9%80%8F%E6%98%8E%E5%87%A6%E7%90%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%8B%EF%BC%81%EF%BC%9Fもっと簡単に透明処理ができるか！？
  　もっと簡単に透明処理ができる
  　
  　Inkscapeはもともと描くためのソフトなので
  　そんなこまごまと切り取ったりするのには向いていないらしく
  　
  　ＧＩＭＰを使用
  　http://www.gimp.org/
  　
  　まずは適当にネットから落としてきた左の写真。
  
  　黒い部分を透明処理して
  　グラデーションでもかけてみようか
  
  
  
  まずは起動
  「レイヤー」から「透明部分」⇒「アルファチャンネル」を追加して
  
  右端のツールバーからファジーを選択
  
  黒い部分を選択・削除すると
  
  
  あれれ！？
  近似値削除したから黒の部分と指板が混じって消えちゃった。
  証拠に
  
  
  
  う～ん、課題山積だな。
  
  参考サイト
  
  

  [0回]

  • CSS/HTML/ホームページ作成
  • 2012/08/17 10:31
  • 0
• リピート
  
  • CSS/HTML/ホームページ作成
  • 2012/08/09 15:55
  • コメントをする0
  http://bbjack.blog.shinobi.jp/css-html-%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E6%88%90/%E3%83%AA%E3%83%94%E3%83%BC%E3%83%88リピート
  最近、演奏のめっきり仕事がないので、家に引きこもっております。
  今日は比較的に涼しいですね～～
  
  あ～すずしい・・・
  
  というわけで今日はちょっとcss的な話を。
  （頭が痛くなる！？）
  サイトの背景をいじくるには若干cssをいじくらないといけません。
  
  まあ「おまじない」みたいなものなので、歴史を丸暗記するよりはるかに簡単です。
  たとえば
  

  ---

  <style type="text/css">
  <!--
  #LeftBlock {
  background-image:url('https://blog.cnobi.jp/v1/blog/user/5d9d85a119bd37034d9d42f63a152eae/1344034172');
  background-position:center top;
  background-repeat:repeat-x;
  background-color:#fff;
  }
  -->
  </style>
  

  ---

  <style type>　っていうのは「おまじないを始めるよ」といういみ
  #LeftBlock　っていうのはおまじないをかける場所
  background-image： 　ていうのはおまじないの呪文ですね。
  
  さて、こんかいはこういうものを用意しました。↓
  https://blog.cnobi.jp/v1/blog/user/5d9d85a119bd37034d9d42f63a152eae/1344494933
  
  みえるかな？10個重ねると
  
  
  
  これをＸ軸にずーっと重ねると
  
  
  どこかで見たような。ホームページの上の方にあるナビとかに使われてる背景ですね！
  
  これをおもじないをつかうと
  <style type="text/css">
  <!--
  #LeftBlock {
  background-image:url('https://blog.cnobi.jp/v1/blog/user/5d9d85a119bd37034d9d42f63a152eae/1344494933');
  background-repeat:repeat-x;
  }
  -->
  </style>
  たぶん、この記事の真上がオレンジグラデーションになります。
  ※ここで実際htmlエディターで書いてしまうと常に１番目の記事がオレンジグラデーションになるので
  実際は発動させません。
  
  background-repeat:repeat-x;
  
  をX軸だけでなくＹ軸も入れたら、記事全体が段付きグラデーションになります。
  
  あ、昨日の編集画像、もう一個足しておこう(≡^∇^≡)ﾆｬﾊﾊ
  
  

  
  

  [0回]

  • CSS/HTML/ホームページ作成
  • 2012/08/09 15:55
  • 0
• こうすりゃちょっとましに見える？
  
  • CSS/HTML/ホームページ作成
  • 2012/08/08 17:06
  • コメントをする0
  http://bbjack.blog.shinobi.jp/css-html-%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E6%88%90/%E3%81%93%E3%81%86%E3%81%99%E3%82%8A%E3%82%83%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%81%BE%E3%81%97%E3%81%AB%E8%A6%8B%E3%81%88%E3%82%8B%EF%BC%9Fこうすりゃちょっとましに見える？
  自分の写真を編集してみる。。。
  
  ①まず、適当に手持ちの写真から
  どん
  
  
  なんかスかした写真だな・・・
  
  ちなみにこの時点ですでに背景は削除
  
  ②次にメガネとヴァイオリンをそれぞれ切り取る。
  どどん
  
  
  ③楽器と自分にトレースをかける
  どどどん
  
  
  ④塗りつぶして、メガネも塗りつぶして合体！！
  
  
  なんかヤクザみたい
  
  ついでに
  
  
  こうすれば、顔見せなくていいじゃんねｗｗ
  シルエットみたいだし
  
  

  [1回]

  • CSS/HTML/ホームページ作成
  • 2012/08/08 17:06
  • 0
• 動画の貼り付けと投稿の違い！？
  
  • CSS/HTML/ホームページ作成
  • 2012/08/04 08:48
  • コメントをする0
  http://bbjack.blog.shinobi.jp/css-html-%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E6%88%90/%E5%8B%95%E7%94%BB%E3%81%AE%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%A8%E6%8A%95%E7%A8%BF%E3%81%AE%E9%81%95%E3%81%84%EF%BC%81%EF%BC%9F動画の貼り付けと投稿の違い！？
  インターネット上で動画を投稿するのって結構楽なのですが、
  
  メニュー欄とかに張り付ける場合は一応htmlを少しは理解してないと無理なんです。
  ｃｓｓはいらないですね
  
  でも、ほんとに少しでいいんですよ？
  
  たとえばYoutubeの動画を張り付けるなら
  

  1. 動画の上で右クリック
  2. 埋め込みコードをコピー<iframe>なんたらかんたら</iframe>
  3. 張り付けたいメニューや記事のhtml編集で張り付け

  
  とくに勉強しなくても、なんとなくhtml見て触っていればなんとなくわかってくる。
  でも多少のことならそれだけでいいんです
  
  たとえば以下をコピーしたら
  <iframe width="640" height="360" src="http://www.youtube.com/embed/-rtgQaQPH70?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
  
  多少サイズを変更して
  
  <iframe width="300" height="240" src="http://www.youtube.com/embed/-rtgQaQPH70?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
  
  ばん。
  
  こんなけです。
  
  
  
  
  小さくして画面中央に持っていきたかったら <center></center>ではさんで
  
  <center><iframe width="180" height="150" src="http://www.youtube.com/embed/-rtgQaQPH70?feature=player_embedded" frameborder="0" allowfullscreen></iframe></center>
  
  
  

  
  回り込ませるなら<iframe>のなかに align="right" をいれて

  
  
  
  こんなかんじかな？
  
  
  
  

  [0回]

  • CSS/HTML/ホームページ作成
  • 2012/08/04 08:48
  • 0
• やっとロゴの画像が決まった～
  
  • CSS/HTML/ホームページ作成
  • 2012/08/02 02:51
  • コメントをする0
  http://bbjack.blog.shinobi.jp/css-html-%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E6%88%90/%E3%82%84%E3%81%A3%E3%81%A8%E3%83%AD%E3%82%B4%E3%81%AE%E7%94%BB%E5%83%8F%E3%81%8C%E6%B1%BA%E3%81%BE%E3%81%A3%E3%81%9F%EF%BD%9Eやっとロゴの画像が決まった～
  やっとロゴの画像が決まった。
  野郎のブログで野郎の写真ばかりのロゴだとあれなので楽器だけの方向性で・・・
  
  バイオリンに黒のグラデーションを四方から挟み込み、
  黒背景に溶け込むようにして完成。
  
  でら楽だったｗｗ
  
  
  
  

  [0回]

  • CSS/HTML/ホームページ作成
  • 2012/08/02 02:51
  • 0