要素を別を場所移すとは？
サイドバーの要素を記事内に設置するとは、例えば、ブログのトップページを作ったときに最新記事の表示が必要ですよね？最新記事の表示はサイドバーに設置することができます。そのサイドバーに設置した最新記事の表示をこれから紹介するコードでトップページに表示することができます。当ブログもこの方法でトップページに最新記事を表示させています。
コード
ではコードを。このコードを移動させたい場所に貼り付けてください。
<div id="移動させる先の要素名"></div>
<script>
var timer = setInterval(function() {
if (typeof jQuery != 'undefined') {
$("#移動させる先の要素名").html($("移動させる要素名").html());
clearInterval(timer);
}
}, 1000)
</script>
コードの説明
div
一番最初のdivは移動させる先の要素です。なのでこのdivを張り付けた場所に選択した要素が移動してきます。
移動させる先の要素名
script内の＃移動させる先の要素名とは名前の通りです。一番最初のdivの要素名を張り付けてください。このコードではidで指定されていますがclassなどで指定する場合は#を.になおしておいてください。
移動させる要素名
移動させる要素名は移動させたいものによって異なるでしょう。各自デベロッパーツールなどを使って確認してみてください。参考程度にはてなブログにおけるサイドバーの要素名は一覧にしておきます。移動させたいものがリスト内にある場合はリスト左側のものを「移動させる要素名」に貼り付けてください。
| 種類 | 要素名 |
|---|---|
| 検索ボックス | .hatena-module-search-box |
| プロフィール | .hatena-module-profile |
| 人気記事 | .hatena-module-entries-accrss-ranking |
| 最新記事 | .hatena-module-recent-entries |
| 最近のコメント | .hatena-module-recent-comments |
| リンク | .hatena-module-links |
| カテゴリー | .hatena-module-category |
| アーカイブ | .hatena-module-archive |
| html | .hatena-module-html |
まぁ、こんなもんでしょう。
注意が必要なのはhtmlの場合です。はてなブログの場合サイドバーに自分で書いたhtmlを表示できる機能があります。それを2つ以上使った場合、どちらも同じ要素名となってしまいます。その場合は工夫が必要です。
元の要素を非表示に
これを使うと移動させた先と元々あった場所に同じものが表示されます。それで良いなら良いですが、表示させたくないときは下のコードをcssの欄に貼り付けてください。
移動させる要素名{
display: none;
}
これで非表示にできます。
タイトルを非表示
サイドバーの要素を移動させたのですから、タイトルも付随してきます。使い方によってはタイトルがいらない場合があるでしょう。その場合はこのコードを。
#移動させる先の要素名 .hatena-module-title{
display: none;
}
コレをcssに貼り付ければ非表示になります。
あとは調整！
移動させたらあとは調整です。記事は綺麗に整列させて、サイズを調整して。など頑張ってください！