Cocoon 1.8.7公開。LinkedIn、note、Slack、CodePenに対応。

アップデート情報
この記事は約5分で読めます。

今回は、ほとんどシェアボタンとフォローボタンに関する機能追加。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

機能追加

  1. LinkedInシェアボタン追加
  2. LinkedInフォローボタン追加
  3. noteフォローボタン追加
  4. Slackフォローボタン追加
  5. CodePenフォローボタン追加
  6. 楽天ROOMアイコンフォント作成
  7. 楽天アイコンフォント作成
  8. 各スキンのシェア・フォローボタン対応
  9. モバイルで検索ボタンを押したとき入力フォームにフォーカスを映すように処理追加(※AMP除く)
  10. フォントプレビューに文字の太さ見本追加
  11. Googleカスタム検索用のスタイル追加

LinkedInシェアボタン追加

以前から要望のあった、LinkedInシェアボタンを追加しました。

これでシェアボタンは全部で8つ体制になりました。

シェアボタンは8個体制

フォローボタンも4種類追加

ついでに以下の4つのフォローボタンも追加しておきました。

全部表示させると18個。

フォローボタンは全部で18個

アイコンフォント作成

楽天ROOMと、楽天のアイコンフォントは、ありあわせのもので出力していたので、今回アイコンフォントを自作しました。

細かな部分ですが、些細な部分も作りこむとと気持ちいい。

楽天ROOM

以前の楽天ROOMフォーローボタンは通常のR文字を使っていましたが、

以前の楽天ROOMフォローボタン

アイコンフォントで作り直しました。

アイコンフォントを作り直した楽天ROOMフォローボタン

楽天

楽天商品リンクの右下のロゴも、有り合わせのアイコンフォントから

以前の楽天商品リンクのロゴ

楽天のロゴに変更しました。

アイコンフォントを作り直した楽天商品リンクのロゴ

やっぱり、こっちの方が楽天ぽいので多少は安心感が上がる気がする。

シェアボタン・フォローボタンのスキン対応

シェアボタンやフォローボタンが新規追加されたことにより、スタイリングされていないボタンができたのでCSSを書き加えておきました。

僕が気づいた限りでスキンのCSS追加はしましたが、見た目上不具合がある場合は以下にご連絡ください。

Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...

今回、できる限りスキンのデザインにあうように対応したつもりではあります。

ただもし、スキン作者様の意図に反した修正になっている場合は、フォーラムにてご連絡いただければ修正いたします。

もし、修正していただけるのであれば、よろしければ以下の方法でファイルを送っていただければ幸いです(※修正ファイル衝突の回避のため)。

スキンをアップデートしていただける際の手順
Cocoonに同梱されたスキンをアップデートしていただける際、行っていただけると嬉しいて手順です。

モバイルで検索ボタンを押したとき入力フォームにフォーカスを映すように処理追加

スマホなどで、モバイルボタンを押して検索フォームを表示させたときに、検索フォームをタップするひと手間を減らすために、処理を追加しました。

詳細はこちら。

Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...
ただし、jQueryで処理を追加したので、AMPページではフォーカスは移りません。

フォントプレビューに文字の太さ見本追加

管理画面のフォントプレビュー画面に「文字の太さ見本」を追加しました。

フォントプレビュー画面のフォントの太さ見本

これで、現在使用しているフォントの太さを変更したら、どのように表示されるかがある程度分かりやすくなったかと思います。

変更できる太さを見極めた上で、Cocoon設定の「全体」タブにある「フォントの太さ」から好みの太さを選択してください。

本当の太さを変更

WEBフォントでは、「利用可能なフォントの太さ」を表示させていますが、ローカルフォントでは表示させていません。これは、端末が、Windows、Mac、iPhoneなどによって対応している太さが違ってややこしいからです。ローカルフォントは「太さ見本」を見ることで、「どの太さで表示が変わるか?」を見れるようになったので、ある程度の目安にはなるかと思います。

不具合修正

  1. 目次を展開コンテンツを取得時ブロックも展開するように不具合修正
  2. 拡張タブボックススタイルの修正
  3. スキンの不具合修正
  4. モバイルメニューテキスト色の調整

関連トピックはこちら。

Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...
タイトルとURLをコピーしました