アメブロ★カスタマイズ実験室 https://ameblo.jp/tesblo1/ アメブロのカスタマイズをいろいろと試してみるブログです。 ja cssのみで画像にマウスオーバーで文字を表示&変化
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

あとで時間があるときに試してみよう。



]]> https://ameblo.jp/tesblo1/entry-12069342078.html Fri, 04 Sep 2015 15:12:15 +0900 プラグインの文字数制限(半角3800文字)対策・URLを省略する
で、これを有効に使いたい場合は極力、文字数を減らして入力する工夫が必要になってきます。


例えばプラグイン内に「このブログのオススメ記事」みたいな表示をしたい場合。

取りあえずこのブログの過去記事で実験してみます。

テーブルについて　ブログにテーブルを挿入する
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

]]> https://ameblo.jp/tesblo1/entry-12069267358.html Fri, 04 Sep 2015 09:52:38 +0900 スマホからの見え方研究
“テスト
テスト
テスト
テスト












たとえば、囲み枠の実験。

こちらを参照。
タイトル付き囲み枠を《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にも、タグで装飾を施すべきかもしれない。

しかも、スマホからだと左右の余白も一切ない無くて、
まったく、引用であることが確認できない。

う～～ん・・・。
















]]> https://ameblo.jp/tesblo1/entry-12064171719.html Fri, 21 Aug 2015 13:53:12 +0900 管理者用 このページを編集する


マイページ
http://mypage.ameba.jp/

管理トップ
http://blog.ameba.jp/ucs/top.do

CSSの編集
http://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do

記事を書く
http://blog.ameba.jp/ucs/entry/srventryinsertinput.do

]]> https://ameblo.jp/tesblo1/entry-12062342664.html Sun, 16 Aug 2015 12:55:49 +0900 動画サイズのテスト <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



]]> https://ameblo.jp/tesblo1/entry-12062324246.html Sun, 16 Aug 2015 11:21:05 +0900 てすと サンプル１

タグの記入

<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>


ここからジャンプ


１行下
２行下
３行下


◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
]]> https://ameblo.jp/tesblo1/entry-12058033959.html Tue, 04 Aug 2015 13:29:18 +0900 seesaaブログのh2,h3タグの最適化
シーサーブログカスタマイズとSEOまとめ
http://affiliate150.com/seesaa-customize-seo

見出しタグ「hタグ」の最適化
http://affiliate150.com/tag-optimization
h2をdivに　h3をh2に。 ]]> https://ameblo.jp/tesblo1/entry-11978984285.html Mon, 19 Jan 2015 09:40:09 +0900 ファビコン関係 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/

]]> https://ameblo.jp/tesblo1/entry-11976718211.html Tue, 13 Jan 2015 16:14:46 +0900 ブログのタイトルを画像にして、ロゴのようにしたい。 ブログタイトルをロゴ化（画像化）

まずは画像を用意。
アメーバピグ スナップショット

アメーバピグ スナップショット ]]> https://ameblo.jp/tesblo1/entry-11966833369.html Mon, 22 Dec 2014 14:57:59 +0900 #を使って、ページの途中にリンクを貼る ページの途中など指定の位置にリンクさせる方法

ページの途中にリンクさせる

ページの途中へリンクする方法です。同一ページ内

同一ページや他のページの途中にリンクできます。
a ではなく、　div や、　h3 などを使っている？
]]> https://ameblo.jp/tesblo1/entry-11967112114.html Sun, 21 Dec 2014 08:59:31 +0900