只今深夜1時過ぎ、どうも、こんばん私です。
本日は『アーヴェストホテル蒲田(東口) オフィシャルブログのカスタマイズ』についてお話したいと思います。いやはや、bloggerって他のブログに比べて本当～にカスタマイズが難しい(`・ω・´)
それでも試行錯誤しながら変更してみました。ブログに興味がある方、カスタマイズにお悩みの方、これからブログを始められる方に少しはお役に立てる記事になっておりますので是非ご覧頂ければ。
それでは早速参ります。
① 記事タイトルのレイアウトを変更
変更前
変更後
これを入れる事によってどうなるか？
シャレオツですよね！(`・ω・´)
と、お洒落感ももちろん大事なのですが真面目な話をすると、やはり記事タイトルのレイアウトがしっかりされているとPC表示・スマホ表示がかなり綺麗に見えます。下線も入れる入れないではメリハリが段違いですね。
ちなみに、表記の方法はTOP画面 テンプレート → カスタマイズ → 上級者向け → CSSを追加
ここにぶち込むコードは
#fixed-box{
position: fixed;
top: 10px;
z-index: 0;
}
.footer-outer {
position: relative;
z-index: 1;
background-color: #FCFCFC;
}
.entry-title {
font-weight: bold;
font-size: 14px;
position: relative;
padding: 0 .5em .5em 2em;
border-bottom: 1px solid #ccc;
}
.entry-title::before,
.entry-title::after {
position: absolute;
content: '';
border-radius: 100%
}
.entry-title::before {
top: .2em;
left: .2em;
z-index: 2;
width: 18px;
height: 18px;
background: rgba(150, 150, 150, .5);
}
.entry-title::after {
top: .7em;
left: .7em;
width: 13px;
height: 13px;
background: rgba(210, 210, 210, .5);
文字の大きさだったり、装飾の大きさ、下線の色なんかを表してますね。これはGoogle先生やYahoo先生に『ブログ 記事タイトル レイアウト変更』とぶち込むと他にも色々出てきます！(`・ω・´)
② 表記文字をメイリオフォントに変更
そもそも日本語の文字は、「明朝体」と「ゴシック体」に大別することができます。
【明朝体】
横線に対して縦線が太く、横線の右端、曲り角の右肩に三角形の山（ウロコ）がある書体です。
【ゴシック体】
横線と縦線の太さがほぼ同じで、ウロコが（ほどんど）ない書体です。
ここはbloggerも基本書体があったり、好みの問題もあったり、ラジバンダリもありますが、個人的にかっけーっと思うブログの文字表記は大抵メイリオなんですね。ちなみにメイリオは和文ゴシック体フォントです。
メイリオの簡単な特徴としては、Windowsでも読みやすいフォント。これ大事なんですよね。
表記の方法はTOP画面 テンプレート → カスタマイズ → 上級者向け → CSSを追加
ここにぶち込むコードは
body{
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif !important;
}font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif !important;
メイリオフォント使うよ～って意味合いです。個人的には海外ブランドで使われてるBatangやAppleで採用されてるMyriad、Louis Vuitton採用のFuturaとか使ってみたいんですけど、正直全くわからんですね！(`・ω・´)
③ 全記事にラベルを付けました
こちらはPC表示だと右サイドバーに設置しました。スマホ表示は現在検討中です。ラベルを付ける一番の利点は、関連する記事がまとめて表示できる事ですね(`・ω・´)
ちなみに★スタッフ★紹介以外にもラベルと色々用意しておりまして、ざっと
Didean(ディデアン)
HP変更情報
SHAMPOO BAR
アーヴェストホテル蒲田(東口)
アーユルヴェーダブッフェ
アルバイト情報
イベント紹介
お得情報
カウトダウン情報
クリスマス
スタッフ紹介記事
スリランカ料理
ディラーニさん
にほんブログ村
バレンタイン
プレゼント
ホテルサービス紹介
ホテルまでのご案内
ホワイトデー
ラーメン
レイアウト変更記事
レストラン朝食
レディースデー
羽根つき餃子
下町ロケット
花火大会
蒲田行進曲
記事振り返り
客室紹介
黒湯温泉
春休み
旬のお料理
新作プラン紹介
新担当記事
大田区蒲田の街紹介
卓上カレンダー
番外編
現在はこんな感じでいろ～～～んなラベルを用意してます（※現在も増殖中）とりあえず今までの全記事に気合いでラベル付けしたりましたよ！赤字は人気ラベルですね(`・ω・´)
ちなみに、今使っているラベルはbloggerにある基本ラベルではなく、ちょっと恰好良くする為に色も形も変更してます。
表記の方法はTOP画面 テンプレート → カスタマイズ → 上級者向け → CSSを追加
ここにぶち込むコードは
.sidebar ul{
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .widget-content{
padding: 10px 15px;
margin: 0;
border: 1px solid #C0C0C0;
background-color: #FFFFFF;
position: relative;
}
.Label li {
padding: 5px 5px;
float: left;
margin: 0px 3px 3px 0px;
background-color: #0077B9;
color: #B8B8B8;
font: 12px'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
.Label li a {
color:#FFFFFF;
text-decoration:none;
}
.Label li:hover {
background-color:#2E2E2E;
}
大きく変更した事と言えば、1ラベル1列で表示されてるものを、ラベル文字が少ない物は2列、3列になるように並べ替えてみました。ちょっとコンパクトに、そして見やすく表示してます(`・ω・´)
.Label li a {
color:#FFFFFF;
text-decoration:none;
}
他にも♯ＦＦＦＦＦＦのリンクカラーを消して、ＰＣ表示でクリックした時下線を付けたかったので、
text-decorationを削除しました。
④ PC表示をスッキリコンパクトにしました
元々は記事TOPにアイキャッチとして画像を置いてから文章を書いてました。ＴＯＰにアイキャッチを持ってくるメリットは、記事の印象がある程度一発でわかる事です。
これは私がアイキャッチ用に作った画像ですが、こういうのが記事のド頭にあると、『どないしたんやぁぁぁΣヽ(ﾟДﾟ○)ﾉ、これは記事見てみよ(*´･д･)σポチッとな』という風に、より記事に興味を持って頂ける可能性が上がります。
ただ、もちろんデメリットもあり、アイキャッチをＴＯＰに持ってくるとそれだけで10行程取られてしまうんですね。大きな画像だと20行以上？そうするとスマホ表示にはあまり関係ないですが、PC表示だと1記事毎の上下幅がかなり取られてしまい昔の記事を見ようとすると、
前の投稿ρ('-'* ) ﾗｰﾒﾝ
前の投稿ρ('-'* ) ﾂｹﾒﾝ
前の投稿ρ(ﾟ∀ﾟ ) ﾎﾞｸｲｹ
前の投稿ρ(ﾟДﾟ) ﾒﾝﾄﾞｸｾｪ！
こんな感じで、昔の投稿を読む為に、何回も何回も前の投稿をクリックして遡らないといけないんです。正直面倒ですよね。
しかし、過去にも面白くて是非読んで頂きたい記事が沢山ある。う～ん、どうするかな～と考えた末に思い付いたのが、記事TOPには画像は設置せず、記事を読むをクリックした先に設置する事にしました。
この記事を読むの部分はPC表示でしか活躍せず、スマホ表示だと普通に見れちゃうんです。変更の仕方は～、、、わかりまへん！！(`・ω・´)
ただ個人的にはＰＣと違い、スマホでいちいちクリックしないと続きが読めないなんて、そんな読みたい時に読めないこんな世の中のブログはポイズンなので、ここはわからないままでも良いと思ってます。ちなみにこの記事を読む表示もTOP画面に対して1記事をコンパクトにまとめる為に使ってます。
ちなみにスマホだと、どこに画像を置いても
こんな風に綺麗に表示されます。自画自賛ですが、改めて見ても恰好ぶーなブログですね！(`・ω・´)
⑤ 今更ですが、見出しのレイアウトも変更してます。
ここは結構前に変更してたのですが、改めてお伝えしますと。
見出しには色んな種類があるのですが、基本設定で見出しを付けても太文字になるだけで殆ど変わりません。ですので上記のようにキッチリとした見出しを付ける事によって、そこの文章が強調されるんですね。『届けこの思い！！』って時に大活躍してくれます(`・ω・´)
表記の方法はTOP画面 テンプレート → カスタマイズ → 上級者向け → CSSを追加
ここにぶち込むコードは
.entry-content h3{
color: #444444;
padding: 10px 15px;
border-left: 10px solid #e07000;
border-bottom: 1px solid #e07000;
}
ここも文字の大きさだったり、装飾の大きさ、下線の色なんかを表してますね。
後、.entry-content h3 ←この『 h3 』って所で『h3(小見出し)を変更しまっせー』って意味合いなんですね(`・ω・´)これが仮に『 h2 』だったら？？？
『 知ってるか？おれはひかりのことが大好きなんだぜ。 』
そうですね。
( ﾟ∀ﾟ)っ『それはH2（野球漫画）の名言やー』
とツッコミを入れてくれたお客様にはもれなく、私とフロントでキャッチボールができる券をお配りしましょかね(`・ω・´)バッチコイ！！h2 h1で『見出し』や『準小見出し』を変更してもなんら問題ありません。
⑥ 記事タイトル下にラベルを付けてみました
こんな感じでＰＣ表示・スマホ表示で記事タイトルの下にもラベルを持ってきてみました。
ラベルを付けたからどうなるの？って話ですが、記事を読んで気になるラベルをポチッと押して頂ければ同じラベル記事が見れるので、ほんのちょっとですがわかりやすくなりました。しかしながら、上の画像でラベルよりも気になるのが、、、記事下のマロンちゃん洗濯物干しっぱの件(； ・`д・´)…ｺﾞｸﾘ
マロン家、洗濯物の運命やいかに⇒こちら
ちなみに、表記の方法はTOP画面 テンプレート → ＨＴＭＬの編集
ここでまずはbloggerのHTMLの編集画面のソースコードが書かれているところをクリックして頂き、『Ctrlキー』と『Ｆ』を同時に押すと【Search】という窓が開きます。
ここに div class='post-header-line-1 とぶち込んで頂くと、お使いのテンプレートにもよりますが2つ出てくると思います。※Ｅｎｔｅｒキー1回で1つ目、もう1回押すと2つ目にいきます。
今回はＰＣ・スマホ両方への付け方を説明すると、この両方の div class='post-header-line-1 の直ぐ下に以下のコードをぶち込みます。
コード上の問題なのか、文字で打ち込んでも出てこないので画像にしてます(`・ω・´)
他にも細かい所だと、スマホタイトル文字の大きさを20pxから14pxに落としてみたり、ＰＣ表示でサイドバーに追尾広告を出す方法を調べたり。手が空いた時にちょいちょいブログのカスタマイズを行ってます(`・ω・´)
ちなみに今調べてるのは、スマホ表示の現在左詰め表示になってるランキング記事や、お問い合わせフォームをセンタリングで真ん中に持ってけないか確認中ですが、無さそう(。-`ω´-)ﾝｰ
方法がわかった際はどこかのタイミングでネタにしようかな～と考え中でございます。
1点注意点といたしましては、カスタマイズは表面上の変更だけでなく、勝手にスマホ表示にも適応してくれたりしますので、PC表示で上手くカスタマイズできたーー！けど、スマホ表示だとガッタガタ！になっちゃうなんて事もあります。ですので、カスタマイズをされる際は必ずバックアップを取っておく事と、どこを変更したのか覚えておく事ですね。
こんな感じで日々ちょこちょこ進化しているアーヴェストホテル蒲田（東口） オフィシャルブログを、今後ともどうぞよろしくお願い申し上げます( *・ ω・)*_ _))オス！
併せて！
現在モリモリニィーアル中のアーヴェストホテルズ オフィシャルＨＰ！私もリニューアルにちょっぴり参加してますが、ブログと違ってスタイリッシュでエレガントでゴージャスでエグゼクティブで、何より『シンプルだけど分かりやすいホテルＨＰ』を目指し日々奮闘しておりますので、是非ご確認頂ければ幸いでございます(`・ω・´)
★☆／／／／ ＼＼＼＼☆★
最後に、そろそろポケモンGOが日本配信開始されますね。我がアーヴェストホテル蒲田(東口)、愛すべき下町蒲田にはどんなポケモンが潜んでるのか。なんか、すんげーのが居そうな気がするのは私だけでしょうか(； ・`д・´)…ｺﾞｸﾘ
結構羽田空港、特に国際線ターミナル辺りにレアなポケモンとか居そうな気がしますね！
歩きスマホに注意しマナーを守って、アーヴェストホテルのポケモンマスターを目指そうと思います(`・ω・´)
にほんブログ村 ビジネスホテルランキング１位 を爆走中です。
まだまだ爆走したいので、最後にポチッとお願いします(。・・)σ
にほんブログ村
10000PVを突破し、アーヴェストホテル蒲田（東口）は Next Stage へ！
新しいランキングサイトに参加いたしましたので、にほんブログ村と併せてポチッとお願いします(。・・)σ
旅館・ホテル ブログランキングへ
0 件のコメント :
コメントを投稿