2015年11月7日土曜日

【HTML】【CSS】コピペで使えるサンプル集-引用部分編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは他サイトから文章を引用した時に使う引用部分(brockquote)のデザインについて
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください


関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)
【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)
【HTML】【CSS】コピペで使えるサンプル集-ボタン編
【HTML】【CSS】コピペで使えるサンプル集-背景編



────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

引用部分サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────


「引用部分①」
画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを
いろいろデザインする




引用部分②
ここに引用する文章を記載してください。



Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.
tympanus




【HTML】【CSS】コピペで使えるサンプル集-背景編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここではホームページやブログのデザインに大きく営業する背景や模様について
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください


関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)
【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)
【HTML】【CSS】コピペで使えるサンプル集-ボタン編
【HTML】【CSS】コピペで使えるサンプル集-引用部分編


────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

背景サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

背景・模様①



背景・模様②



背景・模様③



2015年11月2日月曜日

【WEB】マウスホバーエフェクトの導入

今回はGitHubに公開されているcssライブラリ(Hover.cssファイル)を導入することで、
手軽にマウスがのった時のボタンやリンクの動作(ホバーエフェクト)を設定する方法をご紹介いたします。

しばらくAndroidアプリ開発からは離れHTMLやCSSを利用したWEB開発の方法を紹介していますが、
これも後々アプリ開発に繋がると思っていますので今は情報をまとめておきたいと思います(^^;


Hover.cssの導入手順


導入手順は以下のとおりです。
ブログなどに導入する場合は<HEAD>タグが編集できる必要があります。

①Hover.cssをダウンロードします。
②ダウンロードは以下のページにアクセスして「Download ZIP」から行います。
「Hover-master.zip」というファイルがダウンロードされますので、
 中の「css」フォルダにある「Hover.css」ファイルをコピーしておきます。
④「Hover.css」をWEB上に公開し、以下のようにHEADタグ内に記載します。
<head>
    <link href="css/hover-min.css" rel="stylesheet">
</head>



Demo


主な動作としては、開発者の方がDemo用のページを用意していますので、まずはそちらをご覧ください。

http://ianlunn.github.io/Hover/


Demoではボタンのみの動作を紹介していましたが、これはリンクでも画像でも利用可能です。



Pulse




ボタン以外にも「Hover.css」を有効活用できる効果的な利用方法を紹介していきたいと思います。




テキスト編


ほたるの光 まどの雪
書(ふみ)よむつき日 かさねつつ
いつしか年も すぎのとを
あけてぞけさは わかれゆく

ほたるの光
まどの雪
書(ふみ)よむつき日
かさねつつ
いつしか年も
すぎのとを
あけてぞけさは
わかれゆく


画像編






















随時更新予定…

2015年11月1日日曜日

【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは以前紹介した見出し編(シンプル)に少し多めにCSSを使って、少し凝ったデザインの見出しをまとめていきます。


CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しています。
画像は使用しておりません。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・見出しのタイトルは書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください


関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)
【HTML】【CSS】コピペで使えるサンプル集-ボタン編
【HTML】【CSS】コピペで使えるサンプル集-背景編
【HTML】【CSS】コピペで使えるサンプル集-引用部分編



────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

見出しサンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

見出し①




見出し②




見出し③





2015年10月29日木曜日

【HTML】【CSS】コピペで使えるサンプル集-ボタン編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

第二弾は「ボタン」編として一般的に使用されているようなものをまとめていきます。
コピペだけで使用可能なものだけを紹介しています。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・ボタンのキャプションはご使用時には書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください

関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)
【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)
【HTML】【CSS】コピペで使えるサンプル集-背景編



────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

ボタン サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

※マウスを載せた時の動作は【WEB】マウスホバーエフェクトの導入の方法を利用しています。














2015年10月10日土曜日

【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは見出し編として一般的にブログ等で使用されているシンプルな見出しをまとめてみましたので、
気に入ったものがあればご利用ください(^o^)/

CSSがわかる方は色や大きさも好きにカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しています。
画像は使用しておりません。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・見出しのタイトルは書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください


関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)
【HTML】【CSS】コピペで使えるサンプル集-ボタン編
【HTML】【CSS】コピペで使えるサンプル集-背景編



────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

見出しサンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

見出し①



見出し②




見出し③





2015年9月4日金曜日

【写真販売】PIXTAでの写真販売

今日はPIXTAで販売している写真について紹介していきます。

家にデジカメで撮った良い風景の写真やお気に入りの写真とかがあれば
ぜひ販売してもらいたいと思いますので、
今回はPIXTAのサイトについて説明していきたいと思います。

❏PIXTAについて

まずPIXTAのサイトについて概要を説明させていただくと、

・PIXTA(ピクスタ)はプロアマ問わず、誰でも写真・イラスト・動画の販売が可能
・作品が購入されれば広告やWEBサイトなどの世界中のメディアで使用されます


☆写真は携帯カメラで撮ったものではなく、ある程度画質の良いデジカメで撮ったものなら
販売可能なようです。

❏販売方法と料金


作品を販売するためにも、まずはPIXTAでの作品の販売方法を知っておきたいと思います。
作品は単品購入定額購入があります。









単品購入は1点ずつの購入となり、画質に応じて料金が変わります。
画質を落とせば少額の料金で購入できますが、このサイトを利用するような方は
ある程度良い画質のものを購入しそうな気がしてます。




定額購入は25DL/日や250DL/月でダウンロードが可能な定額制の購入となり、
大量に画像が必要な場合には便利になる制度かと思いますが少しお高めです(^^;




定額購入は25DL/日や250DL/月でダウンロードが可能な定額制の購入となり、大量に画像が必要な場合には便利になる制度かと思いますが少しお高めです(^^;


❏写真を販売するためには

これはPIXTA側で写真販売ガイドがありますので、こちらをご参照ください。

写真・イラスト・動画販売ガイド


簡単に概要だけ説明しますと、

①会員登録
②入門テスト
③写真をアップして審査
④審査が通れば販売スタート
⑤購入されればクレジット獲得

ここでは③が少し手間取ることになるかと思います。
なぜならすでに販売された写真と似た写真は審査を通りにくいため、
良い写真でも先に似た写真があればなかなか販売まで辿りつけないことになります。
また、画質もある程度良くサイズを調整した上でアップする必要があります。
ここは根気よくやる必要がありますね(゚Д゚)

④で運良く審査がとおり、⑤で販売され購入されるとクレジットが獲得できます。
 10クレジット以上貯まると[1クレジット=108円]換算で現金に交換できます。




❏作品紹介

最後に私が販売している写真を一応紹介しておきます。
2015/9/3時点で販売されている作品は以下になります。

■写真5枚






■イラスト1枚
ばつx9
■動画1つ

ハート背景②


まだあまり販売・購入されていませんが、
良い作品ができあがったら販売していきたいなと思ってます。

自分の作品がどこかで使われると考えてみるのも楽しみ方の一つかと思いますので、
もし自分も販売してみたいと思った方はPIXTAを利用してみてはいかがでしょうか(^^)

2015年8月31日月曜日

【アプリ開発】アプリのショートカットを作成

しばらくぶりの更新となってしまいましたが、
アプリのショートカットの作成方法について書いていきたいと思います。
更新が不定期ですいませんm(_ _)m


データフォルダアプリでもアプリのショートカットを作成する方法を用いて対応していますので、
今回その点について関数にまとめたりしたのでサンプルコードとして紹介しておきたいと思います。

❏パーミッション


必要なパーミッションは、アプリからショートカットを作成するためのパーミッションを追加します。
    <uses-permission android:name="com.android.launcher.permission.INSTALL_SHORTCUT"></uses-permission>

もしアプリからショートカットを削除する場合には、次のパーミッションも追加しておきます。
    <uses-permission android:name="com.android.launcher.permission.UNINSTALL_SHORTCUT"></uses-permission>


❏サンプルコード

このコードは、ギャラリーからintentで画像を取得して、取得した画像でショートカット作成を行うサンプルコードになります。
 @Override
 protected void onActivityResult(int requestCode, int resultCode, Intent data)
 {
  if(requestCode == REQUEST_GALLERY && resultCode == RESULT_OK)
  {
   try {
    InputStream in = getContentResolver().openInputStream(data.getData());
    Bitmap img = BitmapFactory.decodeStream(in);
    in.close();
    // 選択した画像をアイコン(ショートカット)として追加
    shortcutAdd(getString(R.string.app_name), img);
   } catch (Exception e) {
    e.printStackTrace();
   }
  }

 }

 /*********************************************************************
  * アイコン(ショートカット)の作成
  *********************************************************************/
 private void shortcutAdd(String name, Bitmap bmp)
 {
  // Delete Shortcut
  shortcutDel(name);

  // Intent to be send, when shortcut is pressed by user ("launched")
  Intent shortcutIntent = new Intent(Intent.ACTION_MAIN);
  shortcutIntent.setClassName(this, MainActivity.class.getName());

  Bitmap scaledBitmap = Bitmap.createScaledBitmap(bmp, 128, 128, true);

  // Decorate the shortcut
  Intent addIntent = new Intent();
  addIntent.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
  addIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, name);
  addIntent.putExtra(Intent.EXTRA_SHORTCUT_ICON, scaledBitmap);
  //addIntent.putExtra(Intent.EXTRA_SHORTCUT_ICON_RESOURCE, icon);

  // Inform launcher to create shortcut
  addIntent.setAction("com.android.launcher.action.INSTALL_SHORTCUT");
  sendBroadcast(addIntent);
 }

 /*********************************************************************
  * アイコン(ショートカット)の削除
  *********************************************************************/
 private void shortcutDel(String name)
 {
  // Intent to be send, when shortcut is pressed by user ("launched")
  Intent shortcutIntent = new Intent(Intent.ACTION_MAIN);
  shortcutIntent.setClassName(this, MainActivity.class.getName());

  // Decorate the shortcut
  Intent delIntent = new Intent();
  delIntent.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
  delIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, name);

  // Inform launcher to remove shortcut
  delIntent.setAction("com.android.launcher.action.UNINSTALL_SHORTCUT");
  sendBroadcast(delIntent);
 }

ショートカットの作成には"com.android.launcher.action.INSTALL_SHORTCUT"のIntentを
ブロードキャスト送信することで行います。
ブロードキャスト送信に渡すIntentには各情報をputExtraで渡して設定します。
Intent.EXTRA_SHORTCUT_INTENTには、作成するショートカットアイコンのclassを設定したIntentを渡します。
Intent.EXTRA_SHORTCUT_NAMEには、作成するショートカットの名前のStringを渡します。
Intent.EXTRA_SHORTCUT_ICONには、作成するショートカットアイコンのBitmapを渡します。
Intent.EXTRA_SHORTCUT_ICON_RESOURCEを使用すれば、リソース(Parcelable)を渡すことでも
作成するショートカットアイコンの設定が可能です。

Intent.EXTRA_SHORTCUT_ICONでBitmapを渡す際は、サイズが大きすぎると設定されないため、アイコンサイズを128x128位に設定しています。

ショートカットの削除する場合には"com.android.launcher.action.UNINSTALL_SHORTCUT"のIntentをブロードキャスト送信することで行います。

❏その他

今回のサンプルコードはショートカットのアイコンをギャラリーから選択して好きなアイコンに設定して作成できるものを
想定しています。

アプリのアイコンについて動的に変更させたいと思っていたのですが、
アプリのアイコンの指定はAndroidManifest.xmlで行われているため、アプリが動作している最中に
直接編集することはできないため、動的な変更は無理であることがわかりましたΣ(゚Д゚)
その代替案として、ショートカットを作成することで対応できる場合もあるかなと思います。