Twitterのタイムラインを表示するウィジェット改訂版

タイムラインウイジット作成画面
タイムラインウイジット作成画面

Twitterのタイムラインを表示するウィジェットという記事を書きましたが、内容が古いのでアップデイト。

タイムラインを埋め込む方法(Twitter公式サイト)より、

  1. Twitterにログイン
  2. [設定] に移動し、[ウィジェット] を選択
  3. [新規作成] をクリック
  4. 埋め込みタイムラインの種類を選択し、設定を開始
    • [ユーザータイムライン] の場合、ツイートを表示したいユーザーのユーザー名を入力します。
    • [お気に入り] の場合、お気に入りを表示したいユーザーのユーザー名を入力します。(上記の画面を参照
    • [リスト] の場合、ドロップダウンメニューから自分が作成または保存した公開リストを選択します。
    • [検索] の場合、検索クエリを入力します (高度な検索の場合、検索オプションを使用します)
    • 不適切なコンテンツや冒涜的なコンテンツなどを排除するには、セーフサーチを選択します。
  5. デザインをカスタマイズ。ウェブサイトに合った高さ、テーマ (明るいか暗いか)、リンクの色を指定します。画像が含まれるツイートで画像を自動的に表示するように埋め込みタイムラインを設定することもできます。
  6. [ウィジェットを作成] をクリックし、コードを自分のウェブサイトのHTMLにコピーペースト。

これで完了です。

GoogleMapをレスポンシブサイトに埋め込む方法

GoogleMapをレスポンシブサイトに埋め込む方法に悩んでいましたが、ついに見つけました。

今までは、画像については、Media Queriesを利用して、スマートフォン(iPhone・Android)とPCのスタイルシート(CSS)を振り分ける単純な方法ででサイズ変更に対応していました。

GoogleMapについては、最初のレンダリング時に、勝手に地図が表示幅に収まってくれるので、気にもしていなかったのですが、別のサイトの構築案件で、レスポンシブサイトに対応せざるを得なくて困っていました。

関連エントリー

そこで、GoogleMapの地図をレスポンシブサイトに埋め込む方法

コピペOKということなのでソースも書いておきます。

HTML

<div class="ggmap">iframeのコピーしたコード</div>

CSS

.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

WordPressとMovableType

  • 投稿日:
  • by
  • カテゴリ:

WordPress管理画面
WordPress管理画面

管理していた、とあるサイトのリニューアル案件があって、MovableTypeからWordPressへ移行するプロジェクトに参加しました。おもな理由は、スマホからの投稿が手軽に行えるというものです。

MovableTypeですと、スマホやタブレットの更新は問題ありませんが、新規投稿の際にいちいちPCページで行わなければいけなかったためです。

基本的な構築とデーター移行は業者さんにお願いし、クライアント側として、細かなレイアウト修正などを私が担当しました。

PHPについては全く知識がなかったのと、デザインとプログラムがほぼ分離しているMovableTypeとは勝手が異なり、苦戦しております。

一方で、欲しい機能がプラグインでかなり多く提供されていて、凝りださなければデザインを触ることなく、プラグインのインストールだけで機能の追加が行えるなど、気に入った点もありました。

プラグインやTIPSについては、おいおい覚書代わりに書いてまいります。

Movable Typeで「システムテンプレートが見つかりません」

  • 投稿日:
  • by
  • カテゴリ:

Movable Typeを5.2から6.2にアップグレードしてみたところ、「システムテンプレートが見つかりません」なるエラーがでてしまいました。再構築はできているので、システムテンプレートそのものがなくなっているわけではないようです。

Movable Type4系でも起こるケースがネット情報では散見されたので、6.2へのアップグレード固有の問題ではなさそうです。

左メニューの「ツール」から「テーマーのエクスポート」を行ってから、当該テーマを再適用したところ元に戻りましたが、ウムム。

Movable Typeの標準機能でのカテゴリソートに変更

これまでは、The blog of H.Fujimotoさんの、カテゴリとフォルダを自由に並べ替えられるプラグインSortCatFldを利用いたのですが、Movable Type 5.1以降では、Movable Typeの標準機能に備わっているソート機能に変更しました。

なお、カテゴリとフォルダに加え、ブログ記事とウェブページを並べ替える場合は、SuperSortプラグインを使用すれば可能です。

Movable Typeの標準機能での動的ページ分割に変更

これまでは、The blog of H.Fujimotoさんのリアルタイム再構築プラグインを利用してページ分割を行っていたのですが、Movable Type 5.2にバージョンアップした際にプラグインエラーが出てしまい悩んでいたところ、Movable Typeの標準機能で動的ページ分割する方法が解説されていたので、この方法に変更しました。

詳しくは、前述のページをご覧いただくとして、ページネーションテンプレートのみ、現在ページを表示するように変更しました。

<mt:SetVarBlock name="pagination_navigation">
  <mt:If name="search_results">
    <mt:IfMoreResults>
      <li><a rel="prev" href="<$mt:NextLink encode_html="1"$>">過去の記事</a></li>
    </mt:IfMoreResults>
    <mt:IfPreviousResults>
      <li><span class="current"><$MTTotalPages$> ページ中 <$MTCurrentPage$> ページ</span></li>
<li><a rel="next" href="<$mt:PreviousLink encode_html="1"$>">新しい記事</a></li>
    </mt:IfPreviousResults>
  <mt:Else>
    <mt:If name="archive_template">
      <$mt:ArchiveCount setvar="total_entries"$>
    <mt:Else>
      <$mt:BlogEntryCount setvar="total_entries"$>
    </mt:If>
    <mt:If name="total_entries" gt="$entries_per_page">
      <li><a rel="prev" href="<$mt:Var name="search_link" encode_html="1" $>2">過去の記事</a></li>
    </mt:If>
  </mt:If>
</mt:SetVarBlock>
 
<mt:If name="pagination_navigation">
  <ul class="content-nav">
    <$mt:Var name="pagination_navigation"$>
  </ul>
</mt:If>

Movable Type 5.2 へのアップグレードメモ1

Movable Type 5.2 へのアップグレードテスト中ですが、いくつかの問題が。

  • 投稿画面のエディターがTinyMCEになったことで、Movable Typeの投稿画面にならぶボタンを拡張するプラグイン「CustomEditorButton2」などが一式使えなくなった。
  • 同じく画面関係で、マウスクリックでタグ付けを行える「EasyTagSelector」が使えなくなった。
  • >Facebookのウォールに反映するプラグイン「FBWallPost」が投稿画面のmt.jsと干渉して、投稿画面そのものが乱れる。

といった課題が出てきました。

Movable Type でFirefox 16 でカテゴリおよびフォルダの選択が保存できない場合(具体的には以下のケース)

  • ブログ記事編集画面でのカテゴリの選択時
  • ウェブページ編集画面でのフォルダの選択時
  • アイテムのアップロード画面でのフォルダの選択時

は、各バージョン毎(Movable Type 4.38 用、Movable Type 5.07 用、Movable Type 5.14 用、Movable Type 5.2 用)に修正ファイルを適用して下さい。

このサイトは4.29系ですが、4.38用の修正ファイルが利用できましたので参考までに。ただし、書き換えるファイルのバックアップはお取りください。