ti-web.net blog - テンプレート検索結果1

コンテンツの幅が画面の幅を超えています

Google Search Consoleで、コンテンツの幅が画面の幅を超えていますというモバイルユーザビリティに関するエラーメッセージが表示されていました。

該当する部分は、<pre><code></code></pre>で囲った部分で横スクロールバーが表示されている部分です。今までに、この部分でエラーメッセージが表示されたことが無いので、不思議に思いながら対処方法を探してみました。

<code>のstyle属性に"display:block;overflow-x:auto;"を指定すると良いという情報がありましたので、試してみた結果、エラーメッセージは表示されなくなりました。
参考URL : <pre><code>タグが引き起こすモバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」 - ラボラジアン (laboradian.com)

スタイルシートに設定をしてもエラーは解消できないらしいので、「もしかしたら、AMPが影響している可能性があるのでは？」と考えて、AMPのテンプレートに

pre code { display: block; overflow-x: auto;}

を追加してもエラーが解消できることを確認出来ました。

Google Search Consoleにおいてモバイルユーザビリティに関するエラーが表示されたら、AMPについても調べる必要があると認識しました。でも、AMPで問題があるなら、Google Search Console内のAMPの部分でエラーを表示して欲しいです。

ブログ記事を読む

movabletype.netでパンくずリストの構造化データを追加する方法

movabletype.netを試用していて、パンくずリストの構造化データが指定されていませんでした。

試用期間中なのでカテゴリーは1階層しか作成していない事
必ずカテゴリーを選択する事

という前提のもとでテンプレートに追加してみました。

ブログ記事を読む

さくらインターネットのレンタルサーバーで常時SSL化

さくらインターネットのレンタルサーバーで、無料SSL証明書「Let's Encrypt」が利用できるようになったので、設定して常時SSL化しました。

参考情報:さくらインターネットの「さくらのレンタルサーバ」、コントロールパネル上の簡単操作で無料SSL「Let's Encrypt」を設定可能に

コントロールパネルでクリックしていくだけで、約1時間後にはSSLサーバ証明書発行完了のメールが届きました。この時点では、httpとhttpsのどちらでもアクセス可能な状態ですので、サポートサイトを参考にして.htaccessを修正し、httpsへのリダイレクトするように設定しました。

私の場合、既存の.htaccessに

RewriteCond %{ENV:HTTPS} !on
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

を追記しました。

参考情報:.htaccessによるアクセス制御 - 暗号化(SSL)を有効としている場合、暗号化しているページへ誘導したい

Movable Typeのテンプレート内で、http://www.ti-web.net/と直接記述している部分を/に修正したり、検索/置換して対応しました。

あとは、Google AnalyticsでサイトのURLをhttpからhttpsへと変更しました。

ブログ記事を読む

Rainierをカスタマイズ(タグ)

Movable TypeのレスポンシブWebデザインテーマ「Rainier」では、ブログ記事に付けたタグを表示するようになっていないので、テンプレートを修正してタグを表示し、同じタグが付いた記事の一覧へリンクさせるようにしました。

ブログ記事のテンプレートに下記のコードを追加しました。

<MTEntryIfTagged>
 <div><p>タグ<span class="delimiter">:</span><mt:EntryTags glue='<span class="delimiter">,</span>'><a href="javascript:void(0)" onclick="location.href='<$mt:TagSearchLink encode_js="1"$>';return false;" rel="tag"><$mt:TagName$></a></mt:EntryTags></p></div> 
</MTEntryIfTagged>

javascriptの部分は、無くても大丈夫だと思います・・・。

Rainierの詳細情報は、レスポンシブWebデザインテーマ「Rainier」にあります。

ブログ記事を読む

Movable TypeでYoutubeの動画を埋め込む

Movable TypeでYoutubeの動画を埋め込む方法です。

https://www.youtube.com/watch?v=GZ9m6-Q-ddoの動画を埋め込む場合、「埋め込みコード」をクリックして表示される下記のコードをコピーして貼り付ければ、ブログの記事に動画を埋め込むことができます。

この方法だと、毎回コードをコピーして埋め込むのが、ちょっとだけ面倒です。また、ブログのスタイルを変更して、動画のサイズを変更したい時などには、検索や置換機能を使用する必要があるので、後々のメンテナンスのことを考えて、カスタムフィールドを使用して簡単に埋め込むことにしました。

youtube用のカスタムフィールドを下記のように新規作成します。
名前:youtube
種類:テキスト
必須:チェックなし
ベースネーム:youtube
テンプレートタグ:EntryDataYoutube

ブログ記事を読む

Movable Type スマートフォンオプションのテンプレートを修正

Movable Type スマートフォンオプションをインストールして使用していますが、一つのページにh1タグが複数あり、あまりよろしくないので修正しました。

アーカイブテンプレートのブログ記事で、

<h1 class="title entry-title">
<mt:if tag="EntryTitle">
<$mt:EntryTitle$>
<mt:Else>
タイトルなし
</mt:If>
</h1>

を下記のように修正。

<h2 class="title entry-title">
<mt:if tag="EntryTitle">
<$mt:EntryTitle$>
<mt:Else>
タイトルなし
</mt:If>
</h2>

ブログ記事を読む

Movable Typeでタグを削除した時の対処

Movable Typeでtagを削除したり、サーバー移転などによりブログIDが変わった時に、タグの検索結果がなくなった場合の対処です。

Apacheの設定や.htaccessで対処する方法が思いつかなかったので、Movable Typeのシステムテンプレートにある検索結果を変更して対処しました。

検索結果が0件=検索結果が0ページという事で、下記のコードを<head></head>間に追加しました。

<mt:unless tag="totalPages">
<meta name="robots" content="noindex" />
</mt:unless>

検索サイトからはすぐには消えないですが、放置しておくよりは良いんじゃないかと思います。

ブログ記事を読む

ケータイキット for Movable Type

ケータイキット for Movable Typeを試用しています。

インストールと設定は、そんなに難しくはないですが、テンプレートを沢山作成するので、少し手間がかかります。

スマートフォンにも対応していますが、現時点では、iPhoneとAndroidに対応しています。携帯以外の機種でアクセスした場合にリダイレクトするように設定していると、Windows Phoneでアクセスした場合、PC用のページへリダイレクトされます(汗)。

リダイレクトの設定を外した状況でWindows Phone(IS12T)からアクセスすると、携帯用のページが表示されました。

このブログのトップページに携帯でアクセスした場合、携帯用のページへリダイレクトするように設定してみました。テンプレートの1行目に下記のコードを追加しています。

<?php
$link = "Location: <mt:blogurl>m/";
$ua = $_SERVER["HTTP_USER_AGENT"];
if(ereg("DoCoMo",$ua)||ereg("J-PHONE",$ua)||ereg("Vodafone",$ua)||ereg("SoftBank",$ua)||ereg("MOT-",$ua)||ereg("KDDI",$ua)||ereg("UP\.Browser",$ua)||ereg("PDXGW",$ua)||ereg("DDIPOCKET",$ua)||ereg("WILLCOM",$ua)||ereg("GoogleWireless Transcoder",$ua)){ 
header($link);exit;
}
?>

ブログ記事を読む

shadowbox設置

今までthickboxを使っていましたが、動画にも対応できるshadowboxへ変更しました。

Movable Typeでの設置は、以下のような手順でできます。

shadowboxのサイトからダウンロードし、圧縮ファイルを解凍します。

cssファイルで指定している画像へのリンクを修正し、サーバーへアップロードします。

HTMLヘッダーテンプレートに下記を追加します。

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
 language: 'ja',
 autoplayMovies: false,
 players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
 });
</script>

cssとjsファイルのURLは、アップロードした場所にあわせて修正します。

autoplayMoviesは、動画の自動再生の設定で、デフォルトではtrueになっています。

ブログ記事を読む

さくらのVPS

さくらのVPSを試してみたら、専用サーバエントリーよりもサクサク動くのでちょっと驚きました。

Movable Typeの管理画面でエントリーを作成したり、テンプレートの編集をすると違いがよくわかります。あと、再構築にかかる時間も短くなります。

さくらのVPSへ変更すれば、レンタルサーバ代がひと月で約9割節減できるので、引っ越しを決意しました。

という訳で、この年末の休みを利用して引っ越しをしました。

以下、作業内容です。

webコンテンツは、tar.gzで圧縮したファイルを転送、解凍してコピー。
MySQLのデータベースは、バックアップ(エクスポート)したファイルを転送、インポート。
ネームサーバのレコード編集。
メールデータは、OutlookでIMAP接続しているので、旧サーバから新サーバへドラッグ&ドロップして移動。
cronの設定を移行。

ブログ記事を読む

「テンプレート」と一致するもの