2017-04-12

記事中の画像の影の消し方

『Like New』をご利用いただきましてありがとうございます。
記事中の画像の影の消し方に関してご質問いただいたので、この場でその方法を回答したいと思います。

方法

管理画面から【デザイン】→カスタマイズの【デザインCSS】の順にクリックし、下記のコードをコピペしてください。

.entry-content img {
    box-shadow: none;
}

！『Like New』のカスタマイズに関して！

『Like New』は定番カスタマイズをデフォルト化し（初期設定として組み込まれています）、文字通りコピペたった一回ですむようにしてあります。

これもデフォルト化してほしい！、こんな風にカスタマイズしたい！などなどのご要望がありましたら、お気軽にご連絡ください。
このブログのコメント欄、もしくはTwitterにて受けつけております！

黒音セシルTwitter

2017-03-16

フォローボタンの実装

カスタマイズ

以下のようなフォローボタンもデフォルト化しています。
フォローボタンは2種類用意いたしました。

デフォルト１

デフォルト２

それぞれのホバー（マウスを置いたとき）は以下の通りです。

実装方法

管理画面の【デザイン】から、お好きな箇所に以下のコードで貼ってください。

<div class="followBtn[実装したいデフォルトの番号をお入れください]">
<p>Follow Me!</p>
<ul>
　　　　<!-- 読者登録ボタンを消したい場合はここから削除 -->　
	<li>
		<a class="followHatena" href="http://blog.hatena.ne.jp/はてなID/ブログURL（http://は除く）/subscribe" title="読者登録" onclick="window.open('http://blog.hatena.ne.jp/はてなID/ブログURL（http://は除く）/subscribe', '', 'width=500, height=400'); return false;"><i class="blogicon-hatenablog"></i></a>
	</li>
　　　　<!-- 読者登録ボタンを消したい場合はここまで削除 -->　　
　　　　<!-- Twitterボタンを消したい場合はここから削除 -->　　
	<li>
		<a class="followTwitter" href="URLを入れてください" title="Twitterをフォローする" target="_blank"><i class="fa fa-twitter fa-fw"></i></a>
	</li>
　　　　<!-- Twitterボタンを消したい場合はここまで削除 -->
　　　　<!-- Facebookボタンを消したい場合はここから削除 -->　
	<li>
		<a class="followFacebook" href="URLを入れてください" title="Facebookの友達登録する" target="_blank"><i class="fa fa-facebook fa-fw"></i></a>
	</li>
　　　　<!-- Facebookボタンを消したい場合はここまで削除 -->　
　　　　<!-- インスタグラムボタンを消したい場合はここから削除 -->　
	<li>
		<a class="followInstagram" href="URLを入れてください" title="インスタグラムをフォローする" target="_blank"><i class="fa fa-instagram fa-fw"></i></a>
	</li>
　　　　<!-- インスタグラムボタンを消したい場合はここまで削除 -->　
　　　　<!-- Feedlyボタンを消したい場合はここから削除 -->　
	<li>
		<a class="followFeedly" href="http://feedly.com/i/subscription/feed/http://ブログURL/feed" title="Feedlyで購読する" target="_blank"><i class="fa fa-rss fa-fw"></i></a>
	</li>
　　　　<!-- Feedlyボタンを消したい場合はここまで削除 -->　
　　　　<!-- Google＋ボタンを消したい場合はここから削除 -->　
	<li>
		<a class="followGooglePlus" href="URLを入れてください" title="Google＋" target="_blank"><i class="fa fa-google-plus fa-fw"></i></a>
	</li>
　　　　<!-- Google＋ボタンを消したい場合はここまで削除 -->　
</ul>
</div>

例えば、デフォルト１を実装したい場合は{実装したいデフォルトの番号をお入れください]の部分を１に変更します。

<div class="followBtn1">

デフォルト２を実装したい場合は同様に、１を２に変更していただければOKです。
！注意！「URLを入れてください」「はてなID」などの箇所を正しく記述してください。

CSSコードは以下の通りに設定してあります。
！すでに組み込んであるので、初期設定を変えたい場合以外はコピペ不要です！

.followBtn1 {
	text-align: center;
}

.followBtn1 p {
	font-size: 14px; /* 「Follow Me!」の文字の大きさを変えたい方は数字を変更してください */
	color: #555; /* Follow Me!」の文字色を変えたい方は[#]以下を変更してください */
}

.followBtn1 ul {
	list-style: none;
	padding: 0;
}

.followBtn1 li {
	display: inline-block;
	vertical-align: top;
}

.followBtn1 a {
	display: block;
	border: 1px solid #778899; /* 枠の色を変えたい方は[#]以下を変更してください */
	width: 60px; /* アイコンの幅を変えたい方は数字を変更してください */
	height: 60px; /* アイコンの高さを変えたい方は数字を変更してください */
	line-height: 60px;
	color: #ffffff; /* アイコンの色を変えたい方は[#]以下を変更してください */
	background-color: #778899; /* 背景の色を変えたい方は[#]以下を変更してください */
	font-size: 25px; /* アイコンの大きさを変えたい方は数字を変更してください */
	text-align: center;
	margin-right: 5px;
	box-shadow: 2px 2px #eee;
}

.followBtn1 a:hover {
	box-shadow: none;
	color: #778899; /* ホバーのアイコンの色を変えたい方は[#]以下を変更してください */ 
	background-color: white; /* ホバーの背景色を変えたい方は[#]以下を変更してください */
}

.followBtn2 {
	text-align: center;
	margin: 0 auto;
	max-width: 600px;
}

.followBtn2 p {
	font-size: 14px; /* 「Follow Me!」の文字の大きさを変えたい方は数字を変更してください */
	color: #555;　/* 「Follow Me!」の文字の大きさを変えたい方は[#]以下を変更してください */
}

.followBtn2 ul {
	list-style: none;
	padding: 0;
}

.followBtn2 li {
	display: inline-block;
	vertical-align: top;
}

.followBtn2 a {
	display: block;
	border: 1px solid #778899;　/* 枠の色を変えたい方は[#]以下を変更してください */
	width: 150px;　/* 枠の幅を変えたい方は数字を変更してください */
	height: 60px;　/* 枠の高さを変えたい方は数字を変更してください */
	line-height: 60px;
	color: #ffffff;　/* アイコンの色を変えたい方は[#]以下を変更してください */
	background-color: #778899;　/* 背景色を変えたい方は[#]以下を変更してください */
	font-size: 25px;　/* アイコンの大きさを変えたい方は数字を変更してください */
	text-align: center;
	margin-right: 5px;
	margin-bottom: 5px;
	box-shadow: 2px 2px #eee;
}

.followBtn2 a:hover {
	box-shadow: none;
	color: #778899;　/* ホバーのアイコンの色を変えたい方は[#]以下を変更してください */ 
	background-color: white;　/* ホバーのアイコンの色を変えたい方は[#]以下を変更してください */ 
}

！『Like New』のカスタマイズに関して！

2017-03-16

シェアボタンの実装

カスタマイズ

以下のようなシェアボタンもデフォルト化しています。

ホバー（マウスを置いたとき）は以下のように反転するようになっています

実装方法

管理画面の【デザイン】から、お好きなところに以下のコードで貼ってください。

<div class="share-buttons1">
	<ul>
	    <li>
	    	<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatebu" title="このエントリーをはてなブックマークに追加する" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
	    		<i class="blogicon-bookmark"></i>
	    	</a>
	    </li>
	    <li>
	    	<a class="shrTwitter" href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" title="このエントリーをFacebookでシェアする" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
	    		<i class="fa fa-facebook fa-fw"></i>
	    	</a>
	    </li>
	    <li>
	    	<a class="shrFacebook" href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}" title="このエントリーをTwitterでシェアする" target="_blank">
	       		<i class="fa fa-twitter fa-fw"></i>
	    	</a>
	    </li>
	    <li>
	    	<a class="shrGooglePlus" href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"　title="このエントリーをGoogle＋でシェアする">
	    		<i class="fa fa-google-plus fa-fw"></i>
	    	</a>
	    </li>
	    <li>
	    	<a class="shrPocket" href="http://getpocket.com/edit?url={URLEncodedPermalink}" title="このエントリーをPocketでシェアする" target="_blank">
	    		<i class="fa fa-get-pocket fa-fw"></i>
	    	</a>
	    </li>
	</ul>
</div>

CSSコードは以下の通りに設定してあります。
！すでに組み込んであるので、初期設定を変えたい場合以外はコピペ不要です！

.share-buttons1 ul {
	list-style: none;
	padding: 0;
}

.share-buttons1 li {
	display: inline-block;
	vertical-align: top;
}

.share-buttons1 a {
	display: block;
	border: 1px solid #f5f5f5;　/*枠の色を変えたい方は[#]以下を変更してください */
	width: 60px;　/* 幅を変えたい方は数字を変更してください */
	height: 60px;　/* 高さを変えたい方は数字を変更してください */
	line-height: 60px;　
	color: #778899;　/* アイコンの色を変えたい方は[#]以下を変更してください */
	font-size: 25px;　/* アイコンの大きさを変えたい方は数字を変更してください */
	text-align: center;　
	margin-right: 5px;　
	box-shadow: 2px 2px #eee;　
}

.share-buttons1 a:hover {
	box-shadow: none;　
	color: white;　/* ホバーのアイコンの色を変えたい方は[#]以下を変更してください */
	background-color: #778899;　/* ホバーの背景の色を変えたい方は[#]以下を変更してください */
}

！『Like New』のカスタマイズに関して！

2017-03-16

ボックスの実装

カスタマイズ

以下のようなボックスもデフォルト化しています。

カスタマイズの要望はお気軽に！フォローもよろしくお願いします（^^）

黒音セシルTwiter

実装方法

ボックス実装したい場合はを記事編集画面の【HTML編集】から、行ってください。

！記事外でも使うことができます。
その場合は、管理画面の【デザイン】からお好きなところへどうぞ。

<div class="box1">
     <div class="box1-title">お好きなタイトルをお入れください。</div>
</div>
<div class="box1-content">文章を入れてください。</div>

例えば、「『Like New』の概要はコチラ！」をタイトルに、「『Like New』をリリースしました」という文章に実装したい場合はこのような記述になります。

<div class="box1">
     <div class="box1-title">『Like New』の概要はコチラ！</div>
</div>
<div class="box1-content"><a href="http://kurootocecile.hatenadiary.jp/entry/2017/03/15/121529">『Like New』をリリースしました</a></div>

CSSコードは以下の通りに設定してあります。
！すでに組み込んであるので、初期設定を変えたい場合以外はコピペ不要です！

.box1 {
	background-color: #778899; /* タイトル部分の背景色を変えたい方は[#]以下を変更してください */
	border: 1px solid #778899; /* 枠の色を変えたい方は[#]以下を変更してください */
	padding-left: 10px; 
	font-size: 1.16em;
}

.box1-title {
	line-height: 18px; 
	font-weight: bold;
	color: white;　/* タイトルの文字色を変えたい方は[#]以下を変更してください */
	padding: 10px;
}

.box1-content {
	border: 1px solid #778899; /* 枠の色を変えたい方は[#]以下を変更してください */
	padding: 10px; 
	font-size: 1em;
}

！『Like New』のカスタマイズに関して！

2017-03-16

下線の実装

カスタマイズ

以下のような下線もデフォルト化しています。

この下線の色は自由に変更することができます

実装方法

下線をつけたい文章を記事編集画面の【HTML編集】から、以下のコードで囲ってください。

<span class="_line"><span>

例えば、「下線をつけたい」という文章に実装したい場合はこのような記述になります。

<span class="_line">下線をつけたい</span>

CSSコードは以下の通りに設定してあります。
！すでに組み込んであるので、初期設定を変えたい場合以外はコピペ不要です！

._line {
	background: linear-gradient(transparent 80%, #FFF176 0%); /* 色を変えたい方は[#]以下を変更してください */
}

！『Like New』のカスタマイズに関して！

2017-03-16

強調リンクの実装

カスタマイズ

以下のような強調リンクもデフォルト化しています。

黒音セシルTwitter

実装方法

強調したいリンクを記事編集画面の【HTML編集】から、以下のコードで囲ってください。

<span class="linkBtn"><span>

例えば、黒音セシルTwitterのリンクに実装したい場合はこのような記述になります。

<span class="linkBtn"><a href="https://twitter.com/oto48_geranium">黒音セシルTwitter</a></span>

CSSコードは以下の通りに設定してあります。
！すでに組み込んであるので、初期設定を変えたい場合以外はコピペ不要です！

.linkBtn {
    text-align: center;
}

.linkBtn a {
    display: block;
    width: 75%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;　/* 文字色を変えたい方は[#]以下を変更してください */
    background-color: #ff6666; /* 色を変えたい方は[#]以下を変更してください */
    border-radius: 5px;
    box-shadow: 3px 3px #eee;
    text-decoration: none;
    font-size: 20px;
    margin: 0 auto;
}

.linkBtn a:hover {
    box-shadow: none;
    color: #000000;　/* 文字色を変えたい方は[#]以下を変更してください */
    text-decoration: underline;
    background-color: white;　/* ホバーの背景色を変えたい方は[#]以下を変更してください */
    border: 2px solid #ff6666; /* ホバーの枠の色を変えたい方は[#]以下を変更してください */
}

！『Like New』のカスタマイズに関して！

2017-03-16

タイトル下ナビゲーション

カスタマイズ

タイトル下ナビゲーションは既に設置してある通りとなっております。

設置方法

ブログの管理画面から、【デザイン】→【タイトル下】をクリックします。そこに以下のコードをコピペしてください。

<nav id="main-nav">
    <div id="main-nav-inner">
        <ul>
            <li><a href="#">Menu</a></li> <!-- ナビゲーションの数を増やしたい場合はこの行を複製してください --!>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li> 
        </ul>
    </div>
</nav>

ブログに反映されたのがわかると思います。

リンク先を変更したい場合は、[#]の部分にURLを入れてください。
リンク名を変更したい場合は、[Menu]の部分をお好きな文字に変更ください。

CSSコードは以下の通りに設定してあります。
！すでに組み込んであるので、初期設定を変えたい場合以外はコピペ不要です！

#main-nav {
	width: 100%;
	padding: 0;
	border-top: 1.5px solid #aeaeae; /* 上の線の色を変えたい方は[#]以下を変更してください */
	border-bottom: 1.5px solid #aeaeae; /* 下の線の色を変えたい方は[#]以下を変更してください */
	margin-bottom: 12px;
}

#main-nav-inner ul {
	margin: 0;
	padding-left: 30px; /* 文字数が多い場合やリンク数が多い場合は数字を下げて調節してください */
}

#main-nav-inner li {
	display: inline-block;
	margin: 0;
	line-height: 30px;
    　　font-size: 18px; /* 文字数が多い場合やリンク数が多い場合は数字を下げて調節してください */
	padding: 15px 30px; /* 文字数が多い場合やリンク数が多い場合は数字を下げて調節してください */
}

#main-nav-inner li:hover {
    　　background-color: #f9f9f9; /* ホバーの色を変えたい方は[#]以下を変更してください */
}

#main-nav-inner a {
	color: #000000; /* 文字の色を変えたい方は[#]以下を変更してください */
}

#main-nav-inner a:hover {
    　　color: #a3b9e0; /* ホバー時の文字の色を変えたい方は[#]以下を変更してください */
}