アーカードさんのhtml雑記
読むだけでためになる？お得な情報盛りだくさん？ファンブログのアーカードさんの雑記ブログもよろしくお願いいたします＾＾～♪
とりあえずまずはブログや一般的に役に立ちそうなソースコードを集めてみました！
【HTML】ページ内リンクの作り方：記事の途中に飛ばすには？
<a href="#任意">表示名</a>クリック側
<h2 id="任意">行先名</h2>行先
任意は同名にする
外部リンクを新規タブで開く場合の設定は？
一般的なhtmlソースコード
新しいタブでURLリンクを開きたい場合には、target=”_blank”を指定します。
新しいタブでリンクを開くことで、戻るボタンを何度も押さずに複数のページを確認することが可能になります。「さっき見ていたページまで戻るの面倒」と思われることもなくなるのでユーザーの離脱率を下げる効果も期待されます。
htmlソースコードはリンク先のurlを下記のコードで囲みましょう！
<a href="リンク先のURL" target="_blank">
任意の言葉・タイトルなど</a>
はてなブログは外部リンクが別タブで開かない⁉︎コピペで簡単に解決！ - 参考キラッとはてログ
【手順】
1.下のコードをコピーする。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
$(document).ready( function () {
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>
①設定→②詳細設定→③headに要素を追加にコードを貼ります
3.下までスクロールして、忘れずに変更するを押してね！
**********************************************************************************************
1.設定＞詳細設定＞headに要素を追加
(※コピペで、以下を貼り付けるだけ！)
2.デザインCSSの設定
デザイン＞カスタマイズ＞デザインCSS
(※以下のものを、コピペで貼り付けるだけ！)
右下に上に戻る・下に進むボタンが出るようにしています。
(※そういえば、右下にボタンが多いは右利きが多いから？)
もし、位置を変更したい場合は、「bottom(下)」と「right(右)」の数値を変更しましょう。
(※ちなみに、「top(上)」や「left(左)」に書き換えも可能！)
また、上に戻る・下に進むボタンの色変更に使うカラーコードは、以下のサイトにまとまっています。
16進数・RGB・RGBAカラーコード変換ツール
3.最後に設定する場所は先程と同じで「ダッシュボード」→「デザイン」→「カスタマイズ」→「フッタ」、はてなブログのカスタマイズ内のフッターです。
ここでは、はてなブログで上に戻る・下に進むボタンを設置する際のボタンを押したときの動作やボタンのアイコンを設定しています。
(※以下のものを、コピペで貼り付けるだけ！)
参考(※本サイト用にアレンジしたため)：はてなブログ無料版に上に戻るボタンを設置 - RED NOTE
もし、上に戻る・下に進むボタンのアイコンを変更したい場合には、以下のサイトから気にいったものを選んで設定しましょう。
Icons | Font Awesome
https://fontawesome.com/icons?d=gallery&c=arrows=io
*************************************************************************
はてなブログに「上に戻る」ボタンをコピペで簡単に設置する方法
https://www.gipsyjazznyumon.com/hatenablog-cursor-customize/
まずは以下のコードを「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」に入れます。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>次に、「ダッシュボード」→「デザイン」→「カスタマイズ」→「フッタ」に下記コードを入れます。
<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>
<script>
$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});
$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
});
</script>上に戻るボタンのCSS
最後にフッタの下にあるデザインCSSに、下記のコードを入れます。先ほども言ったように、一番下にコードを入れると他のCSSと競合してうまく作動しない可能性があるので、一番下に入れて上手くいかない場合は、上の方の行に入れてみて下さい。
/*上に戻る*/
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:rgba(246, 135, 116, 1);
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:rgba(0, 0, 0, 6);
}
@media only screen and (min-width: 400px){
#page-top{
right:50%;
margin-right: -450px;
}
}
上に戻るボタンの色を変える方法
ボタンの色を変える方法は、上で紹介したCSSのコードの12行目と18行目のrgbaの後ろのカッコの数字を変えます。ちなみに今の設定はピンクと黒です。
- 12行目の赤のコードは、ボタンが常に見えている時の色
- 18行目の青のコードは、カーソルがボタンの上にある時の色になります。
色はこちらのサイトで調べることができます。
**********************************************************************************************
コピペだけで簡単に、はてなブログに上に戻るボタン（ページトップへ戻るボタン）を設置するコードを改めて書いてみました（今さらですが、一度やってみたかったのです）。
https://simadzu.hatenablog.com/entry/top-button
（次のコードをコピーしてデザイン→カスタマイズ→フッタに貼り付けます）
<!-- 上に戻るボタンのHTML -->
<div id="page-top">
<a id="move-page-top"><i class="blogicon-chevron-up"></i></a>
</div>
<!-- 上に戻るボタンのCSS -->
<style>
/* 上に戻るボタンの位置 */
#page-top {
position: fixed;
right: 21px;
bottom: 50px;
display: none;
}
/* 上に戻るボタンの見た目 */
#move-page-top {
font-size:38px; /* アイコンの大きさ */
color: #ddd; /* アイコンの色 */
cursor: pointer;
transition: 0.4s;
text-decoration: none;
display: block;
width: 55px; /* アイコンの背景の幅 */
height: 55px; /* アイコンの背景の高さ */
border: 9px solid #ddd; /* アイコンの背景の丸囲み線 */
border-radius: 50%; /* アイコンの背景の丸さ */
background: transparent; /* アイコンの背景の色 */
line-height: 60px; /* アイコンの位置 */
text-align: center;
}
/* 上に戻るボタンの見た目（マウスオーバー） */
#move-page-top:hover {
color: #000; /* アイコンの色 */
border-color: #000; /* アイコンの背景の丸囲み線の色 */
}
</style>
<!-- 上に戻るボタンのJavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
/* 上に戻るボタンの動作設定 */
var timeOut = null;
$(window).scroll(function () {
if (timeOut == null) {
timeOut = setTimeout(function () {
var element = $('#page-top');
var visible = element.is(':visible');
if ($(this).scrollTop() > 500) {
if (!visible) {
element.fadeIn('slow');
}
} else {
element.fadeOut('slow');
}
timeOut = null;
}, 500);
}
});
/* 上に戻るボタンの動作（クリック） */
$('#move-page-top').click(function () {
$('body, html').animate({scrollTop: 0}, 'slow');
});
});
</script>
上に戻るボタンのHTML（<div id="page-top">～</div>で囲まれた部分）で、ボタンを表示します。はてな純正のアイコンフォント（Webフォント）を使っています。
上に戻るボタンのCSS（<style>～</style>で囲まれた部分）で、ボタンの位置や見た目を調整します。フッタではなくデザインCSS（デザイン→カスタマイズ→デザインCSS）に貼り付ける場合は、<style>と</style>の記述は不要です。
上に戻るボタンのJavaScript（<script>～</script>で囲まれた部分）で、ボタンの動作を設定します。下に500pxスクロールしたら、ボタンをふわっと表示します。
*******************************************************************************
上下に戻るボタンのサンプル
シェブロンサークルアップ
<i class="fa-solid fa-circle-chevron-up"></i>
シェブロン-サークルダウン
<i class="fa-solid fa-circle-chevron-down"></i>
*当ブログはすべて自己責任です
