【環境情報】
・baserCMSのバージョン：4.7.6
・レンタルサーバー名：さくらインターネット
・使用テーマ：NewsCMS
・PHPスキル（自己評価）： 全くわからない
Instagramも始めたので、SNS用のアイコンを貼りたい。
場所は、トップページ右側にある「お知らせ一覧」の横か上の辺りを検討中です。
Instagramのアイコンをリンク付けで表示する方法を教えてください。
@Nameko
こんにちは！
使用テーマ：NewsCMS
マーケットのこちらテーマを以下手順で変換されたものを適用されているということでよかったでしょうか？（baser5系へは対応していないテーマのようでしたので念の為の確認です！）
テーマのカスタマイズには以下のドキュメントが参考になるかと思います。
ブラウザの開発者ツール等でカスタマイズしたい要素を確認し、リンクやアイコンの埋め込みを試してみていただけますか？
maeno様
お返事ありがとうございます。
仰るようにbaserCMS4を使用しております。
4→5への変換が必要という事でしょうか？
投稿された時点で、「環境情報」の「baserCMSのバージョン」項に「5.0.0」と記載されていたので、現時点でNamekoさんの環境が「5.0.0」あるいは5系へのアップデートを前提とした「NewsCMSでのアイコン表示」を質問されているのかのいずれか、という前提で手順をコメント(@maenoさんは）されたのだと思います。
ですので、現在の4系環境で継続してNewsCMSを利用する前提で、「NewsCMSでのアイコン表示」をしたいというご意向であれば、特に5系へのアップデートがマストではありません。
申し訳ございません、私の記載ミスでした。訂正しました。
改めてアイコンの設置方法をご存じでしたら、教えてください。
ですよね、了解しました。
SNSアイコンを表示させる方法は色々あると思いますが、あくまで一例ということで、以下のような手順が考えられるかと思います。
fontawesomeというアイコンフォントのサービスはご存じでしょうか？
それを利用して、<header></header>内に必要なSNSアイコンフォントを読み込ませて、リンク付けし、cssでレイアウトを整えると言った手順が手っ取り早いのではないかと思います。
イメージは、こんな感じでしょうか？
はい、theme/news_cms/Layouts/default.phpの「ヘッダー読み込み」部分のコードに以下の様に<div class="sns-icons"></div>で括ったSNSリンクアイコンを表示させるためのコードを追加します。
下の例では、サンプルでFacebook、Twitter、インスタ用の3種類を書いていますが、必要なければFacebook、Twitterの行は削除してください。
href=" "のアドレスは、ご自身のインスタ用に書き直してください。
<!-- ヘッダー読み込み -->
<?php $this->BcBaser->header() ?>
<body>
<header>
<div class="container">
<div class="row">
<div class="col span-12 header">
<div class="sitetitle"><a href="<?php $this->BcBaser->baseUrl() ?>"><?php $this->BcBaser->siteName(); ?></a></div>
<div class="header-box">
<nav>
<div id="open"></div>
<div id="close"></div>
<div id="navi">
<?php $this->BcBaser->globalMenu() ?>
</div>
</nav>
<div class="sns-icons">
<a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-facebook"></i></a>
<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-square-x-twitter"></i></a>
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
</header>
<main>
<section>
次に、SNSリンクアイコンのレイアウトを調整するために、以下の様なコードをtheme/news_cms/css/style.cssの末尾に追記します。
/* ヘッダー部、SNSアイコンの表示
-------------------------------------*/
.header-box {
display: flex;
flex-direction: column;
}
.sns-icons {
margin-left: auto;
}
.sns-icons a {
padding: 0.5rem 1rem;
font-size: 2rem;
}
最後に、theme/news_cms/Elements/header.phpの部分にfontawesomeのCDNリンクの記述します。
<!-- cssを読み込む -->
<link rel="stylesheet" media="all" href="<?php $this->BcBaser->themeUrl() ?>css/sanitize.css" /><!-- リセットCSS -->
<link href="https://use.fontawesome.com/releases/v6.6.0/css/all.css" rel="stylesheet">
<?php $this->BcBaser->css('style') ?><!-- 上書きCSS -->
以上で、たぶんサンプルの様なアイコンが表示されるはずです。既にテーマファイルをいじっている場合に、
うまくレイアウトできないときは、適宜、ご自身でcssを調整するなどなさってください。
=====
8.7追記
すいません。
cssがハンバーガーメニューをOPENした後のメニュー表示幅に影響してしまっていたので修正しました。
確認お願いします。
ありがとうございました。
無事表示されました。
ありがとうございます。修正しました。
アイコンの大きさが font-size で変更できないのは何か影響を受けているのでしょうか…？
2remでも5remでも変わらないです。
.sns-icons a {
padding: 0.5rem 1rem;
font-size: 5rem;
}
で、
の様になります。
ブラウザキャッシュ、サーバーキャッシュを削除するなどしてみてください。
キャッシュクリアで無事解決できました。
この度は色々とありがとうございました。
