カテゴリー別アーカイブ: web基本知識

bootstrap4のタブで別ページから直接特定のタブにリンクする方法

本当に苦労しました。

結論から言うと、jqueryのバージョンアップ時に気を付けないといけないよね!ってことなのですが笑

では、参考にさせていただいたサイトはこちら

ハッシュ付きURLリンクでの訪問時にBootstrapの適切なタブを開く&スクロールする|ENTEREAL様

入力するコードはこちら
適当なjsファイルを名前を付けて保存してfooterで呼び出します。

$(document).ready(function() {
    // #(ハッシュ)指定されたタブを表示する
    var hashTabName = document.location.hash;
    if (hashTabName) {
        $('.nav-tabs a[href=' + hashTabName + ']').tab('show');
    }
});

おおむねこちらで動作します。JQueryのバージョンが低ければ・・・・

ただ、bootstrap4を使うとたぶんjquery3.○.○を使うと思うんですよね。そうすると、なぜか、タブが切り替わらい?!

そこからいろいろとトライ&エラーの繰り返しで、
jQueryのバージョンが原因だと突き止めたあと、
(サイトのデザインが完成している)いまさらバージョンを変えるわけにもいかずJQueryのサイトを見ていると、、

あるじゃん、「jQuery Migrate Plugin」なんて便利なものが!

google先生の翻訳で日本語になったサイトを読むと
そのプラグインを使うと失われた機能を取り戻すとかなんとか

とにかく、Download the compressed, production jQuery Migrate 1.4.1をダウンロード!

jQuery本体の下に呼び出してサイトにアップすると

動いた!!

とりあえず、わすれないうちに記録をしておきます。

wordpressでサイト表示URLに変えたらiconフォントが表示されない時にやったこと

たまにあるのですが、さくらインターネットのサーバーでは起こりやすいらしいです。

うん。

さっきまで見えてたiconフォントが□になってる!?

そんな悩みありますよね?

今回久々すぎて、前はどうやったかなーってgoogle先生に聞いてみると、最高に親切なサイトに巡り合えました。

【助けて】さくらのサーバーだとIE9以降でwebfontが文字化けする

もう、本当にこのサイトに書いてある通りにしてみたら、スッキリと表示されましたよ。

.htaccess のディレクトリだけ少し気を付けて

RewriteRule (.*).(eot|eot#iefix|ttf|otf|woff)$ フォント格納ディレクトリまでのパス/proxy.php?url=$1.$2 [L]

ここで、注意点。

$の後にスラッシュはつけない。
パスはルート以下全てを入力。

参考サイトでは asset/fonts/ となっていましたが、自分はもっと長くなりました。

何はともあれ、本当Ikeda Hidenoriさんありがとうございましたm(_ _)m

IE8よさようなら!

webサイトをつくっているとよくIE8以下のブラウザーで見ている方への表示の違いにうんざりさせられてしまいませんか?

どうしようかと思っていたときにこんなサイトを見つけました。

[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js | コリス

そうなんです。

たまに見かける、ブラウザをインストールする様に促すやつですね!

これを参考に皆さんもIE8にさよならをしてきませんか?

意外と知らなかった、前のページに戻る為のリンク作成

複数ページからのアクセスが考えられるページに、

「前のページに戻る」

というリンクを作りたいときは以下のコードで大丈夫です。

 


<a href="javascript:history.back();">前のページに戻る</a>

 

ここでのキーポイントはリンク先をjavascriptで書くこと!
これを覚えていたら便利ですね!

Masonryをwordpressで動作させる方法

最近多いタイル状に配置をするjQueryのプラグインにMasonryがありますね!
トップページなどでMasonryを配置する際に、
次のように設定をするとOKです!

まず、functions.phpに以下のコードを記述するとMasonryがつかえるようになります。
(最近のwordpressにはMasonryが内包されているそうです。)

function my_scripts() {
wp_enqueue_script('jquery-masonry');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

加えて別で設定用に以下のようなjsファイルを作ります。

jQuery(window).load(function(){
  jQuery( '#wakugumi' ).masonry({
    itemSelector: '.parts'
  });
});

ポイントは$をjQueryに変更すること。
あと、ここで設定した#wakugumiと.partsはソースに記述する際に使います。
そして、header.phpで作成したjsファイルを読み込みます。

あとは、CSSでデザインを固めて、以下の様に記述すればOK!

<div id="wakugumi">
<div class="parts">
コンテンツ内容
</div>
・・・・・
<div class="parts">
コンテンツ内容
</div>
</div

ぜひお試しください。

EXCELをHTMLのTABLEに変換するには?

EXCELで作った表をHTMLのTABLEに簡単に変更したい!

そんなときに便利なサイトが

tableizer

手順はほんの数ステップでOK!

  1. エクセルで表を作る
  2. 表をコピーする
  3. tableizerの
    Paste your cells from Excel, Calc or other spreadsheet here:
    の下にある大きな枠に貼り付ける
  4. No CSS Styles:
    の右のチェックボックスをチェックする
  5. Tableize it!をクリックする。
  6. 出てきたコードを入力したい場所にコピペする。

たったのこれだけで面倒なTABLE作成をできてしまいます!
見た目は後で、cssで整えたほうがきれいになるので、
自分でcssの設定をしましょう!

ただ、これだけ便利なツールも万能ではありませんでした!

細かくは色々あるのですが、一番大きなことは、

THが固定されている

ということです。

必ず、先頭行がTHになってしまうので、
左が見出しのテーブルを作りたいときは
後で変更しないといけません!

それだけっていえばそれだけですので、

結局便利なツールですね!

tableizer