Cocoonフォーラム

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

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL：

相談内容：

不具合の発生手順：

解決のために試したこと：

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え（FAQ）
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

フォーラム
Cocoonテーマ
CSSカスタマイズ相談
noto風いいね＆シェアボタンのカスタ...
 
共有:
通知
すべてクリア

[解決済] noto風いいね＆シェアボタンのカスタマイズへのご協力をお願いします

 
CSSカスタマイズ相談
3 投稿
2 ユーザー
1 Reactions
1,258 表示
RSS
ソレガシ
 ソレガシ
(@soregashi)
Eminent Member Registered
結合: 5年前
投稿: 22
Topic starter 2020年7月5日 17:16  

こんにちは。僕は現在、こちらの【記事１】、【記事２】を参考にし、note風シェア＆いいねボタンを設置しようとしている者です。しかしながら、いいねボタンのデフォルトが意図したハートマークではなくグッドマークになってしまうのに加え、モバイル版とPC版でのロゴの位置の高さも顕著になってしまいます。

どなたかこれを改善する方法をお教え願えないでしょうか？長くなりますが、僕のサイトのURL、CSS等はこちらです。太文字が今回、挿入した箇所です。

 

CSS

/*!

Theme Name: Cocoon Child

Template: cocoon-master

Version: 0.0.5

*/
.navi-in>ul .sub-menu {
width: 600px;
flex-wrap: wrap;
}
.navi-in>ul li:hover>ul {
display: flex !important;
}
.navi-in>ul .sub-menu li {
width: 200px !important;
margin: 0;
}
.navi-in>ul .sub-menu li a:hover {
background: #979797;
}
.entry-content {
letter-spacing: 0.03em;
}
/************************************
** ブログカード
************************************/
.blogcard-snippet,
.blogcard-footer {
display: none;
}
.blogcard-wrap {
transition: all .3s;
max-width: 600px;
margin: 2em auto;
}
.blogcard {
border:1px solid #eaeaea !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
padding: 10px;
}
.blogcard-wrap:hover {
background: none;
transform: translateY(-3px);
box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
margin: 0;
}
.blogcard-thumbnail img {
display: block;
}
.blogcard-title {
color: #555;
letter-spacing: 0.5px;
font-size: 15px;
line-height: 1.5;
margin: 10px 0 0 0;
height: 45px;
overflow: hidden;
}
.blogcard-content {
min-height: auto;
margin-left: 185px;
padding-right: 6px;
}
.blogcard-label {
top: -11px;
left: 9px;
padding: 3px 0.6em;
background:#aaa;
padding: 1px 10px;
font-weight: 600;
font-size: 11px;
letter-spacing: 1px;
}
.blogcard-content:after {
content: "クリックして読む";
background: #66c2c3; /* 背景色 */
display: block;
text-align: center;
color: #fff;
font-weight: 600;
letter-spacing: 1px;
width: 180px;
border-radius: 20px;
font-size: 13px;
padding: 1px 0;
margin-top: 6px;
}
@media screen and (max-width: 834px) {
.blogcard-content {
margin-left: 130px;
}
.blogcard-title {
font-size:12px;
line-height: 1.5;
height: auto;
margin:0;
}
.blogcard-content:after {
content: "タップして読む";
}
.blogcard-thumbnail{
width:120px;
}
}
@media screen and (max-width: 560px) {
.blogcard-content:after {
width: 120px;
font-size: 12px;
}
.blogcard-title {
margin:0;
}
}
@media screen and (max-width: 320px) {
.blogcard-thumbnail {
width: 100px;
}
.blogcard-content {
margin-left: 110px;
}
.blogcard-title {
height: 35px;
}
}
ul.mobile-header-menu-buttons li.menu-button .menu-button-in{color:#ffffff;}
.mobile-menu-buttons{
background:#3d434c;
}
.article h2 {
padding: 0;
background: none;
}
.article h3 {
border: none;
padding: 0;
}
.article h4 {
border: none;
padding: 0;
}
.article h2 {
color: #fff;
padding: .8em 1em;
margin-top: 60px;
background: #3d434c;
border-top: 4px solid #667d8c;
border-bottom: 4px solid #667d8c;
}
.article h3 {
color: #3d434c;
padding: .5em 0;
margin-top: 36px;
border-top: 3px solid #3d434c;
border-bottom: 3px solid #3d434c;
}
.article h4 {
color: #3d434c;
padding: .2em 1em;
margin-top: 36px;
border-left: 6px solid #3d434c;
}
.sidebar h3 {
background: none;
font-size: 16px;
letter-spacing: 2px;
display: inline-block;
position: relative;
width: 100%;
padding: 0;
text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
content: '';
position: absolute;
top: 50%;
width: 28%; /*ラインの長さ*/
border-top: 3px solid #444d53; /*ラインの色*/
}
.sidebar h3::before {
left: 0;
}
.sidebar h3::after {
right: 0;
}
.widget_categories ul li a { /*親カテゴリ用のコード*/
color: #333;
text-decoration: none;
padding: 6px 0;
display: block;
padding-right: 4px;
padding-left: 4px;
border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
font-size: 16px;
}
.widget_categories ul li a::before { /*親カテゴリのアイコン*/
font-family: "Font Awesome 5 Free";
font-weight: 900;
   content: "\f0da";
padding-right: 10px;
}
.widget_categories > ul > li > a:first-child {
border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories > ul > li > a:last-child {
border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_categories ul li ul { /*子カテゴリのボックス*/
border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a { /*子カテゴリ用のコード*/
color: #333;
text-decoration: none;
padding: 0 4px 4px 4px;
display: block;
border: none;
}
.widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "・";
padding: 0;
}
/************************************
** 目次
************************************/
.toc{
background:#F9F9F9;
border:none;
display: block;
border-top:5px solid;
border-top-color:#596272;
padding:0 0 20px 0;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
.toc a{
text-decoration:none;
}
.toc ul a{
color:#555555;
font-size: 16px;
margin-right:20px;
}
.toc ul a:before{
content: '';
width: 5px;
height: 5px;
display: inline-block;
border-radius: 100%;
background: #555555;
position: relative;
left: -8px;
top: -3px;
}
.article .toc ul{
list-style: none;
margin-bottom: 0;
padding-left: 20px;
}
.toc-title{
text-align:left;
margin-top:20px;
padding-left: 20px;
margin-bottom:16px;
margin-right:20px;
font-size: 18px;
font-weight: 700;
}
.toc-title:before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content : "\f0ca";
font-size:18px;
margin-right:5px;
color:#FFF;
background-color:#596272;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
padding:14px;
}
blockquote {
position: relative;
padding: 30px 15px 8px 15px;
box-sizing: border-box;
background: #f9f9f9;
border-radius: 5px;
color: #555;
}
blockquote:before{
display: inline-block;
position: absolute;
top: 13px;
left: 15px;
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #cfcfcf;
font-size: 28px;
line-height: 1;
font-weight: 900;
}
blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
   font-size: 0.9em;
}
.author-box .author-name { /*ニックネームのスタイル指定*/
font-size: 1em;
font-weight: normal;
margin-bottom: 0;
}
.author-name a {
text-decoration: none;
color: #333; /*ニックネームの文字色*/
}
.author-widget-name { /*肩書きのスタイル指定*/
font-size: 0.8em;
color: #bbb;
}
.author-box p { /*プロフィール文のスタイル指定*/
margin-top: 2em;
line-height: 1.5;
font-size: 0.9em;
}
.author-box { /*全体を囲むボックスのスタイル指定*/
border: 1.4px solid #8a8e93;
border-radius: 4px;
margin: 1em 0;
line-height: 1.4;
position: relative;
padding: 1.4% 2% 1.8%;
}
.author-follows { /*フォローボタンボックスのスタイル指定*/
background: #50555d; /*フォローボタンボックスの背景色*/
margin: 0 -20px -20px -20px;
padding: 20px 0;
}
.author-box .sns-follow-message { /*フォローボタン上部メッセージのスタイル指定*/
display: block;
color: #fff;
}
.author-box .sns-follow-buttons a.follow-button { /*ボタンのスタイル指定*/
font-size: 18px;
width: 36px;
height: 36px;
border-radius: 50%;
margin-bottom: 4px;
margin-right: 4px;
background: none; /*フォローボタン背景*/
color: #fff; /*アイコンの色*/
border: 1px solid #fff; /*ボーダーの指定*/
transition: .5s;
}
.author-box .sns-follow-buttons a.follow-button:hover {
background: #3d434c; /*フォローボタンのマウスホバー時の背景色*/
opacity: 1;
}
.author-box a.follow-button span {
line-height: 32px;
}
.author-box .icon-twitter-logo::before {
 font-family: "Font Awesome 5 Brands";
　font-weight: 400;
 content: "\f099"
}
.wpulike-default .count-box {
font-size: 16px;
margin-left: -4px;
box-shadow: 0 0 0 1.4px #bdbdbd inset;
color: #bdbdbd;
}

.wpulike-default .wp_ulike_btn {
background-color: #ffffff;
}

.wpulike-default .count-box:before {
border: 1.4px solid transparent;
border-bottom-color: #bdbdbd;
border-left-color: #bdbdbd;
}

.wpulike-default .wp_ulike_put_image.wp_ulike_btn_is_active:after {
font-family: "Font Awesome 5 Free";
content: '\f004';
font-weight: 900;
color: #a6a6a6;
background:none;
}

.wpulike-default .wp_ulike_put_image:after {
font-family: "Font Awesome 5 Free";
content: '\f004';
font-weight: 900;
color: #a6a6a6;
background: none;
}

.sponsored.dfont {
display: none;
}

/*モバイル*/
.like-button-mobile .wpulike .wp_ulike_general_class {
position: fixed;
bottom: 36px;
z-index: 9;
right: 16px;
font-size: 20px;
}

.like-button-mobile .wpulike-default .count-box {
display: none;
}

.like-button-mobile .wpulike-default .wp_ulike_put_image:after {
color: #e93f60;
}

.like-button-mobile .wpulike-default .wp_ulike_put_image:after {
position: relative;
left: 22px;
top: 8px;
font-size: 16px;
}

.like-button-mobile .wpulike-default .wp_ulike_btn {
color: #616161;
background-color: #ffffff;
min-height: 48px;
min-width: 48px;
border: 2px solid #e93f60;
border-radius: 50%;
}

.like-button-mobile .wpulike .wp_ulike_btn {
padding: 0px 0px;

}
/*--------------------------------------
モバイル用シェアボタン
--------------------------------------*/
.share a {
position: fixed;
bottom: 36px;
height: 40px;
width: 40px;
text-align: center;
border-radius: 50%;
z-index: 9;
font-size: 1.1em;
}

.s-twitter .fab.fa-twitter {
font-size: 19px;
position: relative;
top: 5px;
}

.s-twitter a {
left: 16px;
background: #53aced;
color: #ffffff;
}

.s-hatena a {
font-size: 20px;
left: 72px;
background: #1F85C5;
color: #ffffff;
}

.futo {
font-weight: bold;
position: relative;
top: 1px;
}

.s-hatena a {
text-decoration: none;
}

.s-line .fab.fa-line {
font-size: 21px;
position: relative;
top: 5px;
}

.s-line a {
left: 128px;
background: #02B402;
color: #ffffff;
}

 

functions.php

<?php //子テーマ用関数

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

//以下に子テーマ用の関数を書く
//プロフィールボックス生成関数
if ( !function_exists( 'generate_author_box_tag' ) ):
function generate_author_box_tag($id = null, $label = null, $is_image_circle = 0){
$user_id = get_the_author_meta( 'ID' );
if (!$user_id || is_404()) {
$user_id = get_sns_default_follow_user();
}
if ($id && get_userdata( $id )) {
$user_id = $id;
}
?>
<div class="author-box border-element no-icon cf">
<?php //ウィジェット名がある場合
$image_class = $is_image_circle ? ' circle-image' : null; ?>
<figure class="author-thumb<?php echo $image_class; ?>">
<?php echo get_avatar( $user_id, 200 ); ?>
</figure>
<div class="author-name">
<?php
if ($user_id) {
$description = get_the_author_description_text($user_id);
//$description = trim(get_the_author_description_text());
if (empty($description)) {
$description = get_the_author_meta('description', $user_id);
}
$description = wpautop($description);
if (!is_buddypress_page()) {
//プロフィールページURLの取得
$profile_page_url = get_the_author_profile_page_url($user_id);
$author_display_name = strip_tags(get_the_author_display_name($user_id));
if ($profile_page_url) {
$name = '<a href="'.$profile_page_url.'">'.$author_display_name.'</a>';
//$name = get_nofollow_link($profile_page_url, $author_display_name);
//echo $name;
} else {
//$name = get_the_author_posts_link($user_id);
$user = get_userdata( $user_id );
$name = sprintf( '<a href="%1$s" title="%2$s" rel="author">%3$s</a>',
esc_url( get_author_posts_url( $user->ID, $user->user_nicename ) ),
/* translators: %s: author's display name */
esc_attr( sprintf( __( 'Posts by %s' ), $user->display_name ) ),
$user->display_name
);
//_v($user);
}
} else {
$author_display_name = strip_tags(get_the_author_display_name($user_id));
$author_website_url = strip_tags(get_the_author_website_url($user_id));
$description = strip_tags($description);
$name = $author_display_name;
if ($author_website_url) {
$name = '<a href="'.$author_website_url.'" target="_blank" rel="nofollow">'.$author_display_name.'</a>';
}
//echo $name;
}
echo apply_filters( 'the_author_box_name', $name );
} else {
echo __( '未登録のユーザーさん', THEME_NAME );
}
?>
</div>
<?php if ($label): ?>
<div class="author-widget-name">
<?php echo $label; ?>
</div>
<?php endif ?>
<div class="author-content">
<div class="author-description">
<?php
if ($description) {
echo $description;
} elseif (!$user_id) {
if (is_buddypress_exist()) {
echo __( '未登録のユーザーさんです。', THEME_NAME );
echo '<br>';
echo __( 'ログイン・登録はこちら→', THEME_NAME );
echo '<a href="'.wp_login_url().'">';
echo __( 'ログインページ', THEME_NAME );
echo '</a>';
}
} elseif (is_user_logged_in()) {
echo __( 'プロフィール内容は管理画面から変更可能です→', THEME_NAME ).'<a href="/wp-admin/user-edit.php?user_id='.get_the_author_meta( 'ID' ).'">'.__( 'プロフィール設定画面', THEME_NAME ).'</a><br>'.__( '※このメッセージは、ログインユーザーにしか表示されません。', THEME_NAME );
}
?>
</div>
<?php if ($user_id): ?>
<div class="author-follows">
<?php
set_query_var( '_USER_ID', $user_id );
get_template_part('tmp/sns-follow-buttons');
set_query_var( '_USER_ID', null ); ?>
</div>
<?php endif ?>
</div>
</div>
<?php
}
endif;
//ウィジェットでPHPを可能にする
function widget_text_exec_php( $widget_text ) {
if( strpos( $widget_text, '<' . '?' ) !== false ) {
ob_start();
eval( '?>' . $widget_text );
$widget_text = ob_get_contents();
ob_end_clean();
}
return $widget_text;
}
add_filter( 'widget_text', 'widget_text_exec_php', 99 );

 

投稿本文下

<div class="like-button-mobile">[wp_ulike]</div>

 

投稿本文下

<div class="share notelike">

<div class="share s-twitter">
<a href="https://twitter.com/share?url=<?php echo get_the_permalink(); ?>&via=MethodBlog&text=<?php echo get_the_title(); ?>" rel="nofollow" target="_blank">
<i class="fab fa-twitter"></i></a></div>

<div class="share s-hatena">
<a href="https://b.hatena.ne.jp/entry/panel/?mode=confirm&url=<?php echo get_the_permalink(); ?>" rel="nofollow" target="_blank">
<span class="futo">B!</span></a></div>

<div class="share s-line">
<a href="https://timeline.line.me/social-plugin/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow">
<i class="fab fa-line"></i></a></div>

</div>


   
わいひら
 わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
2020年7月5日 19:36  

申し訳ないですが、独自カスタマイズのカスタマイズ指南はサポートの対象外とさせていただいています。
なので、僕としてはお答えできかねます。


   
ソレガシ
 ソレガシ
(@soregashi)
Eminent Member Registered
結合: 5年前
投稿: 22
Topic starter 2020年7月5日 20:00  

@yhira　ルールを見逃していました…返信ありがとうございます。


   
わいひら reacted
Forum Jump:
  前のトピックへ
次のトピック  
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。

「いいね！」機能はフォーラム登録者のみが利用できる機能です。

（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

ホーム
Cocoonフォーラム
タイトルとURLをコピーしました