尾道apartment-Pのメンバータグ ＆ tips

尾道apartment-Pのメンバータグ。

テンプレート＞HTLM編集＞　表示されたコードの</body>の前に以下を入れて保存。

<iframe frameborder='0' height='38' src='http://apap.co4.jp/at_blog_parts/apapx.html' width='100%'/><style type="text/css">#navbar-iframe {height:0px;visibility:hidden;display:none}--></style> 

※動的ビューの場合や、自由な場所に移動したい場合は
レイアウト＞ガジェットを追加＞HTML/Javascriptに

<iframe frameborder='0' height='38' src='http://apap.co4.jp/at_blog_parts/apapx.html' width='100%'/><style type="text/css">#navbar-iframe {height:0px;visibility:hidden;display:none}--></style>

を追加して任意の場所にドラッグで配置。


ついでに過去のブログへのリンクも設置するとこんな感じ。

<iframe frameborder='0' height='38' src='http://apap.co4.jp/at_blog_parts/apapx.html' width='100%'></iframe><style type='text/css'>#navbar-iframe {height:0px;visibility:hidden;display:none}--></style>
<br />
<h4>これまでのブログ</h4>
<a href="http://apap.co4.jp/blog/3/">2003/09　〜　</a><a href="http://apap.co4.jp/modules/weblog/index.php?user_id=3&start=65">一覧</a><br />
<a href="http://apap.co4.jp/wp/miyabi/">2004/12　〜　</a><a href="http://apap.co4.jp/search.php?query=&mid=95&action=showallbyuser&andor=AND&uid=3&start=1450">一覧</a><br />

赤のとこは各自サイト内検索とかで調べて書き換え。

tips 001 フッダー用 オフィシャルサイトアニメーションリンク

<a href="http://teraminato.com/" title="てらみなとみやびオフィシャルサイトへアクセス" >
<div style="display: table;width: 100%; height:300px;">

<div class="button" style="background:url(https://c2.staticflickr.com/2/1446/24457238376_0ec392572e_b.jpg);width:100%;height:300px;background-position:0 -100px;text-align: center; display: table-cell;vertical-align: middle;font-weight:bold;">てらみなとみやびオフィシャルサイトはこちら</div>

</div>
</a>



<style type="text/css"><!--

.button {
 display: inline-block;
 width: 100%;
 height:300px;
 text-align: center;
 text-decoration: none;
 outline: none;
}
.button::before,
.button::after {
 position: absolute;
 z-index: -1;
 display: block;
 content: '';
}
.button,
.button::before,
.button::after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
}



.button {
 position: relative;
 z-index: 2;
 background-color: #333;
 border: 2px solid #fff;
 color: #fff;
 overflow: hidden;
}
.button:hover {
 color: #333;
}
.button::after {
 top: -100%;
 width: 100%;
 height: 100%;
}
.button:hover::after {
 top: 0;
 background-color: #fff;
}
--></style>