人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなブログのトップページに表示させる”記事の概要”が、スマホから閲覧したとき、表示されなくなってしまいました。
記事の冒頭の文章が表示されます。パソコンから閲覧すると、”記事の概要”に設定した文章が表示されます。スマホでもトップページに”記事の概要”の文章がでるようにしたいです。

調べましたが、どうしても類似例が見つけられませんでした。
CSSなどで変更できるか教えていただきたいです。よろしくお願いします。

ブログの状況です。
・最近proにして、パソコンとスマホのコードを別にしました。
・”記事の概要”が表示されているパソコンの方は、トップページにいくとアーカイブページにいくカスタマイズをしています。

ブログURL
http://www.quest-mile.com

●質問者: 空国コトノハ
●カテゴリ:はてなの使い方 ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

はてなブログのトップページに表示させる”記事の概要”が、スマホから閲覧したとき、表示されなくなってしまいました。

自分で消してます :-)

デザインのスマホのタイトル下に書いている style だと思いますが、#header を丸ごと消してます。

/* ### はてなヘッダーの非表示 ### */
#globalheader-container {display:none;}
/* ### 余白調整 ### */
#container {padding-top:0px;}
/* ### デフォルトの丸いアイコン等の非表示 ### */
#header{ display:none;}/* ★ これで消えてる */

スタイルだけで良い感じの場所に表示するのは難しそうなので、スクリプトを書いて記述をコピーする感じでしょうか。
例えば、こんなのとか。

/* ### ページ更新時に少しスライドさせる ### */
window.onload = function () {
 autoScroll();
 // ★ 以下を追加
 $("#title-bar .title").append("<div>" + $("#blog-description").text() + "</div>");
}
var $scrollX = 0;
var $speed=0;
 ...

ただ、これだけだと記述が収まるスペースが無いので、スタイルを調整する必要があります。
例えば、こんな感じとか。

#titlebar .title {
 line-height: inherit;
}
#titlebar .title div {
 font-size: 9px;
}



追記です。
CSS がよく分からないとのことなので、変更点をそのまま書きます。
デザインのスマホのタイトル下に書いている以下の部分。

<script type="text/javascript">
/* ### ページ更新時に少しスライドさせる ### */
window.onload = function () {
 autoScroll();
}
var $scrollX = 0;
var $speed=0;
function autoScroll() {
 var $sampleBox = document.getElementById( "menu-scroll" );
 $sampleBox.scrollLeft = ++$scrollX;
 $speed+=3;
 if( $scrollX < 25 ){
 setTimeout( "autoScroll()", $speed );
 }
}
</script>

その部分を、以下のようにしてください。

<script type="text/javascript">
/* ### ページ更新時に少しスライドさせる ### */
window.onload = function () {
 autoScroll();
 // ★以下の一行を追加
 $("#title-bar .title").append("<div>" + $("#blog-description").text() + "</div>");
}
var $scrollX = 0;
var $speed=0;
function autoScroll() {
 var $sampleBox = document.getElementById( "menu-scroll" );
 $sampleBox.scrollLeft = ++$scrollX;
 $speed+=3;
 if( $scrollX < 25 ){
 setTimeout( "autoScroll()", $speed );
 }
}
</script>
<!-- 以下の style タグで囲まれている 8行(style タグを含む)を追加 -->
<style>
#titlebar .title {
 line-height: inherit;
}
#titlebar .title div {
 font-size: 9px;
}
</style>

script タグの中に一行追加して、style タグを 8行追加してます。
他は変更する必要はありません。

いきなりメインブログをいじるのは嫌だ、というのはとても分かるので、テスト用のブログで試すのであれば、そこの URL を教えてください。
メインブログはプロフィールからたどれるのですが、メイン以外のブログを見つけるのは難しいのですよ。



さらに、追記です。
すみません、スクリプトを間違えてました m(_ _)m

window.onload = function () {
 autoScroll();
 // ★以下の一行を追加
 $("#title-bar .title").append("<div>" + $("#blog-description").text() + "</div>");
}

の「以下の一行を追加」のところなんですが、#title-bar#titlebar というようにハイフンを削除してください。

 $("#titlebar .title").append("<div>" + $("#blog-description").text() + "</div>");
 // ↑こういうふうに



またまた、追記です。

記事一覧ページで一つ一つの記事のタイトル下にある”記事の説明”ともいうべき箇所の文章が、はてなブログの編集オプション”記事の概要”で設定した文章ではなく、記事冒頭の文章が表示されてしまう

こちらの対応をやってみました。

タイトル下にブログの説明を入れるカスタマイズに加えて、スクリプトを 15行ほど追加、スタイルシートを 3行追加です。

<script type="text/javascript">
/* ### ページ更新時に少しスライドさせる ### */
window.onload = function () {
 autoScroll();
 $("#title-bar .title").append("<div>" + $("#blog-description").text() + "</div>");
 // ★ 以下の 15行を追加
 Array.prototype.forEach.call(document.querySelectorAll("a.entry-list-anchor-block"), function(entry) {
 const max_length = 72;
 var xhr = new XMLHttpRequest();
 xhr.open('GET', entry.href, true);
 xhr.onload = function(ev) {
 if (ev.target.status <= 200) {
 var dc = ev.target.response.querySelector('meta[property="og:description"]');
 var e = entry.querySelector(".entry-body > .entry-content > p");
 e.innerHTML = dc.content.length > max_length ? (dc.content.substring(0, max_length) + "...") : dc.content;
 e.style.display = "initial";
 }
 };
 xhr.responseType = 'document';
 xhr.send(null);
 });
 // ★ 追加は、ここまで。
}
var $scrollX = 0;
var $speed=0;
function autoScroll() {
 var $sampleBox = document.getElementById( "menu-scroll" );
 $sampleBox.scrollLeft = ++$scrollX;
 $speed+=3;
 if( $scrollX < 25 ){
 setTimeout( "autoScroll()", $speed );
 }
}
</script>
<!-- 以下の style タグで囲まれている 8行(style タグを含む)を追加 -->
<style>
#titlebar .title {
 line-height: inherit;
}
#titlebar .title div {
 font-size: 9px;
}
/* ★ 以下の 3行を追加 */
a.entry-list-anchor-block .entry-body > .entry-content > p {
 display: none;
}
</style>

コメントでも書きましたが、スマホ版の記事一覧では、HTML に「記事の概要」が入っていないので、記事一覧が表示された後に、個々の記事のページから記事一覧を取得して埋め込む、という戦略です。

最初の表示で、本来の機能の記事の先頭がちらっと見えてしまうので、最初はスタイルシートで見えなくしておいて、個別の記事から「記事の概要」を取得した後に見えるようにしています。

後、PC版では「記事の概要」を 116文字くらいで切り詰めているっぽいのですが、スマホの表示だと、それでも長いような感じがしますので、72 文字で切り詰めています。

 const max_length = 72;

空国コトノハさんのコメント
お早い回答ありがとうございます!こんなに詳しく教えてくださりありがたいです。 本当に申し訳ないんですが、同じ条件のテストブログで書いてある通り、 1.#header{ display:none;}を消す 2. $("#title-bar .title").append("<div>" + $("#blog-description").text() + "</div>"); } var $scrollX = 0; var $speed=0; ... を該当箇所に追加。 3.<style type="text/css"> #titlebar .title { line-height: inherit; } #titlebar .title div { font-size: 9px; } </style> をタイトル下に追加 したのですが、できませんでした。 まだブログをはじめて3ヶ月でCSSなどもそこからだったので、まだはっきりと箇所がわかっているセレクタのプロパティと値を変えるくらいしかできません。 残念ですが、少しずつ学んでいってなにがかいてあるか理解できるようになってから、またやってみたいと思います。 ありがとうございました。

a-kuma3さんのコメント
回答に追記しました。 テストブログの方で試すのであれば、その URL を教えてもらえると、そこの修正内容を確認できるので助かります。

空国コトノハさんのコメント
追記ありがとうございます。本当にありがたいです。 テストブログのほうは作業用で公開できる状態ではないので、メインブログのほうに教えていただいたコードをコピペさせていただいたのですが、うまくできませんでした。更新しなければ適用されないのかもしれないと思い、”記事の概要”の内容を変えて記事を更新したのですが(Netflixの字幕付きアニメの記事)、それでも適用されない状況です。教えていただいたのに申し訳ないです。 これ以上時間を使わせていただくのは心苦しいので、よければCはてなブログのCSSがわかるようになる本でおすすめなどあれば教えてもらえたらうれしいです。本来は自分でやるのが筋だと思いますので。丁寧に教えてくれ、ありがとうございます。

a-kuma3さんのコメント
すみません、元々のスクリプトが間違ってました <tt>m(_ _)m</tt> 回答に更に追記しました。 今度は、行けると思います。

空国コトノハさんのコメント
さらに追記いただきありがとうございます。 指摘いただいたとおり、修正した所、ブログタイトルの下に”ブログの説明”がでるようになりました。とてもおしゃれで気にいってます。ありがとうございます! しかし「ヘッダーをまるごと消してしまっている」という指摘で気づくべきだったのですが、自分が質問でお尋ねしたのは、この箇所ではありませんでした。まぎらわしくなってしまい、本当にすいません。 お尋ねした内容は、記事一覧ページで一つ一つの記事のタイトル下にある”記事の説明”ともいうべき箇所の文章が、はてなブログの編集オプション”記事の概要”で設定した文章ではなく、記事冒頭の文章が表示されてしまうため、”記事の概要”で設定した文章を表示できるようにする方法はあるかということでした。まぎらわしくてすいません。

空国コトノハさんのコメント
私は記事冒頭にクレジットじゃない写真を載せるときは、著作権表示と引用サイトを記載しています。そのため”記事の概要”を設定しないと記事一覧から見える一つ一つの記事の説明が著作権表示からはじまってしまいます。パソコンでは設定したとおりの文章が出ているのですが、スマホでは出ていないという状況です。

a-kuma3さんのコメント
>> お尋ねした内容は、記事一覧ページで一つ一つの記事のタイトル下にある”記事の説明”ともいうべき箇所の文章が、はてなブログの編集オプション”記事の概要”で設定した文章ではなく、記事冒頭の文章が表示されてしまうため、”記事の概要”で設定した文章を表示できるようにする方法はあるかということでした。 << ああ、なるほど(うっかり屋で申し訳ない)。 今のスマホ用の表示では、記事一覧の HTML に「記事の概要」が埋まってないので、対応方法として思いつくのは、ふたつあります。 - レスポンシブデザインに対応したテーマを使う<br>今、使っている Brooklyn というテーマはレスポンシブデザインに対応しているようなので、デザインのスマホの詳細設定で「レスポンシブデザイン」にチェックを入れる。<br>質問文に「パソコンとスマホのコードを別にしました」とあるので、レスポンシブデザインを使うのは本意ではないのかもしれません。 - 個々の記事から「記事の概要」を取ってくる<br>javascript でできなくはありません。<br>ちょっと重たくなりますが、元々、はてなブログは重たいので、あまり気にならないかもしれません。 どうしましょうか。

空国コトノハさんのコメント
返信ありがとうございます! ここまでスマホ独自のデザインでカスタマイズしてきたため、できればjavaScriptを試してみたいと思っています。ここまでたくさん教えていただいきありがとうございます。時間に不都合がなければ教えてもらえたらうれしいです。ポイントを付記できるようでしたら、相場価格をお支払します。よろしくお願いします。

a-kuma3さんのコメント
明日とかになっちゃうかもしれませんが、やってみます。 ポイントのことは、気になさらずとも結構です <tt>:-)</tt>

空国コトノハさんのコメント
本当にありがとうございます!いつになっても構いません。 ブログタイトルの下にブログの説明がはいるようになり、とても気にいっています!ありがとうございました!

a-kuma3さんのコメント
回答に追記しました。 うまく動くと良いなあ。

空国コトノハさんのコメント
本当に、本当にありがとうございます!しっかりと”記事の概要”が表示されました。とてもうれしいです! デザインの関係で、文字数は50字にしました。やっと納得のいくスマホデザインにすることができました。かさねがさねありがとうございます。a-kuma3さんに回答いただけてよかったです。ありがとうございました。

a-kuma3さんのコメント
よかった、よかった。 Pro ユーザの PC版ページでは[http://staff.hatenablog.com/entry/2017/06/01/173000:title=/archive に飛ばさなくても一覧形式を指定できるようになった]そうなので、そのうち必要なくなるかもしれませんね。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ