すげ～～いいサイト見つけちゃった。
CSSだけでこれだけカッコよくカスタマイズできるんだね。
知らなかった。
やばい。かっこよすぎる。
CSSのみで実装するキャプションエフェクト 20
http://www.nxworld.net/tips/css-only-caption-effect.html
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α
http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html
あとで時間があるときに試してみよう。
アメブロのプラグインは文字数制限があって半角3800文字以上は書き込めないようになっています。
で、これを有効に使いたい場合は極力、文字数を減らして入力する工夫が必要になってきます。
例えばプラグイン内に「このブログのオススメ記事」みたいな表示をしたい場合。
取りあえずこのブログの過去記事で実験してみます。
テーブルについて ブログにテーブルを挿入する
http://ameblo.jp/tesblo1/entry-11979076959.html
という記事へのリンクを表示させたい場合、
通常は
<a href="http://ameblo.jp/tesblo1/entry-11979076959.html" target="_blank">テーブルについて ブログにテーブルを挿入する</a>
このような記述になります。
で、どこか省略できるところは無いか？と見てみると...
同じ自分のブログ内ですのでURLの前半部分、
http://ameblo.jp
は省略出来るようです。
そして、
リンク先を別のタブ、あるいは別のウィンドウで開くという指定の
target="_blank"
の部分も省略しちゃいましょう。
そうするとどうなるか？
元
<a href="http://ameblo.jp/tesblo1/entry-11979076959.html" target="_blank">テーブルについて ブログにテーブルを挿入する</a>
省略後
<a href="/tesblo1/entry-11979076959.html">テーブルについて ブログにテーブルを挿入する</a>
となって、かなりスッキリしました。
実際に省略語の表記が正常かどうか試してみましょう。
↓
(省略されたタグでリンクが張られています)
テーブルについて ブログにテーブルを挿入する
ちゃんとリンクが張れているでしょうか？
ちなみに、注意点は、URLを省略する時には先頭の/を忘れないようにしましょう。
○
/tesblo1/entry-11979076959.html
×
tesblo1/entry-11979076959.html
で、これを有効に使いたい場合は極力、文字数を減らして入力する工夫が必要になってきます。
例えばプラグイン内に「このブログのオススメ記事」みたいな表示をしたい場合。
取りあえずこのブログの過去記事で実験してみます。
テーブルについて ブログにテーブルを挿入する
http://ameblo.jp/tesblo1/entry-11979076959.html
という記事へのリンクを表示させたい場合、
通常は
<a href="http://ameblo.jp/tesblo1/entry-11979076959.html" target="_blank">テーブルについて ブログにテーブルを挿入する</a>
このような記述になります。
で、どこか省略できるところは無いか？と見てみると...
同じ自分のブログ内ですのでURLの前半部分、
http://ameblo.jp
は省略出来るようです。
そして、
リンク先を別のタブ、あるいは別のウィンドウで開くという指定の
target="_blank"
の部分も省略しちゃいましょう。
そうするとどうなるか？
元
<a href="http://ameblo.jp/tesblo1/entry-11979076959.html" target="_blank">テーブルについて ブログにテーブルを挿入する</a>
省略後
<a href="/tesblo1/entry-11979076959.html">テーブルについて ブログにテーブルを挿入する</a>
となって、かなりスッキリしました。
実際に省略語の表記が正常かどうか試してみましょう。
↓
(省略されたタグでリンクが張られています)
テーブルについて ブログにテーブルを挿入する
ちゃんとリンクが張れているでしょうか？
ちなみに、注意点は、URLを省略する時には先頭の/を忘れないようにしましょう。
○
/tesblo1/entry-11979076959.html
×
tesblo1/entry-11979076959.html
引用タグ装飾テスト
たとえば、囲み枠の実験。
こちらを参照。
タイトル付き囲み枠を《20パターン》公開します！
http://ameblo.jp/grand-ii-daihyo/entry-12024544339.html
CSSに頼らなければ、スマホからでもある程度の装飾が反映するのではないか？
ちょっとやってみる。
記入
<div style="background:#ff9824; padding:5px 10px; border:2px solid #ff9824; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;"><div>タイトル</div></div><div style="background:#ffe5c7; padding:10px; border-right:2px solid #ff9824; border-bottom:2px solid #ff9824; border-left:2px solid #ff9824; border-radius:0px 0px 10px 10px;"><div>内容本文</div></div>
見え方
↓
・・・いける。OKだ。
やはり、CSSに頼らなければ、スマホからでもなんとかなるようだ。
blockquoteはどうだろうか。
デフォルトの状態だと、枠も何もない・・・
これは、blockquoteにも、タグで装飾を施すべきかもしれない。
しかも、スマホからだと左右の余白も一切ない無くて、
まったく、引用であることが確認できない。
う～～ん・・・。
“テスト
テスト
テスト
テスト
テスト
テスト
テスト
たとえば、囲み枠の実験。
こちらを参照。
タイトル付き囲み枠を《20パターン》公開します！
http://ameblo.jp/grand-ii-daihyo/entry-12024544339.html
CSSに頼らなければ、スマホからでもある程度の装飾が反映するのではないか？
ちょっとやってみる。
記入
<div style="background:#ff9824; padding:5px 10px; border:2px solid #ff9824; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;"><div>タイトル</div></div><div style="background:#ffe5c7; padding:10px; border-right:2px solid #ff9824; border-bottom:2px solid #ff9824; border-left:2px solid #ff9824; border-radius:0px 0px 10px 10px;"><div>内容本文</div></div>
見え方
↓
タイトル
内容本文
・・・いける。OKだ。
やはり、CSSに頼らなければ、スマホからでもなんとかなるようだ。
blockquoteはどうだろうか。
タイトル付き囲み枠を使っていますか？？
http://ameblo.jp/grand-ii-daihyo/entry-12024118170.html
囲み枠を使うことで、文字色や文字の大きさを変更するよりも、
かなり有効に文章を強調できます。
これだけ有効な手段なので、もし使っていないとしたら、とてももったいないです。
とても簡単に使うことができるので、使っていきましょう。
囲み枠テンプレート（タイトルなし）を使うにはこちら
デフォルトの状態だと、枠も何もない・・・
これは、blockquoteにも、タグで装飾を施すべきかもしれない。
しかも、スマホからだと左右の余白も一切ない無くて、
まったく、引用であることが確認できない。
う～～ん・・・。
埋め込みコード
<iframe width="420" height="315" src="https://www.youtube.com/embed/fhseD2tRLUY" frameborder="0" allowfullscreen></iframe>
表示
「共有」のアメーバボタンをクリック
https://youtu.be/fhseD2tRLUY
↓
以下のコードが貼り付けられた「記事を書く」ページが開く
<iframe width="459" height="344" src="https://www.youtube.com/embed/fhseD2tRLUY" frameborder="0" allowfullscreen></iframe>
表示
スマホではどう表示されるか。
http://nagihiro.com/socialmedia/you_smaho/
で、CSSで最適化可能だと書いてあったがアメブロではどうか。
以下を書き込むことで大丈夫になるのか？
iframe {
position: relative;
top: 0;
left: 0;
width: 100%;
}
ダメ。
PCで表示した時には動画の横幅が１００％に広がるだけで
高さはそのままだし、比率が変わってしまう。
スマホで表示した時には相変わらず横幅もはみ出たまま。
アメブロはスマホ版だと、CSS編集は基本的に全部無視されるらしい。
スマホの横幅は３２０PXが一般的らしいので、
最初から３２０PXの動画を貼り付けるべきかもしれない。
420x315の動画を320x240にしてみる。比率は同じ
デフォルトで560x315の動画ではどうか。
横幅を３２０にすると高さが１８０になってしまうが・・・字幕は大丈夫か？
320x180
<iframe width="420" height="315" src="https://www.youtube.com/embed/fhseD2tRLUY" frameborder="0" allowfullscreen></iframe>
表示
「共有」のアメーバボタンをクリック
https://youtu.be/fhseD2tRLUY
↓
以下のコードが貼り付けられた「記事を書く」ページが開く
<iframe width="459" height="344" src="https://www.youtube.com/embed/fhseD2tRLUY" frameborder="0" allowfullscreen></iframe>
表示
スマホではどう表示されるか。
http://nagihiro.com/socialmedia/you_smaho/
で、CSSで最適化可能だと書いてあったがアメブロではどうか。
以下を書き込むことで大丈夫になるのか？
iframe {
position: relative;
top: 0;
left: 0;
width: 100%;
}
ダメ。
PCで表示した時には動画の横幅が１００％に広がるだけで
高さはそのままだし、比率が変わってしまう。
スマホで表示した時には相変わらず横幅もはみ出たまま。
アメブロはスマホ版だと、CSS編集は基本的に全部無視されるらしい。
スマホの横幅は３２０PXが一般的らしいので、
最初から３２０PXの動画を貼り付けるべきかもしれない。
420x315の動画を320x240にしてみる。比率は同じ
デフォルトで560x315の動画ではどうか。
横幅を３２０にすると高さが１８０になってしまうが・・・字幕は大丈夫か？
320x180
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サンプル１
タグの記入
<a href="#jump">ここからジャンプ</a>
<a name="jump">ここに着地</a>
ここからジャンプ
ここに着地
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サンプル２（実験） アンカーが a name
ここからジャンプ
１行下
２
３
これではどうか？
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サンプル３ アンカーが a id
タグ
<a href="#jump3">ここからジャンプ</a>
<a id="jump3">着地</a>
ここからジャンプ
着地
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サンプル４ HTML5 アンカーがdiv id 着地地点にテキストなし
<a href="#jump4">ここからジャンプ</a>
<div id="jump4"></div>
ここからジャンプ
１行下
２行下
３行下
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サンプル１
タグの記入
<a href="#jump">ここからジャンプ</a>
<a name="jump">ここに着地</a>
ここからジャンプ
ここに着地
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サンプル２（実験） アンカーが a name
ここからジャンプ
１行下
２
３
これではどうか？
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サンプル３ アンカーが a id
タグ
<a href="#jump3">ここからジャンプ</a>
<a id="jump3">着地</a>
ここからジャンプ
着地
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サンプル４ HTML5 アンカーがdiv id 着地地点にテキストなし
<a href="#jump4">ここからジャンプ</a>
<div id="jump4"></div>
ここからジャンプ
１行下
２行下
３行下
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
素人でもプロのようなロゴ制作！無料・高品質にこだわって３サイト厳選！
http://webbusiness-kan.com/%E7%84%A1%E6%96%99%E3%83%AD%E3%82%B4/
ファビコンギャラリー http://favicon-gallery.com/
ファビコン favicon.icoを作ろう！
http://ao-system.net/favicon/
複数マルチアイコンを作ろう！
http://ao-system.net/multiicon/
その他、http://ao-system.netにはいろんなサービスがある。
2013.03.14Web制作
もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ
http://liginc.co.jp/web/design/material/16853
2012.09.04Web制作
スマホ対策！faviconを設定するなら「ウェブクリップアイコン」も忘れずにね！
http://liginc.co.jp/designer/archives/7300
スマートフォンのホーム画面に表示させるショートカットアイコンのサイズと設置方法
http://plustrick.com/shortcut_icon/
2014-0610
各サイズに対応したfavicon.ico（ファビコン）の作り方
http://goalist.hatenablog.jp/entry/2014/06/10/092452
マルチサイズのファビコンを作るとショートカットもきれ
2012年7月16日
http://cocoa.ultrahidex.com/2012/07/%E3%83%9E%E3%83%AB%E3%83%81%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E3%83%95%E3%82%A1%E3%83%93%E3%82%B3%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83/
2013.4.3 HTML・CSS タグ：
iPhone
ファビコンとiPhone用アイコンの作り方
http://www.tam-tam.co.jp/tipsnote/html_css/post1937.html
faviconとウェブクリップのアイコンを作成して変更する
公開日: 2014年07月01日
http://inosh.jp/favicon-web-clip-icon-change/
[favicon]1枚の画像から簡単にマルチサイズの
透過ファビコンを生成する『X-Icon Editor』が絶対オススメ！
http://cappee.net/coding/favicon-tool
favicon（ファビコン）を作って表示させよう
http://webbusiness-kan.com/favicon%EF%BC%88%E3%83%95%E3%82%A1%E3%83%93%E3%82%B3%E3%83%B3%EF%BC%89%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%88%E3%81%86/
favicon（ファビコン）を綺麗に仕上げる方法
http://webmasterhunter.normal-standard.com/favicon/
favicon(お気に入りアイコン)のつくり方
http://www.acky.info/tips/web/00003.html
きれいなファビコンの作り方。
http://ameblo.jp/wakwaksun/entry-11692919929.html
AllAbout複数サイズのサイトアイコン(ファビコン)を簡単作成
http://allabout.co.jp/gm/gc/390854/
http://webbusiness-kan.com/%E7%84%A1%E6%96%99%E3%83%AD%E3%82%B4/
ファビコンギャラリー http://favicon-gallery.com/
ファビコン favicon.icoを作ろう！
http://ao-system.net/favicon/
複数マルチアイコンを作ろう！
http://ao-system.net/multiicon/
その他、http://ao-system.netにはいろんなサービスがある。
2013.03.14Web制作
もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ
http://liginc.co.jp/web/design/material/16853
2012.09.04Web制作
スマホ対策！faviconを設定するなら「ウェブクリップアイコン」も忘れずにね！
http://liginc.co.jp/designer/archives/7300
スマートフォンのホーム画面に表示させるショートカットアイコンのサイズと設置方法
http://plustrick.com/shortcut_icon/
2014-0610
各サイズに対応したfavicon.ico（ファビコン）の作り方
http://goalist.hatenablog.jp/entry/2014/06/10/092452
マルチサイズのファビコンを作るとショートカットもきれ
2012年7月16日
http://cocoa.ultrahidex.com/2012/07/%E3%83%9E%E3%83%AB%E3%83%81%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E3%83%95%E3%82%A1%E3%83%93%E3%82%B3%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83/
2013.4.3 HTML・CSS タグ：
iPhone
ファビコンとiPhone用アイコンの作り方
http://www.tam-tam.co.jp/tipsnote/html_css/post1937.html
faviconとウェブクリップのアイコンを作成して変更する
公開日: 2014年07月01日
http://inosh.jp/favicon-web-clip-icon-change/
[favicon]1枚の画像から簡単にマルチサイズの
透過ファビコンを生成する『X-Icon Editor』が絶対オススメ！
http://cappee.net/coding/favicon-tool
favicon（ファビコン）を作って表示させよう
http://webbusiness-kan.com/favicon%EF%BC%88%E3%83%95%E3%82%A1%E3%83%93%E3%82%B3%E3%83%B3%EF%BC%89%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%88%E3%81%86/
favicon（ファビコン）を綺麗に仕上げる方法
http://webmasterhunter.normal-standard.com/favicon/
favicon(お気に入りアイコン)のつくり方
http://www.acky.info/tips/web/00003.html
きれいなファビコンの作り方。
http://ameblo.jp/wakwaksun/entry-11692919929.html
AllAbout複数サイズのサイトアイコン(ファビコン)を簡単作成
http://allabout.co.jp/gm/gc/390854/
ページの途中など指定の位置にリンクさせる方法
ページの途中にリンクさせる
ページの途中へリンクする方法です。同一ページ内
同一ページや他のページの途中にリンクできます。
a ではなく、 div や、 h3 などを使っている？
ページの途中にリンクさせる
ページの途中へリンクする方法です。同一ページ内
同一ページや他のページの途中にリンクできます。
a ではなく、 div や、 h3 などを使っている？