キーワードを入力して検索できます

  1. Hirameki 7ヘルプセンター
  2. 活用事例解説：他の会社での使い方を見てみよう
  3. 0１.Webサイト

【01.Webサイト】Case1.Webサイトにブログを載せる

この記事では、Hirameki 7のWebサイトをブログのように利用する方法について説明しています。Hirameki 7ではいわゆる一般的なブログ機能はご用意がありません。しかし、ブログのようにコラムを日常的に投稿してページを作成することもできますので、その方法について説明します。また、ブログなどの日常的な投稿の有用性などについても説明しています。

 

 

 

目次

  1. 他のブログサービスを利用する
  2. パーツコピーを利用する
  3. ちょっと高度な作成方法

 

 

 

1.他社ブログサービスを利用する

Hirameki 7では、残念ながらブログを掲載する機能をご用意していません。このあと、擬似的にブログのように利用する方法についても説明しますが、既にあるブログサービスに比較すると若干ではありますが、手間がかかります。そこで、既にブログ機能のある他社サービスのブログを利用してブログを作成し、その記事をHirameki 7のページ内に貼り付ける方法をご紹介します。

 

外部ブログサービスを利用する利点

SNSの台頭によりだいぶ下火になってきたとは言え、文字数制限や画像の貼り付けや様々な表現ができるブログサービスは依然として多くの利用者がいます。そして多くのブログサービスにおいては、サービスのトップ画面で注目記事やよく読まれている記事などのキュレーションエリアが存在します。そこからの流入を、そのままHirameki 7で作成したWebサイトへの流入に繋げることが期待できます。そして、多くのブログサービスでは他のサイトへ記事を埋め込むための「RSS」を提供しています。

 

NOTEのRSS取得方法

https://www.help-note.com/hc/ja/articles/4402395202841

※外部サイトです。

はてなBlogのRSS取得方法

https://help.hatenablog.com/entry/feed

※外部サイトです。

※はてなBlogの場合、RSSのURLのみの提供のようです。埋め込み用のタグを取得する場合、こちら　のようなサービスをご利用ください。

 

上記のようなサービスで取得した埋め込み用のコードは、Hirameki 7のHTMLパーツを使ってページ内に配置することができます。

 

HTMLパーツで追加したコードは、編集画面・プレビュー画面では表示されない場合がありますので保存の上、ページ公開を行って表示の確認を行ってください。

 

2.パーツコピーを使って作成する

Hirameki 7のWebサイトでは編集したパーツをコピーする機能があります。この機能を使うことでブログ記事をテンプレートとして利用することができます。

 

コピーしたパーツは、パーツを配置したい場所で「＋」をクリック「パーツを貼り付け」をクリックするとコピーされたパーツが配置されます。

 

また、見出しパーツを使って記事のタイトルを設定するときに、

 

<a id="2025/01/31">2025年1月31日</a>

のように

<a id="半角文字列">タイトル</a>

とIDを設定しておくと、記事が増えて来たときにアンカーリンクを設定する際に便利です。

 

記事が増えてきたあとは、ページ上部にテキストパーツを使ってメニューを作成するのも良いでしょう。メニューには

<a href="#2025/01/31">1月31日　トライベックDAYが開催されました</a>
<a href="#2025/2/1">2月1日　トライベックJAMを開催しました</a>

のように

<a href="#見出しパーツに設定したID">タイトル</a>
<a href="#見出しパーツに設定したID">タイトル</a>

と設定することで、メニューからページ内リンクを設定することができます。

 

 

3.ちょっと高度な作成方法

Hirameki 7ではHTMLコードを追加してオリジナルのコンテンツを追加することも可能です。

例えば、こちらの画像のようにページの右下にブログ記事への追従型のメニューを追加することも可能です。

 

【コード例】

メニューボタンのCSSコード

<style>
/* フロートボタン */
.float-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background: #007bff;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 50%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.3s ease;
z-index: 1000;
}

/* ホバー時のアニメーション */
.float-button:hover {
transform: scale(1.1);
}

/* メニュー */
.float-menu {
position: fixed;
bottom: 90px;
right: 20px;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: none; /* 初期状態で非表示 */
overflow: hidden;
z-index: 999;
}

/* メニュー項目 */
.float-menu a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: black;
border-bottom: 1px solid #ddd;
transition: background 0.3s;
}

.float-menu a:hover {
background: #f0f0f0;
}
</style>

こちらのコードを編集画面の「ページプロパティ」＞「タグ」＞「<head>直後」の入力欄に貼り付けて保存をクリックします。

 

 

 

さらに、以下のHTMLコードとスクリプトを「HTMLパーツ」で追加します。

 

<div class="float-button" id="menuButton">☰</div>

<!-- メニュー -->
<div class="float-menu" id="floatMenu">
<a href="#2025/01/31">1月31日　トライベックDAYが開催されました</a>
<a href="#2025/2/1">2月1日　トライベックJAMを開催しました</a>
</div>

<script>
document.getElementById('menuButton').addEventListener('click', function() {
let menu = document.getElementById('floatMenu');
if (menu.style.display === "block") {
menu.style.display = "none";
} else {
menu.style.display = "block";
}
});
</script>

 

上記のコードのうち、以下の部分を編集してHTMLパーツで追加します。

<div class="float-menu" id="floatMenu">
<a href="#ここにID">ここにタイトル</a>
<a href="#ここにID">ここにタイトル</a>
</div>

 

※HTMLコードについては、サポート外となります。お問い合わせいただきましても、お答えできない場合がございますので、ご了承ください。

 

ブログ記事は、作成し続けてゆくことが重要です。メニューをわかりやすく作った場合でも、あまりにも長いページでは視認性も悪くなりますので、一定量書いたあとは新たにページを作成し、月単位や年単位でまとめて作成しておくと良いでしょう。

 

関連ページ