デフォルトでももちろんかっこいいですが、スマホ表示の時にヘッダーの表示がおかしかったので直してみたのと余白をなくしてコンテンツを画面いっぱいに表示したかったのでCSSで調整してみました。
モバイルサイズタイトル幅（ヘッダー）の調整
ヘッダーの幅を狭くする
もともとあるカスタマイズ項目で変更できるんですが、うまく表示されないので自分で調節しました。
/*モバイルタイトル幅（ヘッダー）*/
@media (max-width: 719px) {
.site-title {
font-size: 20px;
}
}
@media only screen and (max-width: 719px) {
#header.both-menus-mobile-on .logo-tagline-group {
height:50px;
}
}
@media only screen and (max-width: 719px) {
.site-title {
padding: 15px 0;
}
}
height:60px;←ヘッダーの幅、font-size: 25px;←タイトル文字の大きさ、padding: 18px 0;←タイトルの位置
モバイルサイズでコンテンツの余白をなくす
スマホ表示の時のコンテンツ余白を消して画面いっぱいで表示されるようにする
フル画面のほうがかっこいい気がするのでやってみました。
/*モバイルサイズコンテンツ幅 */
@media only screen and (max-width: 719px)
{
.pad {
padding: 0px;
}
}
アイキャッチ画像が画面いっぱいになりました。このままでもいいと思いますが、記事タイトルなどの文字も余白がなくなっているので気になる場合は左に余白をいれて調整します。
/*記事タイトルの余白*/
.post-title.entry-title {
padding-left:3px;
}
/*カテゴリーと日付の余白*/
.post-meta {
padding-left:2px;
}
/*投稿者と日付の余白*/
.post-byline {
padding-left:4px;
}
/*記事本文の余白*/
.entry p {
padding-left:3px;
}
/*タグの余白*/
.post-tags {
padding-left:4px;
}
/*モバイルサイズ個別ページカテゴリーの余白*/
@media only screen and (max-width: 719px)
{
.page-title.pad {
padding-top: 5px;
padding-bottom: 5px;
padding-left:2px;
}
}
サイドバーの幅
サイドバーの左右の余白を狭くする
カスタマイズ項目で20pxか30pxしか選択肢がなく、もう少し狭くしたかったので変更しました。
/* サイドバーの幅調整 */
.sidebar .widget {
padding: 5px;
padding-top: 20px;
}
/* モバイルサイズサイドバーの幅調整 */
@media only screen and (max-width: 719px)
{
.sidebar .widget {
padding-left: 5px!important;
padding-right: 5px!important;
}
}
フッターの幅を狭くする
フッターに何か表記したりリンクを入れる場合はいいんですが、何もないと幅が広すぎるので、下部を狭くしました。
/*モバイルサイズフッター幅調整*/
@media only screen and (max-width: 719px)
{
#footer-bottom .pad {
padding-top: 40px;
padding-bottom: 10px;
}
}
かっこいいブログデザインになった
今回は主にテーマHuemanのスマホ表示をcssでカスタマイズしました。好みは分かれるかもしれませんが、余白をなくすことでスタイリッシュなブログデザインになりました。細かいことかもしれませんがやはり自分好みのデザインにできるとよりいっそうブログに愛着がわくと思います。
シェアボタンをプラグインなしで設置する方法
ニュース系サイトやバイラルメディアで欠かせないのが記事をシェアしてもらうためのSNSシェアボタンです。多くの人に記事を読んでもらうためには訪れた人に共有して広めてもらうのが一番だからです。今回のサンプルサイトではTwitter、facebook、LINEの３つでシンプルなデザインにしています。
まずはこちらのソースコードを記事下など表示させたい場所に記入します。
<div class="shbutton">
<div class="bazu">
<ul class="clearfix">
<li class="twitter">
<a href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>&via=******" target="_blank" title="Twitterで共有" class="twitter">Twitter</a>
</li>
<li class="facebook">
<a href=http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookで共有" class="facebook">Facebook</a>
</li>
<li class="line">
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank" title="LINEで送る" class="line">LINE</a>
</li>
</ul>
</div>
</div>
viaにはあなたのアカウントID（＠はのぞく）をいれてください。
これを設定しておくと共有されたときに◯◯さんからという表示がでるようになるのでアカウントをフォローしてもらえる率がたかくなります。
なくても大丈夫ののでその場合はviaの部分をまるごと省いてください。
次にcssで見た目を整えます。
.shbutton{
width:100%;
}
.bazu{
margin:0 auto;
text-align:center;
}
.bazu ul {
list-style:none;
}
.bazu li {
float:left;
width:31%;
padding-left: 5px;
margin:0 3% % 0;
}
.bazu li a {
font-size:19px;
position:relative;
display:block;
padding:10px;
color:#fff;
text-align:center;
text-decoration: none;
text-shadow:0px 0px 0 rgba(255,255,255,0.3);
}
.bazu li a:hover {
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
}
.bazu .twitter a {
background:#00acee;
box-shadow:0 6px 0 #0092ca;
}
.bazu .facebook a {
background:#3b5998;
box-shadow:0 6px 0 #2c4373;
}
.bazu .line a {
background:#25af00;
box-shadow:0 6px 0 #219900;
}
テーマやデザインによってくずれるかもしれませんが、まずwidthをきめてからpaddingとmarginを調節していけばきれいにするととができるので、数字を変えて好みのデザインに変更してみてください。
表示のはやいシェアボタンの完成
Twitterカードなどの設定をする必要もありますが、上記のHTMLとcssで一応シェアボタンとして機能します。プラグインなしで設置したシェアボタンは表示速度が速いのでとても便利です。
関連記事をプラグインなしで表示するやり方
便利なプラグインは多々ありますが、使いすぎるとサイトの表示速度に影響がでてしまいますよね。しかしプラグインを使わなくても以外と簡単に表示することができるものもあります。今回は関連記事をプラグインなしで表示してみましょう。
まずは表示したい場所にソースコードを記入します。
記事が属するカテゴリを取得して関連記事を表示しています。コードを書き換えることでタグから関連記事を表示することもできます。‘posts_per_page’ => ‘6’,←この部分で表示する記事数を指定できます。
次にCSSで見た目を整えます。
/* 関連記事 */
.kanrenkiji {
padding: 0px;
margin: 30px 0 0;
}
.kanrenkiji h4 {
padding: 4px 6px;
font-size: 1.35em;
border-bottom: solid 1px #999;
}
.kanrenkiji ul {
margin: 10px 0;
padding-left: 12px;
font-size: 0;
}
.kanrenkiji li {
display: inline-block;
box-sizing: border-box;
width: 33%;
padding: 10px 5px;
list-style: none;
vertical-align: top;
}
.kanrenkiji li a {
display: block;
text-decoration: none;
color: #000;
}
.kanrenkiji li a:hover {
color: #000070;
background-color: #eee;
}
.kanrenkiji .text {
font-size: 15px;
font-weight: bold;
}
.kanrenkiji img {
height: 80px;
object-fit: cover;
}
@media (max-width: 764px) {
.kanrenkiji li {
display: inline-block;
box-sizing: border-box;
width: 48%;
padding: 10px 4px;
list-style: none;
vertical-align: top;
}
}
アイキャッチと記事タイトルが表示されます。サンプルサイトではPC表示では縦２列、モバイル表示では横２列になるようにしています。表示数とcssを調整することで好みのデザインにしてみてください。
他記事を読んでもらえるようになる
上記のcssはシンプルなものですが、アイキャッチ画像に影をつけたりしてみてもクールな見た目になってかっこいいですね。関連記事を設置することサイト内での回遊率を上げることができますので、是非とも設置してみてください。