Bootstrapで使えるテキスト装飾部品たち

Bootstrap(ブートストラップ) は世界中で使われている Web 制作のライブラリです。
Bootstrap · The most popular HTML, CSS, and JS library in the world.

制作に便利な Bootstrap ライブラリですが、ウェブ上のテキストやコンテンツをちょっとおしゃれに見せるのに使えるクラスが多く含まれています。

装飾につかえる部品

Bootstrap の中でも装飾にすぐ使える HTML 部品をご紹介します。

  • アラート
  • カード

アラート

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

アラートの表示例

カード

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

カードの表示例

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Twitter シェアボタンの作成

Twitter でシェアするボタンの作成方法をご紹介します。

シェア

Twitter 公式ページからコードを取得

Twitter Publish から Twitter Buttons でコードを取得できます。

リンクタグで Twitter へのシェア

リンクタグを使用して Twitter へのツイートリンクを作成する方法もあります。

<a href="https://twitter.com/share?text="入れたい文字列">Twitterでツイート</a>

このように https://twitter.com/share にパラメータを付与すればツイートリンクを作成することができます。

参考

自分のウェブサイトにTwitterボタンを追加する方法

さくらレンタルサーバーでドメイン設定やSSL設定時に待つと解決するケース

さくらレンタルサーバーを契約して今回のようなメッセージが表示される場合があります。

初期ドメインがDNSに登録されていません。しばらく後に設定して下さい

もしくは

お客様のドメインのサーバ設定が利用中のサーバとは異なるipアドレスに設定されているため、無料ssl機能はご利用いただけません。


ドメイン登録や SSL 設定時にこういうメッセージが出ます。

少し待ちましょう

メッセージの通りに待ちましょう。

しばらく待つと登録できるようになります。
私は60分〜1日待ちました。

  • 初期ドメインがDNSに登録されていません。しばらく後に設定して下さい
    • 60分程度
  • お客様のドメインのサーバ設定が利用中のサーバとは異なるipアドレスに設定されているため、無料ssl機能はご利用いただけません。
    • 1日以上

さくらレンタルサーバーに設定したドメイン周りでは、待てば解決するところもあります。その場合はひとまず待ってみるといいですね。

参考

【独自ドメイン】さくらのレンタルサーバでの利用に関するよくある質問集 – さくらのサポート情報

Parse error: syntax error, unexpected ‘)’ in のような PHP エラー対策

例えば WordPress のサイトを運用している中で PHP で syntax error(シンタックスエラー)が表示される場合があります。

Parse error: syntax error, unexpected ')' in hoge.php on line 11 

このようにエラーが出た場合の対策です。

syntax error は文法ミス

syntax error は文法ミス、つまり PHP コードの書き方を間違っている場合でしょう。

例えば ; (セミコロン)が抜けていたり、)(カッコ)を閉じ忘れていたり基本的なミスがほとんどです。

PHP の文法が正しいか見直そう

syntax error は PHP の文法ミスの場合が多いので、文法を見直すことが一番です。

動いているタイミングでのソースをバックアップしてから、一行一行確認をしてみることが解決への近道となるでしょう。

css の指定が net::ERR_ABORTED 404 (Not Found) とエラーになったので修正

ブラウザのコンソールでエラーが出ていました。

fonts.googleapis.com/earlyaccess/notosansjapanese.css net::ERR_ABORTED 404 (Not Found)

この記事では、実例でエラー修正の手順をご紹介します。

404 (Not Found)エラーを修正

テーマのソースを見ると以下のようになっていました。

<link href="fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

これは Typo でしょうか。手動編集によって間違った URL が入力されています。
リンクが切れてしまったことがエラーの原因のようです。

href 属性の値を確認してみましょう。

リンクを修正

URL を修正して fonts.googleapis.com へアクセスできるようにします。

<link href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

href 属性の値を正しい URL に修正したのでエラーは解消しました。

.htaccess でさくらレンタルサーバーのWordPress で www.無しドメインに統一する方法

さくらレンタルサーバーでは .htaccess でドメインなしありを統一する方法が紹介されています。

この記事ではヘルプを参考に実際のドメインを例に設定をしてみましょう。

さくらレンタルサーバーでは、.htaccess なしのプラグインを利用する方法が紹介されています。.htaccess を編集するよりも、プラグインの利用を推奨します。

.htaccessで www なしドメインを統一

さくらレンタルサーバーで紹介されているヘルプでは次のようになっています。

WordPressを常時SSL化、かつwww.無しドメインでのアクセスに統一したい
.htaccessの設定例

https://help.sakura.ad.jp/rs/2163/?article_anchor=js-nav-3
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.example\.jp) [NC]
RewriteRule ^(.*) https://example.jp/$1 [R=301,L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

こちらを参考にすればOKです。
例えば以下の部分などは他のサーバーでも使えますね。

RewriteCond %{HTTP_HOST} ^(www\.example\.jp) [NC]
RewriteRule ^(.*) https://example.jp/$1 [R=301,L]

こちらはロリポップ!レンタルサーバーの .htaccess で利用したことがあります。

実際のドメインを例に設定

当サイトのドメインは、camon.tokyo ですので .htaccess に以下のように記載します。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.camon\.tokyo) [NC]
RewriteRule ^(.*) https://camon.tokyo/$1 [R=301,L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

example.com の部分を camon.tokyo に書き換えました。
このようにお持ちのドメインに書き換えて .htaccess へ記載することで、www ありのドメイン( https://www.camon.tokyo )を www なしのドメイン( https://camon.tokyo ) に統一することができました。

また SSL に統一されているので、HTTP でのアクセスも HTTPS にリダイレクトされるのが良いですね。

さくらレンタルサーバーの .htaccess では挿入場所に注意

.htaccess に挿入すれば OK と記載しましたが、さくらレンタルサーバーの .htaccess を確認したところ、記入場所には注意が必要だと感じました。

ソースを以下に表示しますのでご確認ください。

# BEGIN SAKURA Internet Inc.
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    <FilesMatch "\.(css|js)$">
        ExpiresDefault "access plus 1 week"
    </FilesMatch>
    <FilesMatch "\.(gif|jpe?g|png)$">
        ExpiresDefault "access plus 1 month"
    </FilesMatch>
</IfModule>
# END SAKURA Internet Inc.

# ここに常時SSL化のコードを記載

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

ソース内に「ここに常時SSL化のコードを記載」とコメントさせてもらいました。.htaccess にある 「#BEGIN WordPress」というブロックの後ろに記載してしまうと、動作に少し問題が生じたので躓きポイントだと感じました。

ドメイン設定は .htaccess で簡単に設定しよう

www ありドメインを統一したり、HTTP のリダイレクトは、インターネット上には様々な方法が紹介されているため、何を選択していいのか迷ってしまうこともあるかもしれません。

当記事のさくらレンタルサーバーで紹介されている方法は、シンプルでさらに試しやすいリーズナブルな方法と感じています。とてもシンプルでおすすめの方法です。

ドメイン周りのリダイレクトなどで迷ったらこの手法をご利用ください。

参考

https://help.sakura.ad.jp/rs/2214/

Googleカレンダーの埋め込みレスポンシブ対応について

Google カレンダーの予定をサイトに埋め込みたいという場合、スマホとデスクトップ両方のレスポンシブ対応が必要となります。

この記事では Google カレンダーのレスポンシブ対応の方法をご紹介します。
レスポンシブ対応でユーザーのカレンダー閲覧環境を改善してください。

埋め込みiframeタグをレスポンシブ対応クラスで囲む

Google カレンダーの埋め込みタグを、googleCalendar クラスで囲います。

<div class="googleCalendar">カレンダーiframe埋め込みコード</div>

レスポンシブ対応スタイルを追加

レスポンシブ対応のための CSS を追加してください。

<style>
.googleCalendar{
  position: relative;
  min-height: 740px;
  width: 100%;
  padding-bottom: 50%;
}

.googleCalendar iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

min-height の部分は、media-query などでモバイルとデスクトップで環境に合わせて調整すると良いでしょう。

参考

SSL移行でこのサイトへの接続は保護されていませんというエラーは参照がHTTPの場合が多い

HTTPからHTTPS移行したもののブラウザで、警告が表示される場合があります。

『このサイトへの接続は保護されていませんこのサイトでは機密情報(パスワード、クレジットカードなど)を入力しないでください悪意あるユーザーに情報が盗まれる恐れがあります。

SSL証明書を設定して対応をしHTTPSでアクセスができるにもかかわらず、警告が出る場合は、HTTP参照が残っているケースが多いです。

対策はHTTPの参照をHTTPSに書き換える

次のような画像やCSS、スクリプトのURL参照があるとSSLの警告は消えません。

<img src="http://example.com/test.jpg" />

こちらをhttpから、httpsもしくはスラッシュに書き換えます。

<img src="https://example.com/test.jpg" />

このようにHTTPSへの参照に切り替えれば警告が消えます。
SSL対応で警告が消えない場合は、ソース内を調査するなどご検討ください。