素人がAndroidアプリを綺麗にデザインしたければこれを読め！な記事9選
Androidアプリを綺麗にデザインしようと思ったときに私が参考にした記事をまとめました。
どの記事もとても参考になり、理解することができれば、空白の設定位置やマテリアルデザインのことをかなり知ることが出来ると思います。
そのため、どの記事もじっくり読んでみてください。
続きを読む超簡単！Androidアプリのマテリアルデザイン実装に持って来いな方法を徹底解説！
今回はAndroidアプリ開発におけるマテリアルデザインの実装方法を紹介します。
私は最近Androidアプリ開発をしていて、その一環で学んだことをまとめる＆紹介したいと思います。
しかし、Androidアプリ開発初心者であるため、間違えたことを紹介するかもしれないのでご了承ください。
また、間違いに気づいた方は教えて頂けるとありがたいです！！
私は作成しているアプリのminSDK?をAPI15くらいにしていて、Android OS4.~.~系をターゲットにしています。
そのため、Android5系から採用されているマテリアルデザインを使用することができませんでした。
そこで、gitで公開されているマテリアルデザインのコンポーネント(ButtonやEditText)を使用することでマテリアルデザインの導入ができました。
gitでは数多くのコンポーネントなどのライブラリが紹介されています。
そのため、ButtonやListViewなどのデザインやタップ時のアクションのプログラミングをできない人でも簡単にマテリアルデザインを使うことができます！
それでは、Androidアプリにマテリアルデザイン(Material Design)を適応させる方法を紹介していきます。
※この記事は2015年12月11日に執筆しました。
続きを読むシェアボタンのGoogle+とPocketのシェア数読み込まれない対策！ゆきひーさんに感謝
今回はいつもお世話になっているゆきひーさんのフラットデザインのシェアボタンについて書きます。
どうやらゆきひーさんが以前紹介していたコードでは、2015年9月30日以降、シェア数が読み込めなく、ずっとグルグルと更新状態になってしまうかもしれないとのことです。
このシェア数グルグル問題についての告知とゆきひーさんへの感謝を込めて、シェボタンについて紹介します。
続きを読む最新記事・人気記事をクリックさせたくなるようなデザインに変更する方法
今回はずっと探していたサイドバーの記事をオシャレかつクリックしたくなるようなデザインを探していました。
現在私のサイドバーで実践しているようなデザインが今回紹介するものそのものです。
それでは、3つのパターンについて説明していきます。
続きを読むはてなブロガーがPVを増やすためにマネすべきブログデザイン5選[コピペのみでおしゃれに]
今回ははてなブロガー向きの話です。
はてなブログはテンプレートも多く、好きなデザインもすぐに見つかると思います。
しかし、このテンプレートだけじゃ物足りないと感じる方も多いでしょう。実際、テンプレートのみじゃ基本的に足りないです。
そこで、今回ははてなブログをよりオシャレかつ、シェアしたくなるような見た目にして、PV数を増やせるようなデザインにする方法を紹介します。
基本的にコピペでOKです。
続きを読むProgateはブログ初心者がhtmlを1日で理解するのにオススメ！
皆さんProgateって知っていますか？？
まあhtmlとcssマスターしてるぜ！って人には関係ないですけど、ブログ書いていたりする人でhtml何それ？美味しいの？って人にオススメしたいWebサービスです。
Progateでhtmlやcssを学べば、1日でhtmlやcssの大まかな知識を得られると思います！
ここから具体的にProgateについて紹介していきます。
続きを読む
記事タイトルの文字数32文字を徹底することはSEOの基本
記事タイトルは記事を書く中でもかなり重要な部分だと思います。
大概の人はタイトルを見て、その記事を読むか読まないかを決定するからです。
つまり、たった一行しかない文字たちが読まれるか読まれないかが決定するわけです。
このタイトルのことについて今回は紹介していこうと思います。
続きを読むはてなブログのデザインを変更するときに参考にしたいブログ3選
はてなブログには多くのテンプレートが揃っていて、とても便利ではあります。
そのテンプレートを使用しつつ、自分で改造していけば、よりオリジナリティのあるブログに仕上がります。また、TwitterなどのSNSへの拡散、読者のリピータ化などを狙いやすくなることでしょう。
庭で例えると分かりやすいと思います。同じ花々を植えた時、整った綺麗な庭とボサボサとした汚い庭どちらを見ますか？また、どちらを他人に教えたいと思うかは明白です。
それでは、紹介していきます。
続きを読むはてなブログのスマートフォンのデザインから不要な要素を削除する方法
まず、初めにはてなブログPROの有料会員である必要があります。中には無料会員でも消せるものがあるかもしれません。
はてなブログのスマートフォン表示では必要のない情報が結構表示されています。そのため、今回紹介する方法を実践すれば、不要な要素を消すことができます。
今回は以下の要素を削除する方法についてご説明します。
- 最上部のログインリンク
- ブログアイコン
- はてなブログ勧誘、記事を書く、サインイン
- はてなブログ開発ブログなどへのリンク
- 最下部ダッシュボード
- Powered by HatenaBlog.
編集方法
デザイン→スマートフォン→ヘッダ→タイトル下
の順でクリックし、タイトル下にコードを追加
または、記事の記事上に追加
また、追加するコードはタイトル下のhtml編集欄にstyleタグで囲んで記述する必要があります。
<style type="text/css">
</style>
それでは以下で追加するコードを紹介します。
最上部のはてなブログアイコンとログインボタンの削除
#globalheader-container {
display: none;
}ブログタイトル上の丸いアイコンの削除
.header-blog-icon {
display: none;
}ブログタイトル下のブログ説明の削除
#blog-description {
display: none;
}はてなブログ勧誘・記事を書く・記事の管理の削除
.footer-action-wrapper {
display: none;
}はてなブログ開発ブログなどへのリンクの削除
.touch-item-list { display: none; }その他の削除
プロフィールの削除
.profile {
display: none;
}注目記事の削除
.hatena-module-entries-access-ranking {
display: none;
}最下部ダッシュボードなどの削除
#footer-menu {
display: none;
}
Powered by Hatena Blog.の削除
.footer {
display: none;
}
まとめ
よく分からないと言う方や読むのが面倒だと言う方は以下にあるコードをスマートフォンデザインのヘッダのタイトル下にコピペして下さい。
- 最上部のログインリンク
- ブログアイコン
- はてなブログ勧誘、記事を書く、サインイン
- はてなブログ開発ブログなどへのリンク
- 最下部ダッシュボード
- Powered by HatenaBlog.
以上6つを削除するコードです。
<style type="text/css">
#globalheader-container {
display: none;
}
.header-blog-icon {
display: none;
}
#blog-description {
display: none;
}
.footer-action-wrapper {
display: none;
}
.touch-item-list {
display: none;
}
#footer-menu {
display: none;
}
.footer {
display: none;
}
</style>オススメ記事
はてなブログにソースコードを貼り付ける方法
htmlやJava、C言語などのソースコードをはてなブログに表示させたいと言う方も多いと思います。
今回は、ソースコードの部分だけ色を付け、綺麗に表示する方法を紹介します。
はてなブログ以外の場合でもやり方は一緒なので参考にして下さい。
表示方法
- はてな記法を使用する方法（はてなブログ用？）
- htmlコードを使用する方法（どのブログでも使用可？）
はてな記法を使用する方法
>|| ||<
でコードを囲って下さい。
これははてなブログでする場合のみしか使えないかもしれません。
はてなブログで使用する場合は、「はてな記法」をONにしてください。
「設定」→「編集モード」から設定できます。
htmlコードを使用する方法
<pre><code></code></pre>
でコードを囲って下さい。これで囲ったコードをhtml編集の部分に貼り付けて下さい。
以下に例を示します。
例えば、
h3{
font-size: 120%;
margin:5px 0px;
padding:2 2 2px 2px;
}
のようなコードをブログに表示させるとします。これを「<pre><code></code></pre>」で囲むだけで以下のようになります。
h3{
font-size: 120%;
margin:5px 0px;
padding:2 2 2px 2px;
}以上で終わりです。
まとめ
ソースコードを表示させるときはこのような方法を使用することで、他サイトで見るようなソースコードの表示方法を実現できます。
