フォーラムへの返信
-
投稿者投稿
-
LINE は既に( https://line.me/ja/ )のアドレスでもLINEのアイコンで表示される対応がされていると思いますが、また別のアイコンとなるのでしょうか?
noteの方はFontAwesomeに含まれていないブランドのアイコンの為、リソースなどの調整が大きい事から、Snow Monkey v11リリース後の対応になるのではと予想しています。
一応、お急ぎでしたら my snow monkey で、note をアイコン表示に追加する断定的な方法を記載しておきますのでお使いください。
※ 断定対応なので、公式にアイコン対応された際はコードを削除してください。add_filter( 'snow_monkey_social_nav_item', function ( $_new_item_output, $_item_output, $_args ) { if ( false !== strpos( $_item_output, 'https://note.com/' ) ) { $_new_item_output = str_replace( $_args->link_before, '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g id="Shape" transform="matrix(0.0849025,0,0,0.0849025,-8.9805,-8.9805)"><path d="M180.389,169.697L180.389,155.318C180.389,152.698 180.524,151.824 180.928,150.48C182.006,146.785 185.646,144.03 189.959,144.03C194.271,144.03 197.91,146.852 198.988,150.48C199.393,151.824 199.529,152.698 199.529,155.318L199.529,177.491C199.529,178.835 199.529,180.178 199.259,181.388C198.518,184.747 195.485,187.772 192.115,188.51C190.902,188.779 189.554,188.779 188.206,188.779L165.967,188.779C163.339,188.779 162.462,188.644 161.114,188.241C157.475,187.166 154.645,183.538 154.645,179.238C154.645,174.937 157.475,171.309 161.114,170.234C162.462,169.831 163.339,169.697 165.967,169.697L180.389,169.697ZM259.643,270.215L140.357,270.215L140.357,165.464C140.357,164.12 140.829,162.978 141.773,162.037L172.706,131.196C173.649,130.256 174.795,129.786 176.143,129.786L259.643,129.786L259.643,270.215ZM273.189,106.134C272.583,106.067 271.774,106 270.224,106L172.975,106C171.898,106 170.82,106.067 170.078,106.134C165.629,106.537 161.653,108.62 158.486,111.778L122.295,147.86C119.129,151.019 117.039,154.982 116.636,159.417C116.567,160.155 116.5,161.23 116.5,162.305L116.5,280.763C116.5,282.309 116.567,283.116 116.636,283.72C117.174,288.759 121.756,293.327 126.811,293.865C127.418,293.933 128.226,294 129.776,294L270.224,294C271.774,294 272.583,293.933 273.189,293.865C278.244,293.327 282.826,288.759 283.366,283.72C283.432,283.116 283.5,282.309 283.5,280.763L283.5,119.237C283.5,117.691 283.432,116.884 283.366,116.28C282.826,111.241 278.244,106.672 273.189,106.134Z" fill="#41C9B4" /></g></svg>' . $_args->link_before, $_item_output ); } return $_new_item_output; }, 10, 3 );
note
のアイコン仕様は+ ブランドアイコンカラーコード :
#41C9B4
+ ロゴデータ – ダウンロード先 : https://help.note.com/hc/ja/articles/360000235582-ロゴデータとしています。
♥ 2いいねをした人: 居ませんmy-snow-monkey.phpに書く記述を教えていただけますと幸いです。
下記の感じでどうでしょう
add_filter( 'snow_monkey_template_part_render', function( $_html, $_slug ) { if ( 'template-parts/common/infobar' === $_slug ) { $_html = str_replace( '<a class="p-infobar__inner"', '<a class="p-infobar__inner" onclick="ga(\'send\', \'event\', \'click\', \'tel-tap\');"', $_html ); } return $_html; }, 10, 2 );
♥ 2いいねをした人: 居ません@キタジマ氏
iPhone XSの実機では、デモページが横スクロールされてます。
一応、ご報告まで。シミュレーター環境では未確認です。
♥ 0いいねをした人: 居ませんヘッダーコンテンツに入れられているなら、ヘッダーコンテンツの記述をフィルターフックの
theme_mod_header-content
で代入する形にすれば良いと思います。
これだと、HTMLやPHP構文も使えるんで。例としてはこんな感じでどうでしょう?
元々カスタマイザーで設定されているヘッダーコンテンツの記述は削除して使ってみてください。カスタマイザー内のページ速度最適化のヘッダーのキャッシュを有効にしている場合、正しくカウントされないので、そのキャッシュ設定は使わないようにしてください。
if ( ! is_admin() ) { // 管理画面内ではWCクラスでのget_cart_contents_countができないので… add_filter( 'theme_mod_header-content', function( $html ) { $html = '<a class="head_cart" href="' . esc_url( wc_get_cart_url() ) . '">'; $html .= '<i class="icon-cart"></i>'; $html .= '<span class="quantity_badge">' . WC()->cart->get_cart_contents_count() . '</span>'; $html .= '</a>'; return $html; } ); }
一致する検索結果がないときの表示もテーマ側で用意しないといけないから、
Snow Monkey 的にはそういう表示にしたほうが良いかなと思います。
なるほどー。テーマ側で用意していないと検索結果が出ると言う感じです?
それならきちんと用意される方が良いと思います。しかし、そうされる場合でも、”今までと同じように一覧を出すかどうか”ってする事って言うのが、フックなりで可能だとめっちゃ助かります。
現場にも聞いたら「本当は”未入力です”エラーを出してくれる方が良いんだよね」と言う声もあるんですが、
T●Dのテーマとか他のテーマでは空文字時に検索結果を出してるのが多いようで、そう言うテーマを元々使用していた現場では「空文字でも検索される事は多いので一覧のままが良い」と言うのもあります。某テーマはわざわざそう言う細かい事を全然してないし、テーマ側で用意しないといけない事を用意してないだけなんだろなーと今は思ってますが。
「閲覧するユーザーが、空文字で全記事が出ると思っているか」「全記事表示しようとしたらエラーが出たからと言って離脱されるようになるのは一番困る」と。……現場ってめんどくさいですね(笑)
♥ 0いいねをした人: 居ませんSnow Monkeyのヘッダー内に追加するのは、どの程度のカスタマイズが必要でしょうか。
Snow Monkeyのヘッダーは、レイアウト(シンプル、1行…)と位置(上部固定、オーバーレイ…)と、多々のパターンがあるので、全てのパターンでカスタマイズを対応しようとすると結構な量になると思います。
お使いのレイアウトと位置の設定のみに留めておくのであれば、PC時の表示と、モバイル時の表示の2つのパターンの書き換えのみの最低限で済むと思います。
ヒントとしてのサンプルコードを書くのも、そのカスタマイズのパターンの問題もありますので、
先にカートアイコンをどの部分に表示するかのデザインと CSS の記述を決めておかれると、アドバイスしやすいです。♥ 2いいねをした人: 居ません@キタジマタカシ
その動きは、基本的にどっちが正しいのかですね。
WordPress のサイトって URL に?s=
で検索ページになりますが、空文字の時も動作は併用していますから、空文字だろうと検索一覧を表示するのが正しい動きの気もします。
公式ディレクトリにあるテーマでは、ほとんどのテーマでは一覧が出る動作をしているのですが、
一部のテーマで”検索ワードが…”と空文字チェックをしているテーマもあります。とあるシステムでは、空文字であっても検索結果を一覧で出す理由として、全記事をクロールさせる為にSEO的に強くなると書かれてました。ご参考までに。
♥ 0いいねをした人: 居ません下記のコードは、検索一覧のコンテンツ部分を差し替える一例です。ご参考にどうぞ。
add_filter( 'snow_monkey_template_part_render', function( $html, $slug, $name, $vars ) { // 検索ページの時に差し替える為の条件式 if ( is_search() && 'templates/view/archive' === $slug && 'search' === $name ) { // ここから参考ページのように設定 if ( empty( get_search_query() ) ) { // 検索ワードが空なら $html = '<div class="c-entry"><p>検索キーワードが未入力です。</div>'; // 表示するhtmlを代入 } } return $html; } , 10, 4 );
サイドバーなども表示されなくなるかもしれません。
その際は、htmlをDOM操作する形で適度に書き換えるのがベストと思います。また、検索結果と言うのがページタイトルとパンくずでふさわしくない形になるので、それらも差し替えた方が良いのであれば、下記のコードを参考にしてください。
add_filter( 'document_title_parts', function($title_parts) { if ( is_search() && empty( get_search_query() ) ) { $title_parts['title'] = '検索キーワードが未入力です';// ページタイトルを変える } return $title_parts; }, 9, 1 ); add_filter( 'snow_monkey_breadcrumbs', function( $items ) { if ( is_search() && empty( get_search_query() ) ) { $items[count( $items ) - 1]['title'] = '検索キーワードが未入力です'; } return $items; }, 9, 1 );
♥ 1いいねをした人: 居ませんmy snow monkeyに下記を加えてお試しください。
add_filter( 'snow_monkey_related_posts_args', function( $_args ) { // 最大数の変更 $_args[ 'posts_per_page' ] = 12; return $_args; } );
関連記事に該当する記事件数が12件未満の場合は、必ずしも12件表示される訳では無いので、
最大数として12件表示する形となります。もし、12件固定で出したい場合は関連記事として該当させる条件も変更する必要があるかもしれません。
その場合は再度返信などでご質問ください♥ 4いいねをした人: 居ませんCSS記述は追加CSSに追加します。
管理画面の、「外観」→「カスタマイズ」→「追加CSS」です。「メディアと文章」でAとBとして2つ並べていると思いますので、
そのBの方の「メディアと文章」ブロックの「高度な設定」に
.order-reverse
と追加で記述すれば、Bの方の並びだけを変更できると思います。
(Aは変更しないと思うのでそのまま何もしません)CSSの記述を解説しますと、下記の通りです。
@media screen and (max-width: 639px) { # 639ピクセル以下に囲まれているスタイルを適用する .order-reverse .c-row__col:first-child { # c-row__colクラスの最初の要素を… order: 2; # 並び順(order)を2番目にする(0から始まるので実際は3番目だが、説明を解りやすく) } # order-reverseのスタイルのカッコ閉じ } # @mediaのカッコ閉じ
そのため、order-reverseクラスと言ったスタイルを適用した場合のみ、「メディアと文章」などに
639ピクセル未満の場合、最初の要素の並び順を2番目にするカスタマイズが可能となります。♥ 0いいねをした人: 居ませんを参考にして、高度な設定に
order
のスタイルを追加する事でできると思います。
divで設定された要素の並び順を変えるので、上手く使えば文章と画像などの要素も自由に並び順を切り替えできると思います。
お試しください。♥ 0いいねをした人: 居ません10.10.6にて修正されたので、
本カスタマイズは10.10.6以降は必要無しになりました。同様に、メニュー保存時も正しくキャッシュが削除されるようになったようなので、
キャッシュ機能を使用する場合、10.10.6以降の使用を推奨。♥ 1いいねをした人: 居ません読み込みが出来ないリソース(画像やjsファイル…cssなど)を呼び出す回数が多過ぎたのも、原因の1つかと思えます。
プラグインを無効化した事で読み込もうとするリソースの数が減った…崩れて見えるようになった…とも考えられます。理由は…
iOSとMacのSafariやchromeって、WebKitってレンダリングエンジンが使われていまして、
そのエンジンの仕様の1つに、リソースのロードができないのが多過ぎる場合に、強制的に読み込みを遮断する仕組み
があります。
なので、読み込めない403のリソースが多過ぎたりすると、強制的に読み込みを遮断してエラーにするので、そうなってたのでは…とも考えられます。
これは、機種毎にエラー遮断するリソース条件とかがあります。ユーザーエージェントを変更しても変更した機種設定として適用されるんです。
なので、北島さんがユーザーエージェントを変更しただけでもエラーとなったのは、それが理由なのかもしれないです。
(一応、補足って事で書いときます)おそらく、この問題は…リソースを正しく読めるようにさえなればそれらのエラーが解決すると思います。
北島さんがおっしゃるようにまずは.htaccessなどを見直す形でサイトが正常に見えるようにしていただき、その.htaccessをバックアップしてください。しかし、再度起きないようにする為には、原因の特定も必要になると思いますので、
プラグインによっては.htaccessを書き換えるものもありますので、何のプラグインが原因の.htaccessに書き換えているかを調べて、使用しないように注意するのも良いと思います。そちらも併せて対策してみてください。♥ 0いいねをした人: 居ませんグループ化は正しくできていると思います。
グループ内のブロックは他のグループに移動することもできるので正しくグループで選択されてないのではないでしょうか?♥ 0いいねをした人: 居ませんCSSの記述の理解はされていると思いますが
上記コードは、セクションブロックの中にあるh3に適用されるという認識でよいでしょうか。
smb-section__body
クラスの中にあるh3
に適用されると言うのが正しいです。
なのでセクションの枠内(body)内の直接な子要素のh3
に適用されますね。段落と言うのは
p
タグと思いますが、p
タグの中に見出しのh
タグを入れるのは構造上相応しくないと思えます。(過去の投稿で書かれていたのがこの問題でしょうか?)基本的には
に書かれているような構造になります。
html構造にはアウトライン(ブロックレベル)とインラインと言った要素がありますので、その構造を整理されると理解が深まると思います。
別トピックのグループ化の話になりますが、見出しと段落を1つのグループにまとめ、
そのグループに対して、[高度な設定] の [追加 CSS クラス]より CSSクラス名をグループに割り当てる事でそのグループ内のCSSをクラス名で割り当てやすくなると思います。
そちらもお試しください。♥ 0いいねをした人: 居ません -
投稿者投稿